# hand-drawn-canvas-animation

> Рисованное кино без видеомодели: код оживляет кадры, как рука с тушью

Agent-скилл для коротких рисованных анимаций: каждый кадр рисуется на Canvas 2D в одном HTML-файле, headless Chrome рендерит кадры, ffmpeg собирает видео.

- Категории: MCP и Скиллы, Opensource, Создание видео
- Сайт сервиса: https://github.com/alesha-pro/tools/tree/main/skills/hand-drawn-canvas-animation
- Карточка в каталоге: https://ailibri.com/hand-drawn-canvas-animation
- Обновлено: 2026-09-18

## Описание

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 откатится к заливке по цвету, которая держится только на плоских фонах.

## Похожие сервисы в каталоге

- [Remotion Agent Skills](https://ailibri.com/remotion-agent-skills): Набор Agent Skills от команды Remotion: слэш-команды для Claude Code, Codex, Kimi Code и Cursor. Установка одной командой npx skills add remotion-dev/skills.
- [Anything2Explainer](https://ailibri.com/anything2explainer): Скилл для Claude Code и Codex: тема на входе — объясняющее видео с TTS-озвучкой, субтитрами и главами на выходе. Каждый кадр рисуется кодом.
- [Universal Modder](https://ailibri.com/universal-modder): Набор навыков, инструментов и базы знаний для ИИ-агентов: поиск игры, движок, сборка мода, генерация ассетов через fal и проверка мода в запущенной игре.
- [Hindsight](https://ailibri.com/hindsight): Память для AI-агентов: факты, опыт, поиск по смыслу и графу, размышление над банком. Свой сервер или облако с оплатой по использованию.
- [Genmo](https://ailibri.com/genmo): Genmo: открытая text-to-video модель Mochi, видео по промпту в плейграунде на Mochi 1.1, локальный запуск, ComfyUI и код на GitHub.
- [Godogen](https://ailibri.com/godogen): Godogen — генератор игровых проектов для Godot, Bevy и Babylon.js: агент Claude Code или Codex создаёт игру по описанию и генерирует ассеты.

---
Источник: AILibri — каталог нейросетей и ИИ-инструментов, https://ailibri.com