| name | remotion-video |
| description | Guides Remotion video development in React, including compositions, animations, timing, audio, captions, and rendering. Use when the user works with Remotion, writes <Composition>/<Sequence>/interpolate/spring, edits remotion.config.ts, renders or deploys Lambda videos, or asks about video creation in React. |
| license | MIT |
| metadata | {"tags":"remotion, video, react, animation, composition, lambda, render, player"} |
When to use
Load this skill whenever you read or write Remotion code, from scaffolding a project to rendering the final video.
Common AI mistakes to avoid
Check every Remotion code change against these recurring failure modes before committing:
- Non-deterministic randomness — use
random(seed) from remotion, never Math.random(), Date.now(), or new Date(). Parallel renders produce flickering noise otherwise.
- Unmemoised
<Player> inputProps — always pass memoised props; unmemoised props cause re-render storms through the whole tree.
- Missing
delayRender() / continueRender() around async work (fetch, font load, measurement). Without them the render hangs at 30 000 ms.
- Non-monotonic
inputRange on captions — interpolate's inputRange must strictly increase. For short clips use Math.min(10, Math.floor(duration / 3)) for the fade window.
- Linear easing everywhere — prefer
spring() for natural motion; use linear only for explicit technical needs.
- Forgotten
@remotion/google-fonts imports — every font needs an explicit loadFont({ weights, subsets }) call.
- Monolithic single-composition output — break scenes into small focused compositions and compose with
<Sequence> or <TransitionSeries>.
- Deprecated
startFrom / endAt — use trimBefore / trimAfter instead.
New project setup
When in an empty folder or workspace with no existing Remotion project, scaffold one using:
npx create-video@latest --yes --blank --no-tailwind my-video
Replace my-video with a suitable project name.
Starting preview
Start the Remotion Studio to preview a video:
npx remotion studio
Optional: one-frame render check
You can render a single frame with the CLI to sanity-check layout, colours, or timing.
Skip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.
npx remotion still [composition-id] --scale=0.25 --frame=30
At 30 fps, --frame=30 is the one-second mark (--frame is zero-based).
Rule index
Read individual rule files for detailed explanations and code examples.
Core
- core/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
- core/sequencing.md - Sequencing patterns - delay, trim, limit duration of items
- core/timing.md - Timing with interpolate, Bezier easing, and springs
- core/animations.md - Fundamental animation skills
- core/trimming.md - Trim the beginning or end of animations
- core/parameters.md - Make a video parametrisable with a Zod schema
- core/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
- core/primitives.md - Layout and timing primitives: Loop, Freeze, Series, Null, IFrame, AnimatedImage, premount
Media
Audio
Text
Advanced
Utilities
Production
- production/delay-render.md - Suspend rendering during async work: delayRender, continueRender, cancelRender
- production/determinism.md - Deterministic renders with random(seed); never Math.random / Date.now
- production/rendering.md - @remotion/renderer Node SSR: bundle, selectComposition, renderMedia
- production/cli.md - npx remotion subcommands and flags (render, still, bundle, studio, benchmark)
- production/config.md - remotion.config.ts Config setters (codec, CRF, concurrency, Webpack)
- production/lambda.md - AWS Lambda: deployFunction, deploySite, renderMediaOnLambda, cost tuning
- production/player.md - @remotion/player embedding, PlayerRef, memoised inputProps, buffer events
- production/video-tag-decision.md - Choose between Video / OffthreadVideo / Html5Video / @remotion/media
- production/input-props.md - Prop resolution order, Zod validation, --props CLI flags, render-boundary security
- production/caption-timing-safety.md - Monotonic inputRange and adaptive fade window for captions
- production/performance.md - Hardware acceleration, concurrency, image format, GPU precompute, benchmarking
- production/env-vars.md - REMOTION_ prefix, .env loading, secrets via inputProps / envVariables
Integration
Packages
