PrompTom
Tous les 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.

Ce qu'il fait

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

À quoi il sert

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.

Où le placer

  1. 1Créez le dossier .claude/skills/remotion-video dans votre projet
  2. 2Placez-y un fichier SKILL.md avec le texte ci-dessous
  3. 3C'est tout. Claude Code charge le skill lui-même quand une tâche correspond à la description

Pour que le skill soit disponible dans tous vos projets et pas un seul, placez-le dans ~/.claude/skills au lieu du dossier du projet.

Fichier SKILL.md

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

Le fichier de ce skill fait partie de la sélection PRO

Débloquer l'accès
Remotion: video as React code — PrompTom