Why does my video look right in Remotion Studio but wrong in the rendered file?

Remotion renders React to video by screenshotting every frame independently, out of order and in parallel across workers. Anything that depends on wall-clock time, playback order or chance therefore behaves completely differently in a render than in a preview you watch at normal speed: CSS transitions never play, timer-driven motion freezes, and Math.random() scatters differently on every worker. There is no stack trace and no failing test, which is why the defect survives review.

Does it cost anything to try?

The prescan is free, needs no account and runs entirely in your browser. The two bundled examples replay a stored review at no charge, so you can see the full output shape before spending anything. The model review itself is metered and needs a signed-in account with a balance: a worst-case amount is reserved before the run and only what the run actually uses is charged.

What should I paste in?

Your Remotion source as you have it: the composition components, the root file, any helpers and remotion.config.ts. One file or several, each preceded by a comment marker naming the file. You can also drop or pick .tsx, .ts, .jsx and .js files, which are read locally in the browser, and nothing is uploaded until you run a review.

Does it change my code?

No. It only reads what you paste and reports back. Each finding carries a corrected TSX fragment you can copy, and the review exports as GitHub pull-request comments with suggestion blocks, a tickable action checklist, a findings CSV, Markdown or JSON. Applying any of it stays your decision.

Can I check my fixes without paying for a second review?

Yes. The prescan re-runs as you edit, and the strip above the run button counts which of the reviewed flags you have cleared, which are still open and which you have newly introduced. It also tells you how many findings it cannot mechanically check, because a finding about dead-tail duration or an unmemoized per-frame map was never a mechanical flag in the first place.

Where are my past reviews kept?

Signed in, every review is saved to your own SkillSafe account and appears on any device you sign in from, mirrored in the browser so the list paints instantly. Signed out, reviews stay in that one browser. Restoring a past review puts the code back in the form too, and says so plainly if the stored copy had to be truncated to fit.

Remotion Clinic — render-correctness review of your Remotion code

The Remotion code

Or pick files: they are read locally, nothing uploads until you run.

Target

Review emphasis

Context — Remotion version, where renders run, what looks wrong

The review

Executive summary

Assumptions & open questions

Inventory

Kind	Name	Defined in	Role

Findings

Each finding names the composition, component or config, the problem, what the rendered video does because of it and a concrete fix — with corrected TSX where it helps.

Prescan coverage

Quick wins

Focus areas

Area	Why	Related findings

Summary

Result

How it works

Nothing to hand? Load the — a CSS transition fade, confetti on a setInterval with Math.random() positions, unclamped interpolations, a raw <video> background and a <Composition> with no duration — or the , where the correct verdict is render-ready and the useful output is what to add next.

Paste the code — the prescan is free

No upload, no AI: the prescan reads your source in the browser and lists what it mechanically found. The composition and component inventory, then the flags — CSS transition/animation and Tailwind animate-* classes that never play in a render, setInterval/setTimeout/requestAnimationFrame motion, useState+useEffect animation, Math.random() and Date nondeterminism, interpolate() without clamping, frame math with no useVideoConfig(), raw <video>/<audio>/<img> tags, literal asset paths that should be staticFile(), assembled transform strings, and <Composition> tags missing duration or fps. Each group explains why it matters. This part costs nothing and happens while you type.

The AI reviews it — this is the metered part

A senior motion engineer's pass: a render-trustworthiness posture with the single most important change named, the inventory with each construct's role, and prioritized findings across render-correctness, timing, determinism, performance, structure and hygiene — each with the problem, what the rendered video actually does because of it, the fix and a corrected TSX fragment. Every prescan flag is confirmed or explicitly set aside. Findings may only cite compositions, components and props that actually appear in your code. Pricing is honest: a worst-case amount is reserved before the run and only what the run actually uses is charged — the meter next to the button shows both.

Fix, export, re-run

Every corrected snippet in one paste-ready block, the findings as GitHub PR review comments with ```suggestion fences you can apply from the review UI, a tickable action checklist for the ticket, the findings table as CSV, and Markdown or JSON export of the whole review. Then start fixing: the prescan re-runs as you edit and the strip above the run button counts the flags you have cleared, the ones still open and any you have just introduced — in the browser, for free, before you pay for a second review. Reviews are saved to your SkillSafe account when you are signed in, so they follow you to another machine; restore puts the code back in the form too.

Derived from the @remotion-dev/remotion skill — the official Remotion agent skills from remotion.dev.

Questions

Why does my video look right in Remotion Studio but wrong in the rendered file?: Remotion renders React to video by screenshotting every frame independently, out of order and in parallel across workers. Anything that depends on wall-clock time, playback order or chance therefore behaves completely differently in a render than in a preview you watch at normal speed: CSS transitions never play, timer-driven motion freezes, and Math.random() scatters differently on every worker. There is no stack trace and no failing test, which is why the defect survives review.
Does it cost anything to try?: The prescan is free, needs no account and runs entirely in your browser. The two bundled examples replay a stored review at no charge, so you can see the full output shape before spending anything. The model review itself is metered and needs a signed-in account with a balance: a worst-case amount is reserved before the run and only what the run actually uses is charged.
What should I paste in?: Your Remotion source as you have it: the composition components, the root file, any helpers and remotion.config.ts. One file or several, each preceded by a comment marker naming the file. You can also drop or pick .tsx, .ts, .jsx and .js files, which are read locally in the browser, and nothing is uploaded until you run a review.
Does it change my code?: No. It only reads what you paste and reports back. Each finding carries a corrected TSX fragment you can copy, and the review exports as GitHub pull-request comments with suggestion blocks, a tickable action checklist, a findings CSV, Markdown or JSON. Applying any of it stays your decision.
Can I check my fixes without paying for a second review?: Yes. The prescan re-runs as you edit, and the strip above the run button counts which of the reviewed flags you have cleared, which are still open and which you have newly introduced. It also tells you how many findings it cannot mechanically check, because a finding about dead-tail duration or an unmemoized per-frame map was never a mechanical flag in the first place.
Where are my past reviews kept?: Signed in, every review is saved to your own SkillSafe account and appears on any device you sign in from, mirrored in the browser so the list paints instantly. Signed out, reviews stay in that one browser. Restoring a past review puts the code back in the form too, and says so plainly if the stored copy had to be truncated to fit.