16 анимаций для постов и сайта: готовые промты для Claude

Раньше анимированный пост означал моушн-дизайнера и день работы в After Effects. Сейчас это один промт. Claude пишет маленький HTML-файл, вы открываете его в браузере, и анимация уже крутится по кругу. Ниже 16 сцен, которые я сам сделал по этим промтам: смотрите, что получается, копируйте строку и меняйте слова в [скобках] на свои.

Как это работает: 3 шага

Шаг 1. Выберите сцену и скопируйте промт под ней. Каждый промт ниже полный: стиль, правила движения и сама сцена. Его можно вставлять в Claude целиком, ничего не склеивая.

Шаг 2. Замените слова в [скобках] на свои. Цвета и шрифты вашего бренда, ваш текст, ваша цифра. Цвета по умолчанию уже стоят, поэтому промт работает и без замены.

Шаг 3. Откройте файл и запишите экран. Сохраните ответ Claude как scene.html и откройте в браузере. Для поста или сторис запишите экран встроенной записью (на Mac Cmd + Shift + 5) или попросите Claude добавить в файл кнопку записи видео.

Анимацию двигает библиотека GSAP. С 2025 года она полностью бесплатная, включая коммерческие проекты, так что такие сцены можно ставить и в рекламу, и на сайт клиента.

Почему промт такой подробный

Потому что ИИ быстрый, но не аккуратный. В отчёте Figma 78% дизайнеров и разработчиков говорят, что ИИ ускоряет работу, а полагаться на результат могут только 32%.

Разницу закрывают правила. В промте прописано всё, на чём ИИ обычно ошибается: петля без рывка, сколько держится результат, только один акцент, текст не мельче 24 px и контраст не ниже 4,5:1, как требует стандарт доступности W3C. Это та же мысль, что и в статье про систему перед автоматизацией: сначала правила, потом скорость.

16 сцен: что получается

Все примеры ниже сделаны ровно по промтам под ними, с цветами по умолчанию. Промты отличаются только последней строкой, в ней сцена.

01. Точки собираются в логотип

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: заставка в начале рилса, анонс, первый слайд карусели.

Подставь своё: Около 400 точек слетаются с краёв окна в [твой логотип или инициалы], один раз вспыхивают и разлетаются кольцом

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Около 400 точек слетаются с краёв окна в [твой логотип или инициалы], один раз вспыхивают и разлетаются кольцом

02. Цвет бренда течёт

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: фон для цитаты, сторис, шапка сайта.

Подставь своё: Косые ленты в цветах [твоего бренда] медленно текут, как жидкость; в углу мелко слово «[твоё слово]»

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Косые ленты в цветах [твоего бренда] медленно текут, как жидкость; в углу мелко слово «[твоё слово]»

03. Иконка становится стеклом

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: пост про рассылку, новый раздел сайта, кнопка подписки.

Подставь своё: Плоская иконка [конверта] поднимается и превращается в стекло: блик, мягкая тень, за ней цветное пятно

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Плоская иконка [конверта] поднимается и превращается в стекло: блик, мягкая тень, за ней цветное пятно

04. Фигура меняет форму

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: переход между частями ролика, детский или игровой продукт.

Подставь своё: Одна глянцевая фигура пружинит из формы в форму: [круг, квадрат, звезда, капля] и снова круг; сверху название формы

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Одна глянцевая фигура пружинит из формы в форму: [круг, квадрат, звезда, капля] и снова круг; сверху название формы

05. Стеклянная карточка ловит свет

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: тарифы, подарочный сертификат, анонс продукта.

Подставь своё: Стеклянная карточка «[Тариф PRO, 49 € в месяц]» плавно наклоняется в 3D над живыми цветными пятнами, по ней дважды пробегает блик

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Стеклянная карточка «[Тариф PRO, 49 € в месяц]» плавно наклоняется в 3D над живыми цветными пятнами, по ней дважды пробегает блик

06. Колода карточек

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: список услуг, «5 способов», меню.

Подставь своё: Колода из 5 карточек [твоих услуг] раскрывается веером, собирается, верхняя выезжает вперёд и возвращается

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Колода из 5 карточек [твоих услуг] раскрывается веером, собирается, верхняя выезжает вперёд и возвращается

07. Экран собирается в приложение

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: показ приложения, личного кабинета, бота.

Подставь своё: Пустой экран телефона по очереди собирается в [твоё приложение]: шапка, три карточки, кнопка внизу

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Пустой экран телефона по очереди собирается в [твоё приложение]: шапка, три карточки, кнопка внизу

08. Субтитры по словам

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: цитата, главная мысль поста, обложка рилса.

Подставь своё: Фраза «[твоя фраза]» появляется по одному слову, как субтитры под голос; текущее слово подсвечено акцентом, под текстом звуковая волна

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Фраза «[твоя фраза]» появляется по одному слову, как субтитры под голос; текущее слово подсвечено акцентом, под текстом звуковая волна

09. Курсор нажимает

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: призыв подписаться, инструкция «куда нажать».

Подставь своё: Курсор подходит к кнопке «[Подписаться]», нажимает, через 0,15 с на кнопке «[Вы в канале]» с галочкой

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Курсор подходит к кнопке «[Подписаться]», нажимает, через 0,15 с на кнопке «[Вы в канале]» с галочкой

10. Кнопка оплаты

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: запуск продукта, «как купить», лендинг.

Подставь своё: Кнопка «Оплатить [49 €]» с замком: курсор нажимает, крутится кольцо загрузки, потом галочка, искры и «Оплачено [49 €]»

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Кнопка «Оплатить [49 €]» с замком: курсор нажимает, крутится кольцо загрузки, потом галочка, искры и «Оплачено [49 €]»

11. Конфетти

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: спасибо за заказ, итог челленджа, праздник.

Подставь своё: Круглая кнопка с галочкой пружинит от нажатия, около 70 конфетти разлетаются и падают, под ней «[Готово!]»

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Круглая кнопка с галочкой пружинит от нажатия, около 70 конфетти разлетаются и падают, под ней «[Готово!]»

12. Число накручивается

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: результаты, кейс, отчёт за месяц.

Подставь своё: Карточка «[Подписчики в Telegram]»: число [1 240] накручивается с нуля, потом прибавляет по одному, рядом плашка «[+3 сегодня]»

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Карточка «[Подписчики в Telegram]»: число [1 240] накручивается с нуля, потом прибавляет по одному, рядом плашка «[+3 сегодня]»

13. График рисует себя

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: кейс «было и стало», рост показателя.

Подставь своё: Виджет «[Заявки за месяц]»: линия рисует график слева направо со светящейся точкой на конце, в конце плашка «[+38 %]»

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Виджет «[Заявки за месяц]»: линия рисует график слева направо со светящейся точкой на конце, в конце плашка «[+38 %]»

14. Столбцы растут

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: сравнение, лучший день, рейтинг.

Подставь своё: [Семь дней недели] вырастают столбцами по очереди, лучший день подсвечен акцентом, числа над столбцами считаются

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
[Семь дней недели] вырастают столбцами по очереди, лучший день подсвечен акцентом, числа над столбцами считаются

15. Паутина связей

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: схема воронки, команда, экосистема продукта.

Подставь своё: Из центра «[Статья]» прорастают связи к [Рилсы, Карусели, Посты, Сторис, YouTube, Telegram]: узлы зажигаются по очереди, по линиям бегут импульсы

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
Из центра «[Статья]» прорастают связи к [Рилсы, Карусели, Посты, Сторис, YouTube, Telegram]: узлы зажигаются по очереди, по линиям бегут импульсы

16. Глобус и дуги

Анимация: Богдан Семион, сделано по промту ниже

Где пригодится: география клиентов, переезд, доставка.

Подставь своё: На глобусе из точек из [Бонна] вылетают светящиеся дуги в [Лиссабон, Осло и Киев], у городов появляются подписи

Ты моушн-дизайнер. Сделай одну анимированную сцену для поста.

Что отдать: один HTML-файл, всё внутри (стили и код). Анимация на GSAP 3, подключи его одним тегом script с cdnjs. Файл открывается в браузере и сразу крутится по кругу.

Кадр:
- холст 1080 × 1350 (вертикальный пост Instagram);
- фон [твой тёмный цвет, например #101012], в центре окно [цвет окна, например #1b1b20] со скруглением 28 px;
- текст [светлый цвет, например #f4f1ea];
- акцент [твой цвет, например #ff6b2c]: только на одном главном элементе (кнопка, слово, точка, столбец);
- заголовки и цифры [шрифт, например Montserrat 800], подписи [шрифт, например Manrope], технические подписи моноширинным;
- текст не мельче 24 px, контраст текста к фону не ниже 4,5:1.

Движение:
- петля 6 секунд, последний кадр совпадает с первым, без рывка;
- 0,5 с покоя → действие → результат держится минимум 1,5 с → плавный возврат;
- появление за 0,4-0,6 с с мягким торможением (cubic-bezier(.23, 1, .32, 1)); ничего не вырастает из нуля: старт с масштаба 0,92 и прозрачности;
- двигай только transform и opacity;
- если есть курсор: сначала нажатие, через 0,15 с реакция, курсор не закрывает текст;
- в фазе, когда результат читают, лёгкий наезд камеры до 1,03.

Сцена: один предмет и одно изменение. Без заголовков, логотипов и подписей, которых нет в строке сцены.

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

Строка сцены:
На глобусе из точек из [Бонна] вылетают светящиеся дуги в [Лиссабон, Осло и Киев], у городов появляются подписи

Три ошибки, из-за которых анимация выглядит дёшево

Много всего в одной сцене. Одна сцена, один предмет, одно изменение. Хотите показать три вещи, сделайте три сцены и склейте их.

Мелкий текст. На телефоне всё, что мельче 24 px, превращается в кашу. Если текст не помещается, сократите текст, а не шрифт.

Рывок на петле. Если первый и последний кадр разные, зритель видит скачок каждые 6 секунд. Попросите Claude проверить это отдельно. А если ставите анимацию на сайт, добавьте выключение для тех, у кого в системе включено «уменьшить движение»: в CSS это prefers-reduced-motion.

Сделать такой файл теперь может каждый. Выбрать, какая сцена нужна посту и что в ней сказать, по-прежнему работа человека. Где ещё ИИ экономит время в маркетинге, я собрал в статье про 5 применений ИИ для малого бизнеса.

Маленький шаг на сегодня

Возьмите сцену 12 «Число накручивается» и вставьте свою цифру: подписчики, клиенты, отзывы. Это 5 минут, и у вас готова анимация для следующего поста.

Я работаю в найме и не беру клиентов, поэтому всё, что знаю, рассказываю бесплатно. Все 16 промтов одним файлом лежат в закрепе моего Telegram-канала. Получилась своя сцена? Покажите мне, самые интересные разберу в канале.