/motion-video

name: motion-video
description: Build a marketing or explainer video that is mostly RENDERED scenes - motion graphics, mocked or rebuilt product UI, data-driven animated charts, brand-matched title design - authored in Remotion and stitched around one real product-capture beat. Use whenever the user wants a marketing video, a brand film, a launch or website hero video, an animated explainer, motion graphics, a video with mocked/idealised UI or animated charts, or says "build the video in Remotion", or needs one film cut to the aspect ratios and UI safe zones each platform wants (Instagram Reels, TikTok, YouTube Shorts, 4:5 feed) for paid ads or organic posts. This is the marketing branch's build engine, the counterpart to demo-video (which films the REAL product to prove it). Not for - a screen recording or product walkthrough of the real app (demo-video), a pitch deck (pitch-deck), a live pitch or its script (pitch-package, pitch-craft), or editing footage that already exists.

Motion video - render the story, prove it once

A demo-video films the real product to **prove** it. A motion video **renders** the story to **sell or explain** it. The mix is the opposite: a marketing film is mostly rendered scenes with **one** real capture stitched in as proof. Get that inversion wrong and you have either a screen-recording that bores or a cartoon that convinces no one.

The contract

Four rules. They are the ones an agent under time pressure abandons first, which is why they are not optional. Repeat the bolded phrase in your reasoning as you work; it is the behaviour.

1. **Wrapper, not proof.** Rendered and mocked scenes are the WRAPPER; the real capture is the PROOF. Never pass a rendered UI off as a live screen recording. When a figure is illustrative, say so on screen. This is `demo-video`'s "annotate never substitute" ethic moved up one level: mocks are legitimate in the wrapper, banned inside the proof beat.

**A screenshot with a camera move is NOT the proof beat.** This is the failure this rule exists to catch, and it is seductive because PageCam over a still looks expensive. It is still a photograph. A film built entirely of glides over stills feels dead on the first watch and the client says so: nothing is ever being USED. The proof beat must contain MOTION THE PRODUCT MADE

• a cursor travelling, characters landing one at a time, a list re-filtering as the query lands,

a page actually loading. If no scene in the storyboard has that, the film has no proof layer, whatever the screenshots look like. Verify it by asking of each beat: could this frame have come from a PNG? If yes for every beat, go back to step 4.

2. **Frame-clock, not wall-clock.** Every animation is driven by Remotion's `useCurrentFrame()`. `framer-motion`, CSS transitions, `requestAnimationFrame`, `setTimeout`, `Date.now()` all render FROZEN, because Remotion seeks a synthetic clock frame by frame. This is the single biggest surprise; internalise it before you write a scene. (`references/remotion.md`.)

3. **Brand-match verbatim.** Pull the real font, logo mark, wordmark, and palette from the product's OWN repo and use them exactly. An approximated brand reads as fake and undoes the film. (`references/brand-match.md`.)

4. **Figures reconcile.** A mocked ledger still balances; a mocked chart's bars still sum to its headline. No fabricated numbers, no prices the brand keeps private, no success rates or compliance claims, and nothing that reveals HOW a sensitive capability works if the brand does not want it shown. Marketing gets a warmer voice, never a pass on truth.

Steps

0. Preflight

Node + `ffmpeg` present. Locate the product's repo (you need its real brand assets) and confirm it runs with demo data (you need one real beat). Remotion is free for teams of 3 or fewer; 4+ needs a paid licence - flag it before promising a Remotion build.

1. Storyboard - GATE, same as demo-video

With the storyboard, ask the purpose and guardrail questions in `demo-video/references/distribution.md`: audience, any third-party logo or name in the frame, generic or personalised disclaimer card, persistent "Demo purposes only" label, rights line and company mark, and where the film may live. Optional guardrails, mandatory questions; the answers decide what is burned into every scene. One row per scene: `scene | shows | real or rendered | motion | narration | dur`. Mark every scene real or rendered, and name the ONE real proof beat. **Show it and stop** until the user approves. This is the cheapest point to change the film; after scenes are rendered every edit re-renders and re-times. (Storyboard format: `demo-video/references/storyboard.md`, adapted - the "proof" column becomes "real or rendered".) Settle the voice, music, closing and rights questions at the same gate (`demo-video/references/structure.md`): a marketing film nearly always has a bed, and the music's rights are checked before a scene is built around its pulse.

1.5 Target formats - GATE with the storyboard

A film rarely ships as one file: the same story goes to 16:9 YouTube, 9:16 TikTok/Reels/Shorts, and 4:5 feed. Ask which platforms and placements it ships to (a multi-select), collapse them to the minimal master-ratio set - almost always a subset of {9:16, 16:9, 4:5, 1:1} - and note each one's UI safe zone. Two rules the agent under pressure breaks: **reframe, never crop the extremes** (16:9 to 9:16 discards ~56% of the frame and must be re-authored, not cropped), and **compose inside the safe box** (keep every title and logo clear of the caption bar, action rail, and CTA button the platform paints over the video). Decide this BEFORE building scenes - it sets how each scene lays out in vertical vs landscape. Remotion makes the cut cheap: one component set renders at any width/height via `useVideoConfig()`. (`references/platform-formats.md`.)

2. Brand-match

Find the real font (next/font