Моушн-дизайн
на Opus 5.5:
пошаговый гайд

карта

Девять шагов от идеи до готового видео

Ты пишешь задание, Opus пишет программу, программа собирает видео. Ниже весь путь: нажми на шаг, чтобы перейти к нему.

1. 01Подготовь Claude Codeприложение Claude, вкладка Code и один промпт: остальное поставится само
2. 02Сделай пробный роликвставь одну фразу и убедись, что всё работает
3. 03Напиши брифзадание для Opus из восьми строк: цвета, длительность, что и когда движется
4. 04Запиши правила один разфайл, который агент перечитывает перед каждой работой
5. 05Покажи примерчужой ролик, у которого Opus возьмёт темп и переходы
6. 06Подбери музыкутрек отдаёшь Claude до сборки, и ролик попадает в ритм
7. 07Проверь отдельные кадрысначала несколько картинок из ролика, а не всё видео целиком
8. 08Исправь ошибкиготовые фразы для частых проблем: мерцание, рывки, не тот шрифт
9. 09Сохрани для всех соцсетейвидео под каждую площадку и процесс, который повторяется одной командой

самый быстрый путь

Отдай эту статью агенту

Не хочешь разбираться сам? Открой вкладку Code в приложении Claude, вставь промпт ниже, подставь свою тему вместо скобок, и он сам пройдёт все шаги: установит программы, напишет задание, соберёт и проверит ролик.

Прочитай гайд https://digitolga.blog/opus-motion-design/ и сделай всё по шагам.
Сначала установи всё, что нужно (шаг 1).
Потом сделай ролик: [о чём ролик], [длительность в секундах], [формат: вертикальный 9:16 или горизонтальный 16:9].
Работай в HyperFrames. Перед полным рендером покажи мне 5 стоп-кадров и оцени их по критериям из шага 7.

Хочешь понимать, что происходит и как править результат? Читай шаги ниже.

как это работает

Opus пишет код, а не видео

Opus 5.5 не снимает видео. Он пишет программу, которая рисует каждый кадр. Невидимый браузер сохраняет кадры картинками, ffmpeg склеивает их в MP4: 15 секунд при 60 fps это 900 картинок.

возможности

Что получится, а что нет

Код силён там, где важны точность, шрифт и ритм. Живые люди и естественное движение лучше у видеомоделей.

шаг 1

Подготовь Claude Code

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

Подготовь компьютер для моушн-роликов: установи Node 22, ffmpeg, Playwright с Chromium и HyperFrames. Проверь, что всё работает, и скажи, когда будет готово.

шаг 2

Сделай пробный ролик

Вставь любую из трёх фраз и посмотри, что получится. Это проверка, что всё установилось и работает. Для своего продукта такие фразы не годятся: ролик выйдет красивым, но шаблонным.

make a dynamic 15-second motion graphics video that shows what an
incredible motion designer you are, like it's your showreel for a résumé.
go all out.

make a dynamic 10-second motion graphics video that introduces who you are as Opus 5.5.
Avoid frames and text in the corners, the usual giveaways of AI-made video.

use your showreel energy, but tell a story: the history of [TOPIC] from [START] to today,
surprise me with the storyboard. 45 seconds, vertical 9:16.

шаг 3

Напиши бриф

Бриф это задание для Opus: текст, в котором ты описываешь ролик. Главное правило: вместо слов «красиво», «стильно», «премиально» пиши цифры. На такие слова Opus отвечает шаблоном.

Что написать в брифе: восемь строк

GOAL: [после ролика зритель понимает, что кофе можно заказать за два нажатия]

OUTPUT: HyperFrames, размер [1080 x 1920] пикселей ([вертикальный]), [30] кадров в секунду

TIME: длина [15] секунд, [без петли]

LOOK: фон [#0D0A08], текст [#F5F0E8], акцентный цвет [#F5D347], шрифт [Oswald 700, 96 px]

MOTION: появления с плавным торможением [cubic-bezier(0.16, 1, 0.3, 1)], пружины с затуханием [0.8], каждое движение длится [0,4] секунды

SHOTS: [0–3 с: логотип собирается из букв] / [3–8 с: телефон выезжает, курсор нажимает «Заказать»] / [8–15 с: карточка с ценой и логотипом]

BANNED: [заголовок по центру на градиенте, свечение, частицы, подписи в углах]

QA: до полной сборки покажи стоп-кадры на секундах [0, 3, 8, 12, 15] и все кадры на одной картинке

шаг 4

Запиши правила один раз

CLAUDE.md это памятка для Claude в папке с роликами. Он перечитывает её перед каждой работой, поэтому не нужно каждый раз писать «собирай в HyperFrames, без градиентов, громкость −14». Внутри четыре раздела, примерно так:

Как создать: скопируй шаблон ниже и отправь Claude с фразой «Сохрани это как CLAUDE.md в папке motion-lab». Сам файл создавать не нужно.

# Motion studio rules
## Render contract
- Build every film in HyperFrames and render it with HyperFrames, H.264 yuv420p.
- Only the libraries the brief names, pinned to a version. No network requests except fonts and those libraries.
- Every frame is a pure function of time t, in seconds: `window.seek(t)` paints frame t.
- Animate with CSS keyframes, the Web Animations API, SVG, Canvas 2D or WebGL.
- No CSS transitions, no Date.now, no setTimeout or setInterval, no requestAnimationFrame in render mode,
  no state carried between frames. Seeded noise only (mulberry32), never Math.random.
- Loops: render frames 0 to N-1 only, and frame N-1 must flow into frame 0.
## Motion
- Arrive fast, land soft: each frame covers 12–19% of the remaining distance.
  Never constant speed, never a dead stop.
- Nothing ever freezes: holds keep a slow push-in (~0.25% per frame).
- Every move lasts at least 0.3s; big moves 0.5–0.75s.
- Stagger grouped elements 2–4 frames apart.
- Motion blur follows direction and speed, fades as things settle; fast
  moves get real in-between frames blended, never blended across a cut.
- Text stays still at least 8 frames before it moves.
- One focal point per frame.
- Cuts land on the beat or 2 frames before it; morphs start ~4 frames early.
## Look
- Banned defaults: centered title on gradient, everything fading in,
  corner labels and frame borders, glow on UI chrome, generic particle bursts.
- One display face, one UI face. One accent color unless the brief says otherwise.
- Every 2 to 4 seconds something new must happen on screen.
## Sound
- Score and SFX are synthesized in code unless a track is supplied.
- Place hits on the measured beat grid (beats.json). Loudness -14 LUFS.
## Loop before you show me anything
1. Render one frame per beat as a contact sheet and LOOK at it.
2. Score it 1-10 on: hook in first 2s, readability at phone size,
   motion quality, variety, brand accuracy, sound sync.
3. Fix the 3 worst problems. Repeat until every score is 8+.
4. Only then do the full render.

шаг 5

Покажи ролик, который нравится

Референс это чужой ролик, который тебе нравится. Показать его проще, чем описывать стиль словами. Opus разрежет его на кадры и точно измерит, где что стоит, сколько длится и каких цветов.

Где искать вдохновение

Before building anything, reverse-engineer [./ref.mp4] frame by frame.
1. Extract every frame. Find every cut from frame-to-frame difference spikes,
   then confirm each one visually.
2. For every shot, measure with code (never eyeball): start/end frame, each
   element's position and size per frame, how many frames each move takes,
   overshoot, camera zoom/pan per frame, blur timing and direction, exact
   colours sampled from pixels, font sizes, and every sound hit's timestamp.
3. Save it as SPEC.md with the per-frame numbers for every big move.
The frames are the truth. If your description and the frames disagree,
the frames win. Show me the shot list before you build.

Before building, split the reference into two lists:
KEEP (identical): timing, cuts, camera, easing, positions, blur, transitions.
CHANGE (mine): brand, logo, colours, fonts, copy, product screens, faces,
platform UI.
Then write my visual rules once, in one place (fonts, palette, spacing, one
accent colour) and every shot must use them.
BANNED: random gradients, everything fading in, fake product UI, particle
bursts, glow on text, more than one thing fighting for attention.
Ask me about anything ambiguous before you build.

шаг 6

Подбери музыку

Ролик смотрится дороже, когда сцены меняются точно в такт музыке. Для этого Claude нужен трек ещё до того, как он начнёт собирать ролик.

Возьми трек music.mp3 из папки. Отметь в нём удары и поставь на них смену сцен, склейки и звуки кликов. Громкость сделай как в соцсетях: −14 LUFS.

шаг 7

Проверяй кадры, а не всё видео

Собрать всё видео долго: до 1–1,5 минуты на каждую секунду ролика. Поэтому сначала смотрят несколько картинок из ролика. Ошибку на картинке находят за 2 минуты, а на собранном видео ушло бы 10.

Before the full render, render 5 stills: the opening, the main composition,
the product shot, the middle of the fastest transition, and the end card.
Look at each one yourself, zoomed in, and check: hierarchy, spacing,
typography, colours, product accuracy, and anything that shouldn't be there
(stray shapes, cut-off text, overlaps, leftover effects you copied without
knowing why). Fix everything, re-render the stills, then show me.
Only start the full render after I approve.

Render a contact sheet (2 frames per second), a strip of 12 frames around
each fast move, and a phone-size sheet at 360 px wide. Look at them properly.
Be a harsh motion director, not a proud author.
Score 1-10: hook in the first 2s, readability at phone size, motion quality,
variety (something new every 2-4s), composition, data accuracy, sound sync.
List the 3 biggest problems with timestamps. Fix them. Re-render only the
affected seconds. Repeat until every score is 8+.

You're a harsh motion director and you didn't build this. Default: reject.
Put the reference and my render side by side, frame-locked, and compare them.
For every mismatch give: shot + frame number, what's wrong, why it looks
worse, and the exact fix ("card lands 6 frames early, delay to frame 44").
Also measure frame-to-frame change and flag:
- any fast move followed by a dead stop (that's what "choppy" is)
- text moving before it's readable
- sound landing off its visual hit
Prioritize the 5 fixes that improve the video most. Nothing ships below [8]/10.

шаг 8

Исправь ошибки

Что-то в ролике выглядит не так? Найди ниже, на что это похоже, и отправь Claude фразу из карточки. Делать это нужно, только если проблема есть. Разбираться в причинах не нужно.

Сделай каждое значение чистой функцией от t. Замени Math.random генератором с зерном. Убери таймеры и CSS-переходы.

Загружай шрифт с display=block и жди document.fonts.ready до первого кадра.

Рендери только кадры с 0 по N-1. Веди петлю от phase = frame / N с целым числом циклов.

Считай каждый бит как n x 60 / BPM и округляй по каждому. Никогда не прибавляй округлённое число кадров.

Анимируй только transform и opacity. Никаких width, height, top или left.

Без градиентов. Только плоские цвета или палитра с дизерингом.

Выравнивай неподвижный текст по целым пикселям. Рендери в 2x и уменьшай.

Держи каждое состояние текста 0,3 с на слово плюс 0,5 с, прежде чем двигать.

Запрещено: заголовок по центру на градиенте, плавное проявление всего подряд, подписи в углах и рамки, свечение на интерфейсе, россыпи частиц, кремовый фон, курсивные акценты, нумерация «01/02/03», кнопки-таблетки.

Одно главное движение за раз. Остальные стартуют на 150 мс позже и проходят 60% своего пути.

шаг 9

Сохрани для всех соцсетей

Ролик готов. Осталось сделать версии под каждую площадку и сохранить весь процесс, чтобы следующий ролик делался одной командой.

Сделай из готового ролика версии 9:16, 1:1 и 16:9. Не обрезай, а перестрой сцены под каждый размер. Видео в H.264, громкость −14 LUFS.

Сохрани весь процесс, который мы прошли, как скилл motion-reel.

/motion-reel для [ссылка на продукт], 20 секунд, вертикальный

вопросы

Частые вопросы

где взять

Готовые скиллы и библиотеки

• prompt-motion.com 226 роликов на Opus 5.5, у каждого промпт или скилл. Лучшее место, чтобы найти референс.
• claude-motion-design Скилл Рафаэля Обри: процесс, рендер, звук, цикл критики, пример.
• HyperFrames Движок от HeyGen. Ставится в Claude Code как плагин.
• Remotion Agent Skills Официальные скиллы Remotion для Claude Code.
• motion-design-skill Принципы анимации Диснея, упакованные в скилл.
• product-launch-motion Скилл для роликов к запуску продукта.
• animate Объясняющие ролики в семи стилях.
• awesome-ai-motion Библиотека моушн-промптов.
• mixkit.co Бесплатная музыка и звуковые эффекты.
• easings.net Справочник плавностей Андрея Ситника: готовые кривые с числами.
• Higgsfield MCP Подключение Claude к After Effects и набору Production Skills.