demo-studio

DemoStudio — the playbook

You are building a premium product-demo motion-graphics film: one seamless timeline of full-screen scenes telling the USER'S story (pick an arc that fits their product, e.g. problem → product → payoff, before → after, or many inputs → one output; do not default to a feedback-capture loop), with camera moves between beats. The whole video is ONE self-contained HyperFrames composition (index.html = HTML + CSS + GSAP) that renders to MP4, then a single SFX track is muxed on.

Start from the example: example/index.html is a compact, commented, working scaffold that shows the whole architecture (paused timeline, 3 scenes, a camera push, a flood, an endcard). Read it first, then grow it into the real thing scene by scene.

0. When to use / not use

• Use for animated product demos, launch/hype videos, feature stories, flywheel/loop narratives. Any "show the product doing something, beautifully, scene by scene" film.
• Not for: single-concept explainer reels (one scene per spoken beat), talking-head/CapCut edits, or avatar/TTS videos. Different tools entirely.

1. Architecture (always the same)

• One paused timeline: const tl = gsap.timeline({paused:true}); register it on window.__timelines["main"] = tl. HyperFrames seeks it per frame.
• Scenes = absolutely-positioned full-frame <div>s inside #stage, overlapping in the DOM; faded in/out by the timeline. Only the active one is visible at a given time.
• Schedule by ABSOLUTE time — the last arg of every tl.* call is the start time in seconds. Anchor scene offsets with named consts (e.g. S1, S2, END) so changing one shifts the rest. A DUR const + the data-duration attrs (root, bg, stage) must all match the total length.
• Deterministic only: no Math.random() / Date.now() / argless new Date() — they break the frame-seeked render. Use a seeded PRNG (see the mul()/rnd() helpers in the example).
• Build loop:

  npx hyperframes lint                       # 0 errors required
  npx hyperframes render --output out/raw.mp4 -q high
  ffmpeg -i out/raw.mp4 -c:v libx264 -pix_fmt yuv420p -g 30 -keyint_min 30 \
    -sc_threshold 0 -r 30 -crf 17 -movflags +faststart out/vNN.mp4     # ALWAYS re-encode
  ffmpeg -ss <t> -i out/vNN.mp4 -frames:v 1 /tmp/f.png                  # verify by viewing frames
  

• gsap defaults: gsap.defaults({ease:"power3.out", duration:0.6}). Register MotionPathPlugin if used.