/making-remotion-videos

name: making-remotion-videos
description: "Make an MP4 from React components with Remotion, rendered headlessly in this container. Covers project scaffolding with pinned versions, the frame-pure composition contract, the still-frame review loop, rendering with the preinstalled Chromium, and the product demo reel - an app shown inside a phone frame, built from Playwright captures of the real UI. Use for 'Remotion', 'make a video in React', 'demo reel', 'promo video for my app', 'app preview video', 'product video', 'phone mockup video', 'vertical video for social', 'Instagram reel', 'TikTok-format video', 'animated explainer with text and screenshots', or any motion graphics job built from layout, type and UI captures."
metadata:
  version: 0.2.5

Making videos with Remotion

Remotion renders a React component once per frame in headless Chromium and encodes the frames with ffmpeg. The DOM and CSS are the drawing API, so type, layout, screenshots and UI mockups come out sharp and on-brand with little code. Each frame is a pure function of `useCurrentFrame()`.

Before building, name the route and why (Oskar's standing steer, memory 06886186). Remotion fits when the video is mostly type, layout, product UI and 2D motion. It is not the cheapest route for particle fields or generative art.

When NOT to use this skill

| Situation | Use instead | |---|---| | Hand-drawn character animation, p5.js, painterly frames | `animating-with-code` | | AI-generated footage (Veo, Gemini video) | `creating-video` | | Trim, transcode, concatenate or caption existing footage | `processing-video` | | A comic or storyboard drawn from existing footage | `drawing-video` | | A looping in-page animation the user views in a browser | an HTML artifact; no render needed |

Abandon Remotion mid-run when a frame takes more than about 5 s to render after the bundle is built. That points to heavy WebGL or canvas work, which a pre-rendered frame sequence or a native ffmpeg/numpy route does better.

Procedure

1. **Scaffold** with pinned versions (all `@remotion/*` packages at one exact version, at least two weeks old):

   bash /mnt/skills/user/making-remotion-videos/scripts/scaffold.sh /path/to/project

It writes `package.json`, `tsconfig.json`, `src/index.ts`, a hello `Root.tsx`, copies the phone and scroll components into `src/`, and runs `npm install` (about 40 s). 2. **Vendor the fonts.** Never use `@remotion/google-fonts` here: see failure modes below.

   cd /path/to/project
   python3 /mnt/skills/user/making-remotion-videos/scripts/vendor_fonts.py "Instrument Serif:ital@0;1" "DM Sans:wght@400;700"

Paste the printed `loadFont()` calls into a `theme.ts` that every scene imports. 3. **Prove the toolchain** before writing scenes:

   bash /mnt/skills/user/making-remotion-videos/scripts/render.sh still Main out/probe.png 45

4. **Storyboard in writing.** List the scenes with frame durations and one *read* each: the single thing the viewer must take away. A caption needs about 1.5 s plus 0.3 s per word on screen. Put durations in a data array and derive the total from it. Never hand-sum frame counts. 5. **Build scenes** under the contract below. Sequence them with `TransitionSeries` from `@remotion/transitions`. Each transition overlaps its neighbours, so the total is the sum of durations minus the transition lengths. Compute that in code and export it to `<Composition>`. 6. **Review loop with stills.** Render one still per read (the frame where it should be fully legible) and tile them into a contact sheet. Look at it before rendering any video.

   for f in 40 100 260 530; do bash .../render.sh still Main out/s$f.png $f; done
   montage out/s*.png -tile 4x1 -geometry 360x640+6+6 out/sheet.png

Fix layout collisions, illegible type and dead frames here: a still costs about 3 s and a full render minutes. 7. **Render** the video in the background if it will outlive the turn (the hub's long-job rule):

   bash .../render.sh video Main out/reel.mp4

8. **Verify** (next section), then deliver. Keep sources and captures in git and the MP4 out of git unless it is small. Upload large renders to R2 or a release.

The composition contract

• Every visual value derives from `useCurrentFrame()` through `interpolate`,

`spring` or plain arithmetic. No `useState` timers, no `setTimeout`, no CSS `animation`/`transition`. Remotion seeks frames in any order across parallel tabs, so a CSS animation renders as a random phase or not at all.

• Randomness comes from `random(seed)` in `remotion`, never `Math.random()`.
• Assets load through `staticFile()` from `public/` with `<Img>`, `<Video>`

(`@remotion/media`) or `<Audio>`. These hold the frame until loaded. A plain `<img>` does not, and the frame renders blank.

• Async data (fetch, fonts outside `@remotion/fonts`) wraps in

`delayRender()` / `continueRender()`, or goes through `calculateMetadata`.

• Pass `extrapolateLeft/Right: "clamp"` to every `interpolate` that should hold

its end value. The default extrapolates, so a fade continues past 0 and 1.

• Keep the canvas at the delivery size (1080×1920 for vertical, 1920×1080 for

landscape) and design in those pixels. Scaling a smaller composition up softens type.

Product demo reels

For a reel of a real web app inside a phone, follow [references/product-reel.md](references/product-reel.md). It covers capturing the live UI at phone size with Playwright, stepping live animations frame by frame with Playwright's fake clock, the phone frame, sticky headers, tap indicators and the timeline the aeyu.io reel used.

Narration

Mix the voiceover outside Remotion into one WAV the length of the composition. Put each line at its slot start, apply linear gain only (peaks at about −2 dBFS; never `loudnorm`, see below), and play it with `<Html5Audio src={staticFile(vo)} />` at the