PrompTom
Alle 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.

Was er tut

  • 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.

Wozu er gut ist

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.

Wohin damit

  1. 1Legen Sie im Projekt den Ordner .claude/skills/remotion-video an
  2. 2Legen Sie dort eine SKILL.md mit dem Text unten ab
  3. 3Fertig. Claude Code lädt den Skill selbst, sobald eine Aufgabe zur Beschreibung passt

Damit der Skill in allen Projekten statt nur in einem funktioniert, legen Sie ihn in ~/.claude/skills statt in den Projektordner.

SKILL.md-Datei

# 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";

Die Datei dieses Skills gehört zur PRO-Auswahl

Zugang freischalten
Remotion: video as React code — PrompTom