Смотреть урок

Motion-графику для продукта можно собрать прямо в Claude — без ручной нарезки экранов и долгой работы с таймлайном. Разобрали подход с morph reel и Beatmorph.

Что внутри:
🔹 как строить morph reel через один HTML-artifact
🔹 как собирать движение по beat grid и UI-состояниям
🔹 как подключать бренд, музыку и storyboard
🔹 как проверить ролик и получить финальный MP4

💡 Главное — сначала задать последовательность состояний, ритм и правила движения.

Мини-гайд: Motion-графика в Claude

Claude можно использовать для коротких продуктовых motion-роликов без ручной сборки таймлайна. Есть два подхода: быстро собрать self-contained HTML-ролик прямо в Claude или использовать Beatmorph для более управляемого пайплайна со storyboard, брендингом, музыкой, QA и финальным рендером.

1. Что делаем: morph reel вместо обычной записи экрана

Morph reel — это короткий продуктовый ролик, где интерфейс не просто записывается с экрана, а превращается в управляемую motion-сцену: действия идут по заданной последовательности, синхронизированы с ритмом и оформлены под бренд.

Для Claude достаточно задать:

• что показывает ролик;
• шаги по порядку;
• реальные названия, цифры и цены;
• формат: 9:16, 4:5, 1:1 или 16:9;
• цвета бренда, шрифт и характер скруглений;
• captions;
• ВРМ и общую длину.

Если какое-то поле не заполнить, Claude может выбрать его сам. На выходе нужен один self-contained HTML artifact, который сам воспроизводит анимацию и может записать её в видео.

2. Как строится движение

Главный принцип — одна форма, много состояний. Вместо резких склеек один и тот же элемент меняется по ходу ролика:

• Button
• Loader - Success
• Stats
• Notification

При переходе меняются размер, цвет и скругление контейнера, а внутренний контент исчезает и появляется с небольшим blur и scale.

Базовые правила motion:

• один объект меняет размер, corner radius и цвет;
• старый контент уходит через fade, blur и небольшой scale;
• новый появляется примерно через 0.14 beat;
• курсор приходит примерно за 0.6 beat до клика;
• нажатие происходит точно на beat;
• текст печатается примерно по 4 символа за beat;
• на каждом beat должно происходить действие
• общая длина — целое количество тактов по 4 beats.

Для движения используются damped springs, а не обычные easing-кривые. Анимация должна быть детерминированной: один и тот же момент времени всегда должен давать один и тот же кадр. Камера также двигается вместе со сценой. Небольшие состояния вроде loader можно приблизить сильнее,…