Quick start

From clone to rendered video in under five minutes. One repo, no extra services. (The overlay-motion npm package is coming; today the repo is the distribution.)

1. Install and explore

git clone <this-repo> && cd overlay-motion
npm install
npm run dev        # the site: template gallery, examples, docs
npm run studio     # Remotion Studio: every template as a composition

The gallery at http://localhost:5199 shows all templates with live players. Every template detail page displays the exact JSON spec that renders the preview, ready to copy.

2. Write a spec

An edit is one JSON document. Start from any template's "copy spec" button, or from scratch:

{
  "version": 1,
  "format": "vertical",
  "fps": 30,
  "durationSec": 8,
  "source": { "type": "none" },
  "overlays": [
    {
      "template": "hero-title",
      "region": "center",
      "time": { "start": "0.5s", "appear": 1, "hold": 6 },
      "props": { "title": "Ship it", "subtitle": "The overlay system for agents" }
    }
  ]
}

For an agent editing real footage, start with the Editing agent playbook: analyze the source, preserve protected subjects, record assumptions and validate inexpensive checkpoints. The full rendering grammar is Edit Spec v1.

3. Preview it

Open Remotion Studio (npm run studio): every template is a composition, and the custom composition previews any spec you paste into its defaultProps.

4. Render it

Every template is a composition in remotion/index.ts; the custom composition renders whatever spec you pass:

npx remotion render remotion/index.ts hero-title out/hero.mp4
npx remotion render remotion/index.ts custom out/edit.mp4 \
  --props='{"spec": <your-spec>, "theme": <your-theme>}'

--props accepts a file path too: --props=./my-edit.json.

5. Brand it

Pass any BrandTheme as theme: colors, fonts, radius, and glass/solid surface. Same spec, another theme, rebranded video. Presets live in src/theme/themes.tsx; the site's theme picker shows them all.