Every frame is code 🎬

Собрал и выложил motion-kit: набор знаний для AI-агентов, которые делают графику кодом. Это анимационные ролики, эксплейнеры, кинетическая типографика, переходы, 3D-сцены и браузерные игры с хорошим game feel.

Прям кайфую с того, как это работает. Последнее время было много роликов с возможностями того же Опуса, но каких-то прям готовых промптов и гайдов не нашел. А из коробки "сделай красиво" не работало от слова совсем. Надеюсь кому-то пригодится. Сам планирую использовать для небольших гайдов и демок, в том числе и по работе. Ну а что, выглядит очень эффектно!)

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

Прикрепленный ролик сделан именно так: один HTML-файл, ни одной внешней картинки и ни одного аудиофайла.

▪️ Canvas 2D: огонь из 650 частиц, гравюра с «дрожащей» линией, 12 палитр в одной композиции
▪️ Three.js: сфера, bloom и 20 000 частиц на шейдере
▪️ GLSL-переходы: прожиг, волна, luma-вайп
▪️ Game feel: hitstop, тряска, squash & stretch, speed ramp
▪️ Музыка и звуки синтезируются в том же файле на Web Audio и привязаны к тем же событиям, что и картинка
▪️ Покадровый рендер в MP4 через Chrome и ffmpeg, проверка по контакт-листу

Репо тут - с вас по звёздочке. Если есть идеи, что можно улучшить - пишите.

P.S Выложил еще и на Pages, там красивее - https://kiselas.github.io/every-frame-is-code/