Моушн-графика в Claude Opus 5.5: 16 анимаций и промпты

Правила для всех 16 анимаций: один раз на папку

Первым сообщением дай Claude правила, общие для всех анимаций. Он запишет их в файл CLAUDE.md и будет сам перечитывать в каждом новом разговоре в этой папке, поэтому в промптах плиток их повторять не нужно. Вставь и нажми Enter:

Мы будем делать моушн-графику: короткие анимации для карусели Instagram. Запиши в файл CLAUDE.md в этой папке правила для всех анимаций, чтобы ты помнил их в каждом новом разговоре:

- одна анимация = один файл HTML в папке plitki, внутри SVG и немного JavaScript, без внешних библиотек, картинок и шрифтов из интернета, шрифт системный
- кадр 1080x1350, как пост в Instagram, и целиком помещается в окно браузера
- петля 8 секунд: последний кадр совпадает с первым, на стыке нет рывка
- всё движение считается от одного таймера. Добавь функцию window.setT(секунды): она ставит анимацию на нужный момент и останавливает её, чтобы потом записать видео кадр за кадром
- цвета: фон #F1F3F6, карточки белые, текст #16181D, акцент #5B5BF7, второй акцент #FFB23F
- все надписи по-русски. Все цифры выдуманы, рядом с ними мелкая подпись «для примера»
- прежде чем сказать «готово», проверь кадры на 0, 2, 4, 6 и 8 секундах: всё на месте, ничего не вылезает за край, 0 и 8 совпадают

Сейчас больше ничего не делай, только CLAUDE.md

Как понять, что получилось. Через 15-20 секунд Claude ответит, что записал правила, и в папке moushn появится файл CLAUDE.md. У меня он ещё и сам добавил запрет на встроенные анимации браузера: они идут по своим часам, и их не остановить на нужной секунде для проверки кадра

Зачем строка про window.setT. Это кнопка перемотки для записи: программа ставит анимацию на каждый кадр по очереди и фотографирует его, поэтому видео выходит плавным даже на слабом компьютере. Подпись «для примера» нужна по другой причине: в карусели выдуманная цифра без пометки читается как твой результат. Цвета меняй на свои, остальные строки лучше оставить

Что должно стоять на компьютере. Каждую плитку Claude проверяет сам: открывает её в Google Chrome без окна и смотрит кадры. Поставь Chrome, если его нет. Для записи видео в конце понадобятся ещё Node и FFmpeg, бесплатные программы: Node ставится установщиком с nodejs.org, FFmpeg попроси поставить Claude. У меня всё это уже стояло, с чистого компьютера путь я не прогонял. И учти лимит подписки: 16 плиток и доска подряд могут в него не влезть, тогда Claude скажет, когда продолжить

Как устроен промпт анимации: назови каждое состояние

Одним промптом «сделай 16 анимаций» доску не собрать. Работает метод из трёх шагов:

1. Выбери одно движение. Один эффект на файл, не все 16 сразу
2. Покажи образец и назови каждое состояние. Образец - готовая плитка с доски или её описание словами. Что на экране в начале, что в конце и сколько секунд длится каждая часть
3. Попроси HTML и SVG, потом правь по кругу. Это обычная веб-страница с рисунком, её открывает любой браузер, и правила из CLAUDE.md уже просят именно её. Одна правка за раз, после каждой смотри петлю и цифры

Второй шаг решает больше всего. «Сделай красивый анимированный график» Claude поймёт по-своему. А раскладку по секундам он соберёт почти дословно. Вот она из промпта плитки 05 «Морфинг графика», коротко:

Так эта плитка выглядит в моём прогоне на 0, 2, 4 и 6 секундах:

Все 16 промптов ниже написаны этим способом. Каждый я вставил в Claude Code слово в слово, каждый дал рабочую плитку с первого раза, Claude работал от 1,4 до 3,1 минуты на плитку без учёта нажатий «разрешить». Перед каждым новым промптом набирай /clear: так Claude начинает с чистого листа и не путает плитки, а правила он возьмёт из CLAUDE.md сам

Интерфейсы: плитки 01-04

Анимации экранов: кнопки, поиска, окон и вкладок. Подходят для постов о запуске, лендинга и обзоров сервисов

01 Кнопка → плеер

Кнопка вырастает в видеоплеер. Для чего: кнопка «Смотреть демо» на лендинге. Вставь после /clear:

Сделай плитку 01 «Кнопка → плеер», файл plitki/01-knopka-pleer.html

Что происходит: кнопка «Смотреть демо» вырастает в видеоплеер и сворачивается обратно

Состояния по секундам:
0-1 с: в центре белая кнопка «▶ Смотреть демо», к ней подъезжает курсор-стрелка
1-1,4 с: клик, кнопка чуть сжимается и отпускает
1,4-3 с: кнопка растягивается в тёмный плеер во всю ширину карточки, значок ▶ уезжает в центр плеера
3-6 с: плеер играет: внутри плывут простые фигуры, внизу бежит полоса прогресса
6-7,5 с: плеер сжимается обратно в кнопку
7,5-8 с: всё как в начале

02 Поиск → выдача

Строка поиска раскрывается, и под ней встают результаты. Для чего: показать в деле сервис для SEO или ресёрча. Вставь после /clear:

Сделай плитку 02 «Поиск → выдача», файл plitki/02-poisk-vydacha.html

Что происходит: строка поиска раскрывается, в ней печатается запрос, под ней встают результаты

Состояния по секундам:
0-1 с: вверху круглая кнопка с лупой
1-2 с: кнопка раскрывается в длинную строку поиска
2-3,5 с: в строке по буквам печатается «как сделать карусель», мигает курсор
3,5-5 с: под строкой снизу вверх по очереди встают 4 карточки результатов с заголовком и двумя серыми строками, между карточками 0,15 с
5-6,5 с: всё держится, первая карточка подсвечена акцентом
6,5-8 с: карточки уходят вниз, текст стирается, строка сворачивается в кнопку

03 Карточка → окно

Маленькая карточка разворачивается в полный редактор. Для чего: пост о запуске новой функции. Вставь после /clear:

Сделай плитку 03 «Карточка → окно», файл plitki/03-kartochka-okno.html

Что происходит: маленькая карточка разворачивается в полный редактор

Состояния по секундам:
0-1 с: в левом нижнем углу маленькая карточка «Новое: заметки» с двумя серыми строками
1-2,5 с: карточка плавно разворачивается в окно редактора на всю карточку: сверху панель с тремя кружками и кнопками, слева узкое меню
2,5-5,5 с: в редакторе по буквам печатается строка «План запуска на неделю», под ней появляются три пункта списка
5,5-6,5 с: всё держится
6,5-8 с: окно сворачивается обратно в маленькую карточку в углу

04 Вкладки → панели

Выбранная вкладка скользит, и панель под ней меняется. Для чего: сравнение тарифов или пакетов. Вставь после /clear:

Сделай плитку 04 «Вкладки → панели», файл plitki/04-vkladki-paneli.html

Что происходит: выбранная вкладка скользит, и панель под ней меняется

Состояния по секундам:
Сверху три вкладки «Старт», «Про», «Команда». Под выбранной тёмная подложка. Под вкладками белая панель: название пакета, цена и три пункта
0-2 с: выбрана «Старт», цена 990 ₽
2-2,6 с: подложка скользит на «Про», старое содержимое уезжает влево, новое въезжает справа, цена 2 900 ₽
2,6-4,6 с: держится «Про»
4,6-5,2 с: так же на «Команда», цена 9 900 ₽
5,2-7,2 с: держится «Команда»
7,2-8 с: подложка возвращается на «Старт», панель как в начале
Цены выдуманные, под ними подпись «для примера»

Данные и списки: плитки 05-08

Анимации цифр и списков: график, отчёт, стопка кейсов и док иконок

05 Морфинг графика

Столбцы перетекают в линию через свои вершины. Для чего: результат кампании в отчёте клиенту. Вставь после /clear:

Сделай плитку 05 «Морфинг графика», файл plitki/05-morfing-grafika.html

Что происходит: столбчатый график перетекает в линию через вершины столбцов и обратно

Состояния по секундам:
0-1 с: график «Охват за неделю», 7 столбцов, подписи Пн-Вс, числа выдуманные с подписью «для примера»
1-3 с: столбцы сужаются в точки на своих вершинах, точки соединяет линия, она прорисовывается слева направо
3-5 с: держится линия с точками, последняя точка пульсирует
5-7 с: линия исчезает, точки опускаются и снова вырастают в столбцы
7-8 с: столбцы стоят как в начале

06 Зум дашборда

Одна плитка выезжает вперёд из общего обзора. Для чего: вытащить главную цифру отчёта. Вставь после /clear:

Сделай плитку 06 «Зум дашборда», файл plitki/06-zum-dashborda.html

Что происходит: одна плитка выезжает вперёд из общего обзора

Состояния по секундам:
0-1 с: мелко видна панель отчёта: 6 плиток в сетке 2 на 3, в каждой название и серые полоски
1-2 с: вокруг плитки «Заявки» появляется рамка акцентного цвета
2-3,5 с: плитка «Заявки» увеличивается и выезжает на весь кадр, остальные бледнеют и уходят назад
3,5-5,5 с: в плитке число досчитывает от 0 до 1 240, под ним растёт маленький график, подпись «для примера»
5,5-7 с: плитка возвращается на своё место в сетке
7-8 с: как в начале

07 Пружинная стопка

Стопка карточек раскрывается веером и оседает. Для чего: три отзыва или три кейса. Вставь после /clear:

Сделай плитку 07 «Пружинная стопка», файл plitki/07-pruzhinnaya-stopka.html

Что происходит: стопка карточек раскрывается веером и оседает

Состояния по секундам:
0-1 с: в центре стопка из трёх карточек, видна верхняя. На карточках «Кейс 1», «Кейс 2», «Кейс 3» и по строке результата, например «+40% заявок», подпись «для примера»
1-2,2 с: карточки раскрываются веером с пружиной: чуть дальше нужного, потом назад и замирают, каждая следующая на 0,1 с позже
2,2-5 с: веер держится, карточки слегка покачиваются
5-6,5 с: карточки складываются обратно в стопку, тоже с пружиной
6,5-8 с: стопка стоит как в начале

08 Магнитный док

Иконки увеличиваются, когда мимо идёт курсор. Для чего: твои интеграции или набор инструментов. Вставь после /clear:

Сделай плитку 08 «Магнитный док», файл plitki/08-magnitnyy-dok.html

Что происходит: иконки дока растут, когда мимо идёт курсор

Состояния по секундам:
На тёмной карточке внизу полоса дока с 7 простыми иконками (круг, квадрат, треугольник, звезда и так далее, каждая своего цвета)
0-1 с: курсор-стрелка стоит слева от дока
1-4 с: курсор плавно едет по доку слева направо. Иконка под курсором растёт в 1,8 раза, соседние в 1,35, следующие в 1,1, всё плавно перетекает
4-7 с: курсор едет обратно справа налево, эффект тот же
7-8 с: курсор слева, все иконки обычного размера

Типографика: плитки 09-12

Анимации слов и картинок: заливка букв, растяжка, раскладка строки в страницу и открытие фото

09 Текст-маска

Картинка заливает буквы снизу вверх. Для чего: заголовок запуска или название кампании. Вставь после /clear:

Сделай плитку 09 «Текст-маска», файл plitki/09-tekst-maska.html

Что происходит: картинка заливает буквы снизу вверх

Состояния по секундам:
0-1 с: крупное слово «ЗАПУСК», только контур букв
1-3,5 с: внутри букв снизу вверх поднимается заливка: цветной узор из полос акцентных цветов, верхний край заливки волной
3,5-5,5 с: буквы залиты целиком, узор внутри медленно плывёт
5,5-7,5 с: заливка опускается вниз
7,5-8 с: снова только контур
Под словом мелкая строка «поднимается сквозь буквы»

10 Резиновый текст

Каждая буква тянется по одной базовой линии. Для чего: название эфира или вебинара. Вставь после /clear:

Сделай плитку 10 «Резиновый текст», файл plitki/10-rezinovyy-tekst.html

Что происходит: каждая буква тянется вверх от одной базовой линии

Состояния по секундам:
На тёмной карточке слово «ЭФИР», под буквами тонкая базовая линия
0-1 с: буквы стоят
1-3,5 с: волна слева направо: каждая буква по очереди вытягивается вверх в 1,6 раза и пружинит обратно, низ букв всё время стоит на линии
3,5-5 с: все буквы вместе вытягиваются в 1,4 раза и держатся
5-6,5 с: все буквы пружинят обратно к обычному размеру
6,5-8 с: буквы стоят как в начале

11 Текст → макет

Одна строка раскладывается в целую страницу. Для чего: заголовок статьи становится обложкой карусели. Вставь после /clear:

Сделай плитку 11 «Текст → макет», файл plitki/11-tekst-maket.html

Что происходит: одна строка раскладывается в целую страницу

Состояния по секундам:
0-1 с: в центре одна строка «Дизайн, который двигает людей»
1-2,5 с: слова разъезжаются: «Дизайн, который» поднимается и становится крупным заголовком страницы, «двигает людей» встаёт под ним подзаголовком
2,5-4 с: под ними по очереди встают блок-картинка (цветной прямоугольник с простой фигурой), три серые строки текста и кнопка
4-5,5 с: страница держится
5,5-7 с: блоки уходят, слова возвращаются в одну строку
7-8 с: как в начале

12 Раскрытие фото

Планки разъезжаются и открывают картинку. Для чего: показ продукта. Вставь после /clear:

Сделай плитку 12 «Раскрытие фото», файл plitki/12-raskrytie-foto.html

Что происходит: планки разъезжаются и открывают картинку

Состояния по секундам:
Картинка нарисована в SVG: пейзаж с солнцем, горами и озером, в цветах из правил
0-1 с: картинку целиком закрывают 8 тёмных вертикальных планок
1-3 с: планки по очереди, слева направо, уезжают: чётные вверх, нечётные вниз, каждая на 0,1 с позже соседней
3-5,5 с: картинка открыта, солнце медленно поднимается
5,5-7,5 с: планки возвращаются в том же порядке
7,5-8 с: всё закрыто, как в начале

Своё фото вместо нарисованного пейзажа тоже можно: положи картинку в папку и напиши в промпте «вместо пейзажа возьми photo.jpg из этой папки». Тогда файл перестанет открываться один, без картинки рядом

Системы: плитки 13-16

Анимации схем: слои сервиса, выделение строки, связи в воронке и сборка знака

13 Слои в глубину

Плоская схема распадается на слои, и они разъезжаются. Для чего: твой стек сервисов или уровни услуги. Вставь после /clear:

Сделай плитку 13 «Слои в глубину», файл plitki/13-sloi-v-glubinu.html

Что происходит: плоская схема распадается на слои, и они разъезжаются

Состояния по секундам:
0-1 с: одна плоская карточка, на ней три блока друг на друге: «Сайт», «Бот», «Таблица»
1-2,5 с: карточка наклоняется, как лист на столе (изометрия)
2,5-4 с: блоки поднимаются на отдельные слои-листы и расходятся по высоте, между слоями тонкие пунктирные линии, справа от каждого слоя подпись
4-5,5 с: слои держатся и чуть покачиваются
5,5-7 с: слои сходятся обратно, карточка выпрямляется
7-8 с: как в начале

14 Фокус-линза

Линза делает резкой одну строку списка. Для чего: строка тарифа, которую должны прочитать. Вставь после /clear:

Сделай плитку 14 «Фокус-линза», файл plitki/14-fokus-linza.html

Что происходит: линза делает резкой одну строку списка

Состояния по секундам:
Карточка «Отчёт по рассылке», в ней 5 строк: название слева, число справа: Открываемость 48%, Клики 6,2%, Ответы 31, Отписки 0,3%, Продажи 12. Подпись «для примера»
0-1 с: все строки размыты, линза (скруглённая рамка на всю ширину строки) стоит на первой строке, под ней строка резкая
1-3 с: линза едет вниз по строкам, под ней строка становится резкой и чуть крупнее, остальные размыты
3-5 с: линза возвращается к строке «Открываемость 48%» и останавливается, строка резкая, число подсвечено акцентом
5-7 с: держится
7-8 с: как в начале

15 Бегущие связи

Импульсы бегут между узлами схемы. Для чего: схема воронки или автоматизации. Вставь после /clear:

Сделай плитку 15 «Бегущие связи», файл plitki/15-beguschie-svyazi.html

Что происходит: импульсы бегут между узлами схемы

Состояния по секундам:
На тёмной карточке 5 узлов-таблеток: «Заявка» слева, в середине «Бот» и «Таблица», справа «Письмо» и «Оплата». Узлы соединены плавными линиями
0-1,5 с: светящаяся точка бежит от «Заявки» к «Боту», узел при приходе вспыхивает
1,5-3 с: от «Бота» две точки расходятся к «Таблице» и «Письму»
3-4,5 с: от «Письма» точка бежит к «Оплате», «Оплата» вспыхивает акцентом
4,5-8 с: круг повторяется ещё раз быстрее, к 8 секунде всё как в начале

16 Сборка логотипа

Точки слетаются и собираются в знак. Для чего: финальная карточка ролика или поста. Вставь после /clear:

Сделай плитку 16 «Сборка логотипа», файл plitki/16-sborka-logotipa.html

Что происходит: точки слетаются и собираются в знак

Состояния по секундам:
0-1 с: 150 мелких точек разбросаны по карточке, слегка дрожат
1-3,5 с: точки слетаются по плавным дугам и собираются в знак: кольцо, внутри галочка
3,5-5,5 с: знак держится, под ним появляется подпись «Знак 01», точки знака слегка мерцают
5,5-7,5 с: точки разлетаются обратно на свои места
7,5-8 с: как в начале

Собери доску из всех 16

Когда все 16 файлов лежат в папке plitki, собери их в одну доску, как на обложке карусели. /clear и вставь:

Собери доску motion-board.html из всех 16 плиток папки plitki

- сетка 4 на 4 по порядку номеров, у каждой плитки номер и название
- четыре ряда подписаны: «Интерфейсы», «Данные и списки», «Типографика», «Системы»
- вставь каждую плитку внутрь этого файла, а не ссылкой: доска должна открываться одна, без папки plitki
- все 16 идут вместе на одной 8-секундной петле, и у доски тоже есть window.setT(секунды) для всех плиток сразу
- проверь, что все 16 плиток видны и двигаются

Как понять, что получилось. Минуты через три рядом с папкой plitki появится motion-board.html. Открой его двойным щелчком: 16 плиток сеткой 4 на 4, ряды подписаны, все двигаются одновременно, вверху часы общей петли. Файл весит около 150 КБ и открывается без интернета. Claude сам объяснил, почему вставил каждую плитку в отдельное окошко внутри доски: у плиток совпадают внутренние имена деталей, и без окошек они ломали бы анимацию друг другу

Сделай плитку своей и выложи в карусель

Доска показывает приёмы, а в карусель идёт одна плитка с твоими словами и цифрами. Четыре промпта ниже вставляй по очереди в той же папке moushn, дождавшись ответа на предыдущий. Первый вытаскивает плитку из доски в отдельный файл, второй меняет содержимое, третий проверяет, четвёртый записывает видео

Промпт 1: вытащи один эффект. Название плитки в кавычках поменяй на ту, что нужна тебе:

Открой motion-board.html в этой папке. Мне нужна плитка «Морфинг графика». Сделай effect.html только с этой плиткой, 1080 x 1350. Сохрани 8-секундный тайминг. motion-board.html не меняй

Через минуту рядом с доской появится effect.html: та же плитка отдельно, во весь кадр

Промпт 2: сделай своим. В квадратных скобках впиши своё. Цвет бренда пишется кодом из решётки и шести знаков, например #0E7C66: такой код показывает пипетка цвета в Canva или Figma

В effect.html оставь движение и поменяй только содержимое. Слова: [твой заголовок]. Цифры: [твои реальные цифры]. Цвета: [два hex-кода бренда]. Меняй по одной вещи за раз

Я вписал «Заявки с сайта за неделю», цифры 12, 18, 15, 22, 19, 27, 31 и цвета #0E7C66 и #F2A541. Claude поменял слова, цифры и цвета по очереди, а движение оставил прежним. Сам предупредил, что эти цвета расходятся с палитрой из CLAUDE.md: так и должно быть, ты попросил свои. Мои цифры выдуманы, поэтому подпись «для примера» осталась. С настоящими цифрами допиши в конце промпта «подпись для примера убери»

Промпт 3: проверь петлю и цифры.

Проверь effect.html: кадр на 0 и на 8 секундах одинаковый, на стыке петли нет рывка, в кадре только мои цифры и нет других. Что не так, почини и расскажи, что поменял

Этот промпт у меня нашёл то, что я пропустил глазами. На шаге 2 Claude сам сложил мои цифры и вывел крупно «Всего за неделю: 144». Этого числа я не давал, и в карусели оно читалось бы как мой результат. Claude убрал блок с числом, перенёс плашку «Лучший день» на освободившееся место и заодно починил невидимую мелочь, из-за которой кадр 8 не совпадал с кадром 0

Промпт 4: запиши в видео.

Запиши effect.html в видео effect.mp4: 1080x1350, 30 кадров в секунду, ровно 8 секунд, без звука. Снимай кадр за кадром через window.setT, а не запись экрана, чтобы не было рывков. Проверь готовое видео: открывается, длина 8 секунд, размер 1080x1350

Меньше чем за минуту рядом с effect.html появился effect.mp4. Что показала проверка файла:

effect.mp4
1080x1350, 30 кадров в секунду
240 кадров, длина 8.000 с
одна видеодорожка, звука нет

Claude открывал страницу в браузере без окна, перематывал анимацию на каждый кадр, фотографировал и склеивал снимки в видео. Для этого он взял то, что уже стояло на моём Mac: браузер Google Chrome, Node (программа, которая запускает скрипты) и бесплатную FFmpeg (склейка кадров в видео). Если чего-то из этого у тебя нет: Chrome и Node ставятся обычными установщиками, FFmpeg попроси поставить Claude. С чистого компьютера этот путь я не прогонял

Как выложить в карусель. Открой effect.mp4 двойным щелчком и досмотри до стыка: на восьмой секунде картинка должна перейти в начало без скачка. Instagram принимает в одну карусель до 20 фото и видео, каждое видео до 60 секунд. Первый слайд задаёт формат всем остальным, поэтому все плитки делай одного размера 1080x1350. Как перенести видео на телефон и собрать карусель в приложении, я показал в разделе выкладываем видео-карусель в Instagram

Если у тебя другой случай

Терминал ответил command not found: claude (в PowerShell: «Имя "claude" не распознано как имя командлета» или The term 'claude' is not recognized). Claude Code ещё не установлен. Установка занимает одну строку, я разобрал её по шагам для Mac и Windows в статье как установить Claude Code

На Windows папки нет на рабочем столе. Если рабочий стол синхронизируется с OneDrive, настоящий рабочий стол лежит в другой папке. Тогда в PowerShell вместо первых двух строк вставь эти три:

cd ([Environment]::GetFolderPath('Desktop'))
mkdir moushn
cd moushn

Что ломается и что делать

Источники

• Anthropic: Claude Opus 5.5 - анонс модели 22 сентября 2026 года, доступна в Claude Code
• Claude: тарифы - в бесплатном плане нет Opus и Claude Code, Pro 20 долларов в месяц или 17 при оплате за год
• Claude Code: выбор модели - слово opus включает Opus 5.5, нужна версия 2.1.280 или новее
• Claude Code: память и файл CLAUDE.md - Claude Code сам читает CLAUDE.md из папки в начале каждого разговора
• MDN: SVG - векторная графика в браузере, из неё собраны все 16 плиток
• FFmpeg - бесплатная программа, которая склеивает кадры в видео
• How Instagram's 20-slide carousels work - до 20 фото и видео в карусели, видео до 60 секунд

Памятка: моушн-графика в Claude Code

Сохрани скриншотом, пригодится для следующей карусели

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