Video generation (Remotion)

Remotion (React + TypeScript) is the stack for videos that live in a repo: README heroes, landing demos, case-study clips, thread dramatizations. assets/video-source/ in desplega-ai/agent-swarm is the reference implementation; read it before starting a new project.

Golden rules

1. Remotion for repo-committed video. npx remotion studio for previews, remotion render for mp4s. For a one-off design-led cut with no repo, use open-prompt-showreel instead.
2. Ask for audio, don't pick it. Music is a brand call. A person on the team chooses the track (CC0 or CC BY 4.0, for example from https://freesound.org). Never grab something yourself; ask. There is no default bed.
3. Attribute in the video folder's README. Artist name, source URL, license. Not in the repo root README; in the video project's own README.
4. Design tokens mirror the product. Pull colors and fonts from the product's own globals.css (Agent Swarm: Space Grotesk + Space Mono, zinc dark palette, amber #f2a93b accent). Do not invent new ones.
5. Honest read pacing. The first draft always over-packs the opening and under-weights the payoff. Compress setup scenes, expand the one that carries the message. See "Pacing" below.
6. One Remotion project, many compositions. Do not spin up a new repo per video. Register additional <Composition> entries in src/Root.tsx and add a build:<slug> script.

Project layout