Build the product's video design system first: Motion guide for coding agents

A good product demo should feel like the product in motion. Do not pick a fresh visual style for the film.

Start from the product

Read the product's semantic color, type, radius, spacing, icon and surface tokens. Use extract-design-system or extract-from-url when the tokens are not already available
Read the product's value proposition and real interface copy before writing the running order
Use real product UI or a faithful product surface. The interface is the evidence, not decoration behind a headline
Record the logo, product name, destination and every factual claim before animation starts

The film needs more than a palette. Define these groups in one manifest:

Visual: stage, foreground, muted text, surface, border, accent, elevation, type roles and safe area
Motion: fast, normal and slow durations; stagger steps; entry, exit and movement curves; settle and emphasis springs; short and long travel distances
Camera: subtle push, normal push, pan speed, perspective and focus-pull strength
Transitions: one neutral cut, one move for going deeper and one higher-energy move. More choices weaken the language
Format: landscape, vertical, square and portrait dimensions, safe areas, type scale and caption region
Sound: tempo, beat length, cue density and gain. Silence remains a valid system

Choose one motion temperament and keep it:

Calm: soft ease-out, small travel, long holds, almost no overshoot
Direct: short ease-out, crisp cuts, little blur, no bounce
Expressive: faster stagger, selective spring, larger emphasis moves
Technical: precise linear phases for progress, crisp easing for UI and restrained camera motion

Foundations: theme, format, safe frame, auto-fit text, camera, audio and captions
Product primitives: browser/device frame, cursor path, click, typed input, scroll, callout, metric and attribution
Scenes: hook, product reveal, interaction, feature moment, proof and CTA
Recipes: product demo, feature announcement, changelog, tutorial, social clip, data story and logo bumper

Use a recipe before choosing individual effects. A list of components is not a story.

Put public content and brand inputs in a Zod composition schema
Follow the current /remotion-interactivity skill when the user should edit layers, keyframes or styles in Studio
Keep format and timing in shared manifests. Do not repeat durations across the composition, captions and audio scripts
Copy source into the project when the user must own and change it. Record where every copied component came from

One argument per film and one focal point per beat
The product stays large enough to read
Motion has a job: orient, direct, explain or express character
Every entry lands, holds and leaves before the scene ends
The same brief reflows instead of shrinking when the aspect ratio changes
No invented proof, feature-list montage, tiny UI, generic glow halo, gradient-text filler or purposeless particles