Remotion — code-driven video with Claude Code

Remotion has a specific mental model — everything is a function of useCurrentFrame(), assets must be loaded a certain way to avoid flicker, and durations live in frames, not seconds. Out of the box an agent will get some of this wrong. The remotion-dev/skills package ships a remotion-best-practices skill: a core SKILL.md plus a rules/ library of ~40 focused topic files. Claude loads the relevant rule on demand, so the code it writes matches how Remotion is actually meant to be used.

1. 1

   Install it with the skills CLI

   From your project root, add the skill straight from GitHub:

   bashCopy

   npx skills add remotion-dev/skills

   It installs the remotion-best-practices skill (with its rules/ library) and records it in skills-lock.json so the version is pinned.
2. 2

   Reload — then it runs itself

   The skill description is “Best practices for Remotion — Video creation in React.” Claude pulls it in automatically the moment you touch Remotion code, and reaches into the rules/ files (transitions, captions, audio, 3D, Tailwind, maps…) as the task calls for them. You don't invoke it by hand.

The skill scaffolds new projects with the blank template — the same command you can run yourself:

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i

Prefer to pick from the template gallery (Hello World, Tailwind, audiogram, etc.)? Run npx create-video@latest with no flags for the interactive picker. Either way you get a small, familiar layout:

A composition is just a React component registered with its metadata — id, fps, dimensions, and length in frames:

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={100}
      fps={30}
      width={1080}
      height={1080}
    />
  );
};

With the skill loaded, describe the video and let the agent write the components. Because it knows the frame model, it reaches for the right primitives — useCurrentFrame, useVideoConfig, interpolate, spring, Sequence, and AbsoluteFill — instead of CSS animations that won't render deterministically.

Build a 6-second 1080x1080 intro: our logo springs in,
the tagline fades up under it, then a subtle gradient sweep.
Register it as a composition and show me it in Studio.

Every animation is a pure function of the current frame — this is the shape all Remotion code takes:

import { useCurrentFrame, useVideoConfig, interpolate, Easing } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

Studio is the visual editor: scrub the timeline frame by frame, tweak input props live, and check timing before you commit to a render.

npm run dev        # = remotion studio, on http://localhost:3000

When it looks right, render it. The CLI bundles the project, runs it through headless Chrome, and encodes with FFmpeg:

npx remotion render                       # renders the default composition to out/
npx remotion render MyComposition out/video.mp4   # a specific comp to a path
npx remotion still MyComposition out/frame.png    # a single frame as an image

For an automated pipeline, render from Node instead of the CLI with @remotion/renderer — bundle once, then render as many parametrized videos as you like:

import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import path from "path";

const serveUrl = await bundle({ entryPoint: path.resolve("./src/index.ts") });
const inputProps = { title: "Launch day" };

const composition = await selectComposition({
  serveUrl,
  id: "MyComposition",
  inputProps,
});

await renderMedia({
  composition,
  serveUrl,
  codec: "h264",
  outputLocation: "out/MyComposition.mp4",
  inputProps,
});

The skill's power is its rules/ folder — one focused file per topic, pulled in only when relevant. A sample of what ships:

npx remotion add @remotion/three       # 3D scenes
npx remotion add @remotion/captions    # subtitles
npx remotion add @remotion/transitions # scene transitions

• github.com/remotion-dev/skills — the skill, SKILL.md, and the rules library
• remotion.dev/docs — the full framework documentation
• The fundamentals — frames, compositions, and the render model
• Rendering — CLI, SSR, Lambda, and cloud rendering