PrompTom
All skills

Remotion: video as React code

remotion-videoPROvideocode

Every frame is a React component. Titles, captions, transitions, 3D and audio are written in code and rendered to a file.

What it does

  • Triggers on “make a video from code”, “add subtitles”, “animate this text”, “motion graphics”, “video from images”.
  • All motion is driven by the frame number, never by CSS: class-based animations never make it into the render, and the skill forbids them outright.
  • Covers the whole package set: TikTok-style captions with word highlighting, transitions, Google fonts, Lottie, 3D, audio visualisation, light leaks, GIFs.
  • Lays out scenes by rule rather than by eye: safe margins, minimum type sizes, one focal point per scene — crowding is solved with time, not by shrinking the text.
  • Can transcribe audio with whisper into word-level captions, and derive the video's length from the length of the voice-over.

Why you'd want it

A video cut by hand in an editor can't be rebuilt with different data: change one number and you're back in the project moving layers. Here a video is a program — the same scenes with new text re-render with one command, and a hundred videos from one template differ only by their input. Hence the one constraint that breaks people most often: animation must depend on the frame number, or it simply won't play in the render.

Where to put it

  1. 1Create the folder .claude/skills/remotion-video in your project
  2. 2Put a SKILL.md file in it with the text below
  3. 3That's it. Claude Code loads the skill itself when a task matches the description

To make the skill available in every project rather than one, put it in ~/.claude/skills instead of the project folder.

SKILL.md file

# Remotion — Programmatic Video Creation in React

Remotion lets you create videos using React components. Every frame is a React render. All animations MUST be driven by `useCurrentFrame()` — CSS transitions/animations and Tailwind `animate-*` classes are FORBIDDEN (they won't render correctly).

## New project setup

```bash
npx create-video@latest --yes --blank --no-tailwind my-video
```

## Core concepts

### Composition (src/Root.tsx)

Defines video dimensions, fps, and duration:

```tsx
import { Composition } from "remotion";
import { MyComp } from "./MyComp";

export const RemotionRoot = () => (
  <Composition
    id="MyComp"
    component={MyComp}
    durationInFrames={300}
    fps={30}
    width={1080}
    height={1920}
  />
);
```

### Animation with interpolate + Easing

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

This skill's file is part of the PRO collection

Unlock access
Remotion: video as React code — PrompTom