remotion-social-clips

Remotion Social Clips

Remotion renders React components to MP4. Treat the video like a codebase: brand tokens in one file, type scale in one file, animation helpers reused across scenes. Load the user's brand system before writing a single frame.

Aspect ratio presets

Workflow

1. Confirm platform, duration target, and message. Pick the preset above.
2. Set up the project. Write package.json by hand (the interactive CLI hangs in non-TTY environments): dependencies remotion, @remotion/cli, react, react-dom, plus TypeScript dev deps. Then npm install.
3. Create src/brand.ts with the user's brand tokens (colors, gradients, fonts) and src/styles.ts with the type scale. Never set font sizes inline per scene. If the user has a brand system skill or kit, load it now; otherwise ask for primary color, accent, and font before proceeding.
4. Pick a template structure and write the scene timeline. Read references/templates.md for the four proven structures (product demo, quick tip/stat, before/after, announcement) with second-by-second beats and animation guidance.
5. Build scenes using the shared animation helpers. Read references/animation-patterns.md for safe interpolation, standard entrances, and the type scale contract.
6. Add captions. Burned in, 28px minimum, semi-transparent dark background, bottom center 60px up, synced word-by-word or phrase-by-phrase. No audio: key messages readable 2+ seconds each.
7. Render: npx remotion render src/index.ts <CompositionId> out/<name>.mp4 --codec h264 --crf 18 --fps 30.
8. Watch the output before delivering.

Non-negotiables

• First 3 seconds hook: show the output, not the setup.
• Brand colors only. A rogue hex is a bug.
• CTA on screen 3+ seconds, logo resolve at the end.
• Background music low-key and quiet; ducck under narration.

Verification

Run the render, then check ffprobe out/<name>.mp4. Expect the exact target resolution, 30fps, h264, yuv420p, and duration within 1s of plan. Then scrub the video at 0s, each scene boundary, and the CTA. If any scene shows a flash, overlap, or missing element, fix the timeline math and re-render. Never deliver an unwatched render.

Completion checklist

• [ ] Brand tokens and type scale defined once, no inline font sizes
• [ ] Hook lands inside 3 seconds
• [ ] Captions present, 28px+, readable against footage
• [ ] Interpolation ranges monotonic (no strictly-monotonic crash risk)
• [ ] CTA held 3+ seconds, logo resolve present
• [ ] ffprobe matches target spec, full video watched
• [ ] File size sane for platform (aim under 50MB)

Any box unchecked: not done. Fix or say so.

Good vs bad

• Bad opening: 4 seconds of logo animation, then "Let me show you our product."
• Good opening: the finished result on screen at frame 0 with a claim ("This post was written by an AI trained on 200 of yours"), logo saved for the resolve.

Footguns

• Remotion throws on non-monotonic interpolation input ranges. Short scenes plus fixed 10-frame buffers collide. Clamp buffers to duration/3 (see references/animation-patterns.md, safeFade).
• create-remotion interactive prompts hang headless shells. Write package.json manually.
• Fonts referenced but not loaded render as system fallback in the render server only, so previews lie. Load fonts explicitly and check the rendered MP4.
• Forgetting yuv420p pixel format produces videos some platforms silently refuse to autoplay. The default h264 render is fine; do not override pixel format.