PrompTom
Wszystkie skille

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.

Co robi

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

Do czego się przyda

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.

Gdzie go umieścić

  1. 1Utwórz w projekcie folder .claude/skills/remotion-video
  2. 2Umieść w nim plik SKILL.md z tekstem poniżej
  3. 3Gotowe. Claude Code sam załaduje skill, gdy zadanie będzie pasować do opisu

Aby skill działał we wszystkich projektach, a nie w jednym, umieść go w ~/.claude/skills zamiast w folderze projektu.

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

Plik tego skila należy do kolekcji PRO

Odblokuj dostęp
Remotion: video as React code — PrompTom