# Claude Opus: моушн-анимация кодом без монтажки Поставишь связку Claude Code + Remotion, дашь Opus первый промпт со сценой, шаром и кинетической типографикой и отрендеришь вертикальный ролик 9:16 - без таймлайна, ключевых кадров и монтажки. // Шаг 1 ## Чем код превращается в видео и как это поставить Видео здесь - это React-компоненты. [Remotion](https://www.remotion.dev/) рендерит их кадр за кадром в MP4, а Claude Opus в [Claude Code](https://code.claude.com/docs/en/quickstart) пишет этот код по твоему описанию. Ты говоришь словами, что происходит в кадре, - Opus пишет компонент, Remotion собирает ролик. - 1 «Поставь Node.js» — Нужен Node 16 или новее (или Bun 1.0.3+). На macOS Remotion работает с версии 15 (Sequoia) и новее. Проверка: node -v - 2 «Поставь Claude Code» — macOS, Linux, WSL: curl -fsSL https://claude.ai/install.sh | bash. Windows PowerShell: irm https://claude.ai/install.ps1 | iex. Открой новый терминал и проверь: claude --version. Нужна подписка Claude Pro/Max или аккаунт Claude Console. - 3 «Создай проект Remotion» — npx create-video@latest - выбери шаблон Blank или Hello World. При создании мастер предложит добавить скиллы для агента - соглашайся. - 4 «Добавь скиллы Remotion для Claude Code» — Если не добавил на прошлом шаге: npx skills add remotion-dev/skills в папке проекта. Это правила Remotion для агента - анимация, тайминг, шрифты, рендер. - 5 «Запусти превью» — npm run dev - откроется Remotion Studio в браузере. Тут смотришь, что получилось, и скроллишь по кадрам. - 6 «Запусти Claude на Opus» — Во втором терминале в папке проекта: claude, затем внутри сессии /model opus. ``` curl -fsSL https://claude.ai/install.sh | bash npx create-video@latest cd my-video npx skills add remotion-dev/skills npm run dev ``` _Всё подряд - macOS / Linux_ [Remotion - документация](https://www.remotion.dev/docs) [Скиллы Remotion для Claude Code](https://github.com/remotion-dev/skills) [Установка Claude Code](https://code.claude.com/docs/en/quickstart) --- // Шаг 2 ## Первый промпт для Claude Opus: сцена, шар, кинетическая типографика Описывай как режиссёр: что в кадре, что двигается, с какой скоростью и в какой момент. Секунды и цвета - конкретно. Вставь в Claude Code целиком: ``` Use the remotion-best-practices skill. Create a new composition "Showreel": 1080x1920, 30 fps, 12 seconds. Scene 1 (0-3s): near-black background #0A0B0D. A glossy orange-red 3D-looking ball (radial gradient, soft highlight top-left) falls from the top, bounces twice in the center with realistic squash and stretch, then stops. Scene 2 (3-6s): the ball rolls to the left, the background smoothly changes from black to warm beige #F0E6D2. The word "direct." in a heavy rounded sans-serif, orange-red, assembles letter by letter from below with a spring animation. Scene 3 (6-9s): the letters of "direct." scatter in different directions and re-assemble into the word "claude" in white with a hard black drop shadow. Scene 4 (9-12s): behind "claude" a large pink-orange liquid blob morphs slowly and fills the frame. All motion with spring() and interpolate() from Remotion, no CSS transitions. Keep every scene in its own . Register the composition in Root.tsx and tell me how to preview it. ``` _Промпт - вставь как есть_ врезка `// Правило`: текст «Одна сцена - один абзац промпта. Сначала пусть Opus соберёт весь ролик грубо, детали докручивай потом правками. Длинный промпт на десять сцен с первого раза собирается хуже.» - [ ] Вставь промпт в Claude Code и разреши ему создать файлы - [ ] Открой Remotion Studio и выбери композицию Showreel - [ ] Прокрути ролик по кадрам и выпиши, что не нравится --- // Шаг 3 ## Как править анимацию словами, без таймлайна и ключевых кадров Ползунки не трогаешь. Пишешь в тот же чат, что поменять, - Opus правит код, Studio обновляет превью сам. Примеры правок: - Ball should fall slower, about 1.2 seconds, and bounce only once. - Make the background transition from black to beige 2x longer and ease-in-out. - Letters of "direct." should come in with a 3-frame stagger, not all at once. - When the letters scatter, add slight rotation and motion blur. - Shift the whole scene 3 by 10 frames later so it lands on the beat. - Make the blob in scene 4 move 30% slower and add a thin pink outline. врезка `// Важно`: текст «Называй сцену и время: «сцена 2, с 3-й по 4-ю секунду». Opus меняет ровно это место, а не переписывает весь ролик. Понравилась версия - попроси сделать git commit, чтобы было куда откатиться.» - [ ] Сделай минимум три правки словами и посмотри каждую в Studio - [ ] Попроси Opus вынести цвета и тексты в props, чтобы менять их без кода - [ ] Сохрани удачную версию коммитом --- // Шаг 4 ## Как отрендерить вертикальный ролик 9:16 для Reels и Shorts Вертикаль задаётся в композиции: ширина 1080, высота 1920. Проверь Root.tsx - должно быть так: ``` ``` _src/Root.tsx_ ``` npx remotion render Showreel out/showreel.mp4 --codec=h264 ``` _Рендер в MP4 (H.264 - то, что принимают Reels и Shorts)_ - 01 «Проверь кусок до полного рендера» — npx remotion render Showreel out/test.mp4 --frames=0-89 - отрендерит только первые 3 секунды. - 02 «Отрендери целиком» — Команда выше. Готовый файл - в папке out. - 03 «Залей» — MP4 1080x1920 идёт в Reels, Shorts и TikTok без перекодирования. Музыку добавь в приложении площадки или попроси Opus подложить трек через