PrompTom
Все скилы

Remotion: видео кодом на React

remotion-videoPROвидеокод

Каждый кадр — React-компонент. Титры, субтитры, переходы, 3D и звук собираются в коде и рендерятся в файл.

Что делает

  • Срабатывает на «сделай видео из кода», «добавь субтитры», «анимируй текст», «сделай моушн-графику», «видео из картинок».
  • Всё движение задаётся номером кадра, а не CSS: анимации через классы в рендер не попадают, и скил это запрещает прямо.
  • Знает весь набор пакетов: субтитры в стиле TikTok с подсветкой слова, переходы, шрифты Google, Lottie, три-дэ, визуализация звука, световые блики, гифки.
  • Считает раскладку по правилам, а не на глаз: безопасные поля, минимальные кегли, одна смысловая точка на сцену — тесноту лечит временем, а не уменьшением шрифта.
  • Умеет расшифровать звук через whisper и разложить его на подписи по словам, а длину ролика вычислить из длины озвучки.

Зачем он нужен

Видео, собранное руками в редакторе, нельзя пересобрать с другими данными: поменялась цифра — открывай проект и двигай слои. Здесь ролик — это программа: те же сцены с другим текстом рендерятся заново одной командой, а сто роликов по шаблону отличаются только входными данными. Отсюда и главное ограничение, из-за которого чаще всего всё ломается: анимация обязана зависеть от номера кадра, иначе при рендере она просто не сыграет.

Куда положить

  1. 1Создайте в проекте папку .claude/skills/remotion-video
  2. 2Положите в неё файл SKILL.md с текстом ниже
  3. 3Всё. Claude Code подключит скил сам, когда задача подойдёт под описание

Чтобы скил работал во всех проектах, а не в одном, положите его в ~/.claude/skills вместо папки проекта.

Файл 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";

Файл скила входит в PRO-подборку

Открыть доступ
Remotion: видео кодом на React — PrompTom