Confirm the route before you build. This is the fallback for custom composition authoring. If the input clearly fits a specialized workflow, prefer it: marketed product →

/product-launch-video

; general site →

/website-to-video

; topic explainer →

/faceless-explainer

; GitHub PR →

/pr-to-video

; existing footage →

/embedded-captions

·

/graphic-overlays

; short unnarrated motion graphic →

/motion-graphics

; Remotion port →

/remotion-to-hyperframes

. Out of scope: live / at-render-time data, NLE-style editing of a finished video, or producing footage HyperFrames can't capture. Unsure? Read

/hyperframes-read-first

first.

• Audience — who watches? developers / executives / general consumers?
• Platform — where does it play? social (15s) / website hero / product demo / internal?
• Priority — what matters most? motion quality / content accuracy / brand fidelity / speed?
• Variations — one best shot, or 2-3 meaningfully different options (different pacing, energy, or structure — not just color swaps)?

1. What — the viewer experience: narrative arc, key moments, emotional beats.
2. Structure — how many compositions, sub-comp vs inline, which tracks carry video / audio / overlays / captions. For the monolithic-single-file vs modular-sub-comp call, see

   hyperframes-core/references/composition-patterns.md

   § Two Architectures (rule of thumb: ≥3 hard scene cuts, or any reused scene → modularize; a short single-scene piece stays one file).
3. Rhythm — name the pattern before implementing (e.g.

   fast-fast-SLOW-SHADER-hold

   ); see

   hyperframes-creative/references/beat-direction.md

   .
4. Timing — which clips drive duration, where transitions land, the pacing.
5. Layout — build the end state first (see below).
6. Animate — then add motion via

   hyperframes-animation

   .

1. Identify the hero frame for each scene — the moment the most elements are simultaneously visible. That is the layout you build.
2. Write static CSS for that frame. The content container must fill the scene with padding, not absolute offsets:

.scene-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 120px 160px; /* padding positions content; fills any scene size */
  gap: 24px;
  box-sizing: border-box;
}

position: absolute; top: Npx

⚠ The

width/height: 100%

above only resolves if every ancestor has a resolved height. The root

<div data-composition-id>

and any wrapper between it and

.scene-content

must be sized (

position: relative; width: 1920px; height: 1080px

on the root — see

hyperframes-core

→ "Root must be sized"). Skip this and the flex container collapses to ~0, content piles into the top-left corner, and the first glyph clips at x=0 — while

lint

/

inspect

still report 0 issues. And always keep the

padding

(≥80px) on

.scene-content

: it is the title-safe margin. Never replace it with bare

gap

.

1. Add entrances — animate FROM offscreen/invisible TO the CSS position with

   gsap.from()

   (in sub-compositions prefer

   gsap.fromTo()

   so the start state is explicit; see

   hyperframes-core/references/sub-compositions.md

   ). The CSS position is ground truth; the tween is the journey to it.
2. Exits are transition-handled — per the scene-transition rules in

   hyperframes-animation/transitions/

   , only the final scene animates elements out; between scenes the transition IS the exit.

• npx hyperframes lint

  and

  npx hyperframes validate

  pass (block on results)
• design adherence verified if a spec (

  frame.md

  /

  design.md

  ) exists — checklist in

  hyperframes-creative/references/design-adherence.md

• npx hyperframes inspect

  passes, or every overflow is intentionally marked
• contrast warnings addressed; for multi-scene work, review the animation map (

  hyperframes-animation/scripts/animation-map.mjs

  )
• deliver the preview; render to MP4 only on explicit request
• surface the preview only at handoff (it is the stable, final preview); don't pop one mid-build — build-phase snapshots are headless

• A specific product / company / SaaS / website being marketed, launched, or promoted →

  /product-launch-video

• A concept / topic / article / how-X-works being explained, no product →

  /faceless-explainer

• A GitHub PR / code change →

  /pr-to-video

• An existing talking-head video to add captions to →

  /embedded-captions

• Porting an existing Remotion composition →

  /remotion-to-hyperframes

• Cutting / editing a finished video file like an NLE → out of scope (HyperFrames composites HTML and media into a deterministic timeline; it does not edit footage)