Технология без компромиссов
Разработчик из сообщества GitHub представил агентный навык (agent skill) для Claude Code и Codex, который позволяет создавать анимацию в стиле «hand-drawn» (ручная рисовка). В отличие от современных трендов на использование нейросетей для генерации видео или тяжелых 3D-пакетов вроде Blender, этот проект опирается на классические веб-технологии: HTML5 Canvas 2D, JavaScript и Web Audio API.
Процесс рендеринга происходит локально: HTML-плеер загружает модули рисования и таймлайна, Headless Chrome отрисовывает кадры, а FFmpeg кодирует итоговое видео. Звуковое сопровождение (музыка и эффекты) также синтезируется программно на основе того же таймлайна. Это решение делает процесс полностью воспроизводимым, легким и не требующим мощного GPU для генерации.
Пять уникальных визуальных стилей
Ключевая особенность проекта — система палитр и финишных обработок, позволяющая имитировать различные художественные материалы. Разработчик проанализировал работы аниматора Кевина Нго и других мастеров, чтобы воссоздать их техники в коде. Ниже приведена таблица доступных визуальных стилей:
| Стиль (Look) | Палитра | Техника финишной обработки | Описание эффекта |
|---|---|---|---|
| Ink | paperInk | Контроль давления, штриховка | Уверенные мазки кисти, контрастные черные массы и белые пробелы |
| Riso | risoPop | Наложение цветов, смещение регистрации | Имитация рисовой печати с видимой текстурой бумаги и полутонами |
| Screen | screenSea | Плотные плоские формы, трафаретные края | Непрозрачные чернила с опциональными полутонами и эффектом износа |
| Pencil | pencilMinimal | Тонкий графит, открытые контуры | Легкие конструктивные линии и штриховка, зависящая от давления |
| Doodle | doodlePastel | Акварель, гуашь, вырезанные фото | Комбинация фото-объектов на пастельной бумаге с дорисовками маркером |
Движки анимации: от песка до 3D-книги
Помимо стандартной рисовки по кадрам (whole-pose drawings), проект включает три специализированных «движка», которые расширяют возможности 2D-Canvas:
- Found Motion (Roto): Трассировка реального движения. Пользователь может загрузить видео, и скрипт (roto.js/roto.py) переведет кадры в векторные штрихи, сохраняя естественность движения.
- Sand Animation: Симуляция рисования на песке. Камера фиксирует процесс «в один присест» (one unbroken take), где песок насыпается, стирается и сдувается, создавая плавные морфинги без перерисовки ключевых кадров.
- Paper in Space: Эффект pop-up книги. Листы бумаги «встают» в 3D-пространстве, поворачиваются, отбрасывают тени, что создает иллюзию физического объекта в виртуальной комнате.
Практическое применение и производительность
Проект демонстрирует высокую эффективность. Пример полного короткометражного фильма «Becoming» (60 секунд, 5 стилей, анимация песка и pop-up) генерируется и рендерится локально. По умолчанию анимация работает в 24 кадра в секунду, но система поддерживает гибкое управление экспозицией (ones, twos, held drawings) для каждого персонажа и элемента отдельно.
Для разработчиков и AI-агентов доступен полный набор скриптов: от `render.mjs` для кодирования MP4 с наложенным звуком до `photo.mjs` для вырезания объектов с фотографий. Установка осуществляется простым копированием папки в директорию `.agents/skills/`, что делает инструмент готовым к использованию в среде Claude Code или Codex для автоматизации творческих задач.
Источник: Github ↗