Claude edited this

• Remotion is a framework for making videos with React. Each frame is a React component rendered at a given time, so a video is just code.
• Because the video is code, an AI coding agent like Claude Code can write and change it: scenes, animation timing, captions, sound cues.
• Remotion publishes official Agent Skills that teach an agent how to use Remotion well. You add them with one command: npx skills add remotion-dev/skills.
• The video this post is about was built that way: four raw takes in, a 27-second vertical video out, with every scene, caption and sound cue written by Claude Code and checked in Remotion Studio.
• You still direct it. You record, you give feedback, you approve. Claude does the editing work.

Remotion lets you write a video the way you write a web page. A composition has a size, a frame rate and a length. Inside it, ordinary React components draw each frame. A hook called useCurrentFrame() tells a component which frame is being drawn, so anything that should move is just a function of the frame number.

React for the frames, TypeScript for the code, Node.js to run it, and an MP4 at the end.

A tiny scene

A title that fades in over the first second looks like this (simplified example):

import { interpolate, useCurrentFrame } from "remotion";

export const Title = () => {
  const frame = useCurrentFrame();
  // frames 0–30 (one second at 30 fps): opacity 0 → 1
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
  return <h1 style={{ opacity }}>Hello</h1>;
};

Two tools you use every day

A good short-form explainer has a lot of small, precise work in it, and most of it is repetitive:

• Captions word by word. Each word has to light up when it's spoken. That means a timestamp per word, for every line.
• Graphics on the right word. A logo should appear when its name is said, not half a second later.
• Cuts and pauses. Dead air gets trimmed, and every graphic after a cut has to move with it.
• Re-timing. Speed the video up and every keyframe, caption and sound effect has to shift.

On a timeline editor each of those is manual. In code, it's one number: in this project, changing the speed meant changing timeScale from 1 / 1.2 to 1 / 1.1 and re-running a script for the caption and sound timings.

A skill is a packaged set of instructions an agent loads when a task needs it. Remotion's skills are installed into your project's .agents/skills folder, and Claude Code reads them through .claude/skills, which is linked to that folder.

You can call one directly with a slash command. If you're not sure which one you need, Remotion recommends /remotion-best-practices, which covers all the others.

Here's the real pipeline behind the video. The Remotion skills cover the scenes, captions, preview and render. The steps before that (cleaning the takes, finding word timings) were done by Claude running scripts in the same project.

What a scene looks like

Each scene reads the current time and decides what is on screen. A shortened version of the opening card, where "Me" gets struck out and flips to Claude on the spoken word:

export const Hook = () => {
  const t = useT(0);   // seconds into the take
  return (
    <AbsoluteFill>
      {/* struck out on "edit nahi kiya", flips to Claude on "Claude" */}
      <EditedBy t={t} strikeAt={2.0} flipAt={2.68} />
    </AbsoluteFill>
  );
};

Captions are data

Each caption line is a small piece of JSON with a time per word, so the words sharpen exactly as they're spoken (times in seconds, from the real file):

{ "text": "jiska naam hai Remotion",
  "words": [
    { "w": "jiska", "start": 12.9 }, { "w": "naam", "start": 13.14 },
    { "w": "hai", "start": 13.33 }, { "w": "Remotion", "start": 13.44 }
  ] }

The captions file holds a few more fields (end times, which words are coloured); this shows the idea.