---
name: remotion-social-clips
description: Build short-form programmatic videos (product demos, explainers, reels, announcement clips) with Remotion, React components rendered to MP4. Use when the user wants a demo video, animated explainer, LinkedIn or Instagram video, promo clip, or motion graphics. Not for editing recorded talking clips into a captioned vertical video: use tiktok-forge. Not for static graphics: use viral-asset-templates.
license: MIT
metadata:
  author: TechTide AI (Alex Cinovoj)
  provenance: original
  category: Design & Motion
---

# 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

| Platform | Aspect | Resolution | Duration |
|---|---|---|---|
| LinkedIn feed | 1:1 | 1080x1080 | 30-60s |
| LinkedIn feed (max real estate) | 4:5 | 1080x1350 | 30-60s |
| Stories / Reels | 9:16 | 1080x1920 | 15-30s |
| YouTube / embed | 16:9 | 1920x1080 | 60-180s |
| X / Twitter | 16:9 | 1280x720 | 15-45s |

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