hand-drawn-canvas-animation — это скилл для ИИ-агента, который собирает короткие рисованные мультфильмы без видеомодели вообще. Каждый кадр рисует JavaScript на обычном Canvas 2D: один HTML-файл поверх общего ядра, никаких библиотек. Дальше headless Chrome снимает кадры, ffmpeg склеивает их в mp4, а тот же файл пишет музыку по той же таймлайн-сетке — поэтому звук попадает точно в монтажные стыки. Лежит в репозитории alesha-pro/tools как папка со скиллом, документацией и примерами.
Стилистика взята не с потолка: автор покадрово разобрал пять фильмов Kevin Ngo и пересобрал общее и различное в одно ядро с системой палитр и четырьмя финишами. В итоге получилось пять «взглядов», каждый со своей палитрой и способом наложения текстуры:
- ink — тёплая бумага, коричневые заливки, штриховка и зерно, построительные линии, синие «чертёжные» вставки;
- riso — кремовый картон, флуоресцентные краски в наложении, полутоновые точечные растры, точка-семя в каждом кадре;
- screen — плоские формы, морская синева и кремовое небо, ровная точечная сетка, один герой в центре, вокруг которого режется мир;
- pencil — тонкий графит, кремовое с углём, рваные секции, стены из squiggle-текста, засушенные растения;
- doodle — вырезанное фото реального предмета на пастельной бумаге, поверх него рисунки брашпеном, акварельная размывка и белая гуашь; есть ночной вариант, где свет лампы работает как персонаж.
Сверх плоского кадра подключаются три движка, и их можно использовать вместе. Found motion протянет в штрихи реальное движение — из готового моушн-стади или из вашего собственного видео, обводя позу за позой. Sand превратит кадр в поднос с песком на подсвеченном стекле: его сыплют, стирают, разметают и сдувают, ничего не перерисовывая. Paper in space поставит нарисованные листы в трёхмерную комнату — страницы переворачиваются, вырубки поднимаются, появляются свет и тени. Любой из вариантов перекрашивается одной строкой: пресет, пресет с правками, сдвиг по тону или дуотон. Рисуется всё на 12 кадрах в секунду и удваивается до 24 — как классическую целлулоидную анимацию снимают «на двойках», и на ощущение это влияет сильнее любой текстуры.
Работа выглядит так: вы просите фильм, задаёте тему и look — скажем, «20 секунд, жизнь запроса внутри GPU-сервера, riso, точка-семя как якорь». Агент напишет бит-лист, подберёт или выведет палитру, отрендерит style sheet и palette sheet для проверки, соберёт персонажей, пройдёт сцены по одной через одиночные кадры, потом сделает полный рендер и подчистит то, что вылезло на контрольном листе. Руками тоже можно: скрипт render.mjs за пару секунд выдаст сетку из 24 равномерных кадров, умеет точечные кадры, флаги формата и разрешения, mp4 со вшитым саундтреком и contact sheet. Отдельный photo.mjs вырежет найденное фото из фона и зарегистрирует его как data URL с проверочной сеткой координат.
В комплекте SKILL.md с процедурой и чек-листом ревью, ядро core.js, шаблон фильма, справочники по стилю, палитрам, тридцати девяти сценным рецептам и архитектуре, а также готовые примеры — от 9,5-секундного ink-фильма про муху до 47-секундной работы со всеми тремя движками сразу. Устанавливается копированием папки в ~/.agents/skills/ (или в .agents/skills/ внутри проекта). Для рендера нужны Node 18+, Chrome либо Chromium и ffmpeg — puppeteer-core берёт уже установленный браузер и ничего не докачивает. Обводка видео потребует Python с numpy, scipy, scikit-image и pillow, а doodle-режим чище всего режет фото, если в PATH есть rembg; без него photo.mjs откатится к заливке по цвету, которая держится только на плоских фонах.
Блог