motion-video

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.)