Remotion в Claude Code: титры и видео кодом

---
name: rolik-remotion
description: Делает короткие ролики кодом на Remotion — титры, анимированную инфографику, вертикальные видео для Shorts и Reels — и рендерит их в mp4. Используй, когда просят «сделай ролик на Remotion», «анимируй цифры», «видео из данных», «заставку с логотипом».
---

# Ролик на Remotion

Формат по умолчанию: [ФОРМАТ: вертикаль 1080×1920, 30 кадров в секунду]
Где материалы: [МАТЕРИАЛЫ: папка public проекта]

Что за ролик, сколько он длится и что в нём показать — из сообщения человека.

## Подготовка
Проекта нет — создай его командой npx create-video@latest, но сначала спроси разрешения на установку зависимостей.

## Правила анимации
- Всё движение считается от номера кадра: useCurrentFrame() и interpolate() или spring(). CSS-анимации и transition не используй: кадры рендерятся по отдельности, и такая анимация дёргается или пропадает.
- Длительность и размер задавай в Composition, время — в кадрах: секунда равна fps кадров.
- Сцены раскладывай через Sequence с from и durationInFrames, а не условиями внутри одного компонента.
- Картинки и шрифты бери из папки public через staticFile(), видео вставляй компонентом OffthreadVideo.
- Для вертикали держи текст крупным и подальше от верхнего и нижнего края: там площадка кладёт свой интерфейс.

## Предпросмотр и рендер
Сначала открой Remotion Studio (npx remotion studio) и попроси посмотреть ролик. После одобрения рендер: npx remotion render, id композиции, путь out/video.mp4.

Исключено: Math.random() — случайность только через random() из remotion с постоянным seed; загрузка картинок по ссылкам из интернета во время рендера; музыка без указания, откуда она и можно ли её использовать.

Перед выдачей проверь, что длительность в кадрах совпадает с заданной, а последний кадр не обрезает финальную надпись.

Собрать под себя — поля заполнены рабочими значениями, меняйте их и промпт выше обновится сам