Анимации для рилсов — кодом: как я собираю их с ИИ за час
Дашборды со счётчиками, воронки с бегущей точкой, живой звонок с расшифровкой — всё, что ты видишь в моих рилсах, сделано кодом. Ни одного дизайнера, ни одной нейрокартинки. Я описываю сцену словами, ИИ пишет код, я смотрю превью и правлю — тоже словами. Час — и вставка готова. Ниже метод целиком, с реальными промптами и граблями, на которые я наступил за тебя.
Всё началось с того, что стоки я забраковал
Когда дошло до вставок в рилсы, вариантов было три: купить стоковые футажи, заказать моушн-дизайнеру или генерить нейронкой. Стоки — чужой глянец, который видели все. Дизайнер — от недели и от приличных денег за каждую правку. Нейровидео — красиво секунды три, потом плывут буквы и пальцы.
А у меня под рукой был четвёртый вариант, которым я уже собрал целую систему продаж: ИИ, который пишет код. Анимация — это ведь тоже код. Так в моём конвейере появился Remotion.
Remotion: видео — это React-код, кадр за кадром
Remotion — инструмент, который превращает код в видео. Каждый кадр — это функция от номера кадра: кадр 30 — счётчик показывает 40, кадр 60 — уже 70. Пишешь логику один раз — получаешь ролик любой длины, в любом разрешении, со своим стилем.
Звучит как «нужно уметь программировать»? Нет. Ты не пишешь код — ты его заказываешь. Вот живое доказательство: этот счётчик прямо в статье работает по тому же принципу. Кликни по нему.
Тот самый счётчик из рилса про рекламу. В видео он точно такой же — только отрендерен в MP4.
Метод: ТЗ словами → код → превью → правки → рендер
Опиши сцену как ТЗ, не как желание
Не «сделай красивую анимацию», а: «вертикальный ролик 1080×1920, 15 секунд: тёмный фон #04050a, счётчик растёт от 31 до 100, кислотный цвет #c6ff4a, цифры влетают с пружиной, внизу подпись моноширинным».
ИИ собирает файл
Claude пишет компонент целиком. Твоя работа — вставить его в проект (одна команда) и открыть превью в браузере.
Правь словами
«Медленнее в начале», «добавь свечение», «цифра должна дёрнуться, когда доходит до ста». Каждая правка — минута. Это быстрее, чем объяснять дизайнеру.
Рендер одной командой
Получаешь MP4, кидаешь в CapCut поверх говорящей головы. Всё.
Вот ещё один виджет из моих рилсов — воронка с бегущей точкой. ТЗ для неё звучало так: «точка бежит по дорожке, этапы загораются по мере прохождения: заявка → звонок → пробное → оплата». Смотри, как она живёт здесь:
Мини-версия воронки из рилса «Путь клиента». Этапы условные, механика — один в один.
Три реальных промпта из моего конвейера
Забирай как есть — подставь свои цвета и цифры.
«Вертикальный ролик 15 сек. Путь клиента сверху вниз: 6 карточек-этапов, по трассе бежит светящаяся точка, этап загорается, когда точка проходит мимо. У этапов — цифры воронки. Тёмный фон, кислотный акцент, шрифты Unbounded + IBM Plex Mono».
«Экран живого звонка: волна аудио пульсирует, под ней построчно печатается расшифровка диалога МЕНЕДЖЕР/КЛИЕНТ, в конце влетает карточка с оценкой. Печать текста — посимвольно, как в терминале».
«Логотип собирается из ~5000 частиц: точки слетаются из разлёта в форму знака, после сборки дышат. Частицы сэмплируются из формы логотипа, разлёт детерминированный».
Грабли, на которые наступил за тебя
Math.random ломает рендер. Remotion рендерит кадры не по порядку — случайность должна быть детерминированной: псевдослучай от номера частицы, не от «настоящего» рандома. Скажи это ИИ прямо в ТЗ, сэкономишь итерацию.
Шрифты молча подменяются. В превью красиво, в рендере — системный шрифт. Решение: подключать шрифты через пакет Remotion, а не ссылкой на сервис шрифтов.
Вертикаль надо проверять на вертикали. Собранное на широком мониторе в 1080×1920 разъезжается: текст крупнее, отступы другие. Превью сразу ставь в размер рилса.
Обёртка без размера съедает содержимое. Самая коварная: блок с трансформацией без явной ширины и высоты схлопывается в ноль — и часть сцены просто исчезает из кадра. Если что-то «пропало» — первым делом проверяй размеры обёрток.
Как выглядит рендер
15 секунд — это 450 кадров. Каждый просчитывается кодом, как на этой шкале:
Шкала повторяет процесс рендера. В реальности 450 кадров считаются пару минут.
Почему кодом — сильнее, чем стоками
Стоки и нейрокартинки
Чужой стиль, который видели все. Каждая правка — новый поиск или новая генерация. Цифры на экране — декорация.
Свой код
Один стиль на рилсы, сайт и статьи — узнаваемость растёт с каждым роликом. Правка — одна фраза. И главное: в моих вставках живут реальные механики продукта — я показываю систему, а не картинку про систему.
Анимация кодом — это не про красоту. Это про то, что твой визуал становится продолжением твоего продукта, а не обёрткой вокруг него.
Хочешь научиться строить такое с ИИ?
Я беру 2–3 человека учиться на реальных проектах — не марафон, а производство под присмотром. Промпты, разборы и детали — в Telegram.
Telegram · KONSTANTА если ты владелец бизнеса и тебе нужна система, а не анимации — слово РАЗБОР в директ @la_konstant.