Cinematic Hyperframes

Cinematic Hyperframes Motion

Use this skill to make Hyperframes videos feel like motion-led product films, not animated decks. Keep the product story readable, but make transitions, typography, UI actions, and payoff moments carry cinematic intent.

Load Order

1. Use /website-to-hyperframes or the Website-to-Video skill first when the work starts from a real website, product UI, or codebase. If that skill is unavailable, follow the same pipeline: capture/context -> DESIGN.md -> SCRIPT.md -> STORYBOARD.md -> narration plan -> compositions -> snapshots -> render.
2. Read references/hyperframes-catalog.md before choosing effects, blocks, components, or transitions.
3. Read .agents/skills/hyperframes-typography-animation/SKILL.md when the video has vertical text-led beats, hook cards, kinetic typography, cursor-like reveals, or word-by-word interstitials. Reuse its typography principles; do not force its short 5-scene template onto longer product films.

Prerequisites

Before rendering or installing catalog blocks, verify the local project has:

• Hyperframes plugin/skills installed when the environment supports it: codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets
• Node 22+ available for Hyperframes.
• FFmpeg and FFprobe available for render and metadata checks.
• A Hyperframes project with hyperframes.json.
• Local deterministic assets for all images, logos, fonts, audio, and mock data.
• GSAP or equivalent timeline control for motion-heavy scenes.
• No dependency on authenticated routes, live personal data, or unstable screenshot-only states.

Preferred setup:

npx hyperframes init <project-name>
npx hyperframes add <catalog-id>
npx hyperframes inspect
npx hyperframes validate

When starting a serious Website-to-Video project, read the current Hyperframes docs listed in references/hyperframes-catalog.md before capture or implementation.

Production Workflow

1. Capture source truth.

   • Inspect the real app code, design tokens, fonts, UI components, routes, responsive behavior, and copy.
   • Use screenshots only as reference. Rebuild animated, protected, or dynamic states as deterministic HTML/CSS/GSAP.
   • Replace real users, emails, addresses, payments, orders, and private data with realistic mock data.

2. Write the rhythm map before animating.

   • Mark calm beats, setup cards, product actions, transition beats, payoff beats, and outro.
   • Decide where music hits, click pulses, speed ramps, booms, silence, and success bursts should land.
   • Keep linear clarity when explaining a product, but avoid repetitive text -> visual -> text -> visual pacing.

3. Use narrative title cards as chapter beats.

   • Add short interstitials before section changes.
   • Use word-by-word, cursor, mask, punch, compression, snap, or scale reveals.
   • Remove template/internal labels such as "App Showcase", "3D Reveal", or "Feature Frame".

4. Make transitions explain transformation.

   • Pain -> product: rupture, assembly, reconstruction, or wipe.
   • Creation -> live state: click feedback, loading, shimmer, activation glow.
   • Browse -> buy: hover, pulse, click ring, speed ramp, directional pull.
   • Purchase -> success: burst, shockwave, confetti, scale, light impact.
   • Object -> ecosystem: logo floods, overflow grids, parallax, zoom, or dimensional collage.

5. Add dimensionality.

   • Use foreground/background layers, perspective, parallax, masks, z-depth, shadows, blur, and camera moves.
   • Avoid placing every UI panel on the same visual plane.
   • Let important objects feel revealed, assembled, activated, or accelerated.

6. Keep product UI credible.

   • Match real navigation states, buttons, prices, badges, avatars, empty states, mobile states, and final confirmation states.
   • Show cause and effect for UI actions. A click should visibly trigger the next frame.
   • For AI features, show before -> loading -> generated/enhanced result.

7. Design variants, not resizes.

   • Treat 16:9 and 9:16 as separate compositions when density changes.
   • Use mobile-native UI for vertical format when the real product behaves differently.
   • Check text fit, button hit indicators, centered halos, confetti accumulation, and opacity inheritance in each ratio.

8. Validate before claiming done.

   • Run Hyperframes inspect/validate/lint where available.
   • Snapshot key beats in every requested variant.
   • Render only the variants the user asks for.
   • Check duration, dimensions, frame rate, file size, and obvious visual artifacts with FFprobe and snapshots.

Motion Heuristics

• Calm before impact makes impact stronger.
• Clicks need visible cause and consequence.
• A generated feature should visibly transform, not just appear finished.
• Success frames should feel like payoff moments.
• Brand walls and conference walls should communicate abundance instantly.
• Text cards should feel like cinematic chapters, not subtitles.
• Background opacity should not dim foreground copy.
• Glow and pulse are accents, not art direction.

Hyperframes Composition Rules

• Use explicit data-start, data-duration, data-track-index, data-width, and data-height.
• Prefer catalog compositions for specialized motion, then customize them to the story.
• Register paused GSAP timelines so rendering is deterministic.
• Keep external assets local by render time.
• Mount catalog blocks as data-composition-src children when they stay modular.
• Inline catalog snippets only when the catalog marks them as components/snippets.
• When staticizing variants, regenerate only the requested variants.

Quality Bar

The final video should be clear enough to understand, dynamic enough to remember, premium enough to trust, and cinematic enough to create desire.