Video Motion

Use code-motion recipes for creative short-form work and reel choreography for pacing. Use Remotion frame time as the clock. Compose HTML/CSS/SVG, images, footage, Canvas and shader passes in a normal editable TSX project created with CLI init.

The original helpers in motion/index.tsx are copied into the project's lib/ directory. They provide frame math, seeded values, split type, depth planes, masks, a refractive/displacement pass and temporal blur. They are composable mechanisms: author new geometry, layout and transitions rather than arranging them as a recurring heading/motif/body template. useGsapTimeline supports complex DOM/SVG choreography; numeric shader values come directly from frames.

Use the version-2 contract and a frame-based score shared by components and review. Make movement carry a focal subject across shots. Use actual screenshots/data/code for proof. Check assets at the largest intended magnification; protect essential copy without constraining all artwork to a narrow safe box.

Render moving drafts with preview, then final media with run. Inspect peak velocity, optical distortion, type edges, transition continuity, caption placement and the encoded result. Apply blur selectively; keep critical evidence and captions sharp. Time-varying simulation state must be baked or deterministically replayed for out-of-order frame rendering.

Legacy workflows describe existing structured scenes. Cinematography covers layered camera design and optional mesh worlds. Existing Reel, PopReel and World scenes remain usable examples; their layouts and model vocabulary do not define the creative scope.