mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 14:50:02 +00:00
ukimsanov
a1ffb6e7bf
Rewrite of the website-to-hyperframes skill that came out of 11
evaluation rounds. The honest read of those evals: prose-only
guidance had hit its ceiling — sub-agents kept reporting "0 errors,
looks good" without doing the work, producing slideshow-quality
videos with mismatched brand colors, missing logos, and beats that
didn't serve the storyboard. This restructure addresses the
failure modes that real videos showed, not theoretical ones.
**Step structure (replaces 7-step layout with concept-first 6-step)**
Old: capture → design → script → storyboard → vo → build → validate
New: capture → design → brief → storyboard → vo → build → validate
The brief step (Step 2) is new: a conversation-shaped step that
aligns message + audience + arc before any beat-writing happens.
Concept-first throughout — message → arc → beats that serve the arc
→ which assets and techniques bring each beat to life.
**Step 0 (capture)**
- "View the contact sheets — carefully, every cell, not a glance"
closes the failure mode where agents reported "viewed the contact
sheet" after one scroll and later wrote beats referencing assets
that didn't exist or missed the brand logo.
- Names the right artifacts to read in order (tokens.json →
design-styles.json → asset-descriptions.md → fonts-manifest.json),
with read-on-demand guidance for the rest.
**Step 1 (design)**
- DESIGN.md authoring guide. Restored component CSS sections
(Component Stylings, Spacing & Layout, Depth & Elevation) that
earlier batches over-collapsed.
**Step 2 (brief)**
- Strategy/messaging step. Clear instruction for "Surprise me" /
minimal direction: state the minimum context (where the video
runs, who it's for) and proceed bold.
**Step 3 (storyboard + script)**
- Concept gate at the top — answer "what makes this video distinct"
before writing beat 1.
- Brand-floor MUST rules (logo in opener + closer; signature visual
somewhere in the video).
- Captured assets (SVG logos, illustrations, hero art, gradients)
are first-class beat content alongside composed UIs — many of
them carry beats outright. The constraint is only that you start
from the message, not the asset inventory.
**Step 4 (vo)**
- TTS ranking: HeyGen first (auto word timestamps), ElevenLabs
second, Kokoro free. Audio timing reconciliation gate: if actual
audio duration ≠ storyboard planned ±15%, rescale beats or trim
script before Step 5.
**Step 5 (build) + beat-builder-guide.md**
- Sub-agent template now pastes brand values inline rather than
telling the sub-agent to re-read DESIGN.md. Targeted file reads
with specific sections + line ranges.
- "Patterns that ARE shots" affirmative list (captured logo
draw-on, hero illustration push-in, captured screenshot with
parallax layers, kinetic typography over captured asset).
- Webpage-mimicry patterns (full CSS browser chrome, parked-camera
composition, ±2px breathing motion) marked ⚠ rather than ❌ —
fine when the storyboard genuinely calls for them as the subject.
- Required cinematography per beat: shot type, camera move, depth
strategy, purpose.
**Step 6 (validate) — per-beat read protocol**
This replaces the previous "spawn verify-beats CLI" gate. A grep
of composition HTML can catch structural lies (missing hex codes,
wrong asset paths) but it can't catch boring beats, off-screen
logos, GSAP timelines that only cover the first 2 seconds, or
camera moves that don't match the storyboard. Those failures only
surface when somebody opens the file and reads it.
Per-beat verdict template names the brand hex codes used, captured
asset paths referenced, headline `font-size`, GSAP timeline
coverage, and storyboard alignment. Critic sub-agent scores a
"Captured asset utilization" dimension specifically so the eval
captures whether captured SVGs/illustrations carried beats or got
recreated as divs.
**Asset bundle**
- 20 Pixabay-licensed SFX files with `CREDITS.md` documenting
provenance. SFX assignment moved to Step 3 (creative decision)
so Step 5 implements rather than improvises.
- Capabilities reference + html-in-canvas-patterns updated:
Three.js 0.181.2 + ESM jsm imports, mulberry32 seeded PRNG for
deterministic shatter, 24-effect text-animation catalog
referenced (catalog itself lands in the hyperframes-skill PR).
- Visual vocabulary rewritten: replaces user-word lookup tables
with brand-first derivation across 6 axes; user words land as
modifiers, not replacements.
98 lines
4.2 KiB
JSON
98 lines
4.2 KiB
JSON
{
|
|
"chime": {
|
|
"file": "chime.mp3",
|
|
"duration": 2.5,
|
|
"description": "This is a soft, melodic chime sound effect perfect for signaling a gentle transition or a lighthearted moment in a video."
|
|
},
|
|
"click-soft": {
|
|
"file": "click-soft.mp3",
|
|
"duration": 0.37,
|
|
"description": "This is a smooth, medium-energy swoosh sound effect, perfect for transitioning between two scenes or highlighting a sleek reveal."
|
|
},
|
|
"click": {
|
|
"file": "click.mp3",
|
|
"duration": 0.37,
|
|
"description": "This is a sharp, medium-energy digital \"whoosh\" effect that works perfectly for a quick transition between video clips."
|
|
},
|
|
"error": {
|
|
"file": "error.mp3",
|
|
"duration": 1.62,
|
|
"description": "This is a sharp, medium-energy digital glitch sound that serves as an effective, abrupt transition for a video cut or error screen."
|
|
},
|
|
"glitch-1": {
|
|
"file": "glitch-1.mp3",
|
|
"duration": 2.64,
|
|
"description": "This is a high-energy, distorted digital impact sound effect that works perfectly for a sudden reveal or a punchy transition in a fast-paced edit."
|
|
},
|
|
"glitch-2": {
|
|
"file": "glitch-2.mp3",
|
|
"duration": 3.5,
|
|
"description": "This is a harsh, distorted digital glitch effect with high energy that serves as a jarring transition or a chaotic digital reveal."
|
|
},
|
|
"glitch-3": {
|
|
"file": "glitch-3.mp3",
|
|
"duration": 3.1,
|
|
"description": "This is a low-energy, subtle electronic click sound effect that works well as a minimal audio transition or a UI element for a subtle selection reveal."
|
|
},
|
|
"impact-bass-1": {
|
|
"file": "impact-bass-1.mp3",
|
|
"duration": 2.12,
|
|
"description": "This is a medium-energy, sharp electronic chime that works perfectly as an accent for a quick transition or a brief, high-tech visual reveal."
|
|
},
|
|
"impact-bass-2": {
|
|
"file": "impact-bass-2.mp3",
|
|
"duration": 2.59,
|
|
"description": "This sound effect is a shimmering, ethereal synth riser with a medium energy level, perfect for creating anticipation before a magical transition or reveal."
|
|
},
|
|
"key-press": {
|
|
"file": "key-press.mp3",
|
|
"duration": 0.4,
|
|
"description": "This is a medium-energy, distorted digital impact sound effect that works well for a sudden glitch transition or a glitchy text reveal."
|
|
},
|
|
"notification": {
|
|
"file": "notification.mp3",
|
|
"duration": 2.46,
|
|
"description": "This is a medium-energy, whimsical digital transition sound effect that fits perfectly with a playful visual reveal or a cute UI interaction."
|
|
},
|
|
"ping": {
|
|
"file": "ping.mp3",
|
|
"duration": 1.32,
|
|
"description": "This is a medium-energy, sharp electronic impact sound that works perfectly for punchy transitions or highlighting key on-screen reveals."
|
|
},
|
|
"pop": {
|
|
"file": "pop.mp3",
|
|
"duration": 0.72,
|
|
"description": "This is a medium-energy, metallic clinking sound that works perfectly as an accent or a subtle impact for a precise visual reveal or UI element."
|
|
},
|
|
"riser": {
|
|
"file": "riser.mp3",
|
|
"duration": 10.03,
|
|
"description": "This is a high-energy cinematic air whoosh transition that builds tension before suddenly cutting, making it perfect for a dramatic scene change or a quick reveal."
|
|
},
|
|
"sparkle": {
|
|
"file": "sparkle.mp3",
|
|
"duration": 1.8,
|
|
"description": "This is a bright, high-energy \"whoosh\" transition sound with a fast, ascending pitch that is perfect for a rapid scene change or a quick reveal."
|
|
},
|
|
"typing": {
|
|
"file": "typing.mp3",
|
|
"duration": 1.5,
|
|
"description": "This is a hard, high-pitched \"ding\" sound that works well as an accent for a reveal or a quick transition."
|
|
},
|
|
"whoosh-cinematic": {
|
|
"file": "whoosh-cinematic.mp3",
|
|
"duration": 5.54,
|
|
"description": "This is a medium-energy, cinematic whoosh effect, ideal for smooth scene transitions or emphasizing a quick reveal."
|
|
},
|
|
"whoosh-short": {
|
|
"file": "whoosh-short.mp3",
|
|
"duration": 0.57,
|
|
"description": "This is a medium-energy, organic wooden texture sound effect that works well as a subtle transition or a background accent."
|
|
},
|
|
"whoosh": {
|
|
"file": "whoosh.mp3",
|
|
"duration": 0.57,
|
|
"description": "This is a hard, metallic impact sound effect that works well for a sudden reveal or a punchy transition."
|
|
}
|
|
}
|