Живая улица тушью на твоём сайте: у человечков не скользят ноги, а ночью горят окна

Посмотри на любой мультик, который ИИ слепил за минуту. Человечек идёт, а ноги будто едут по льду. Тело качается вверх-вниз, как поплавок.

Смотри, в чём дело. Обычно движение рисуют синусоидой: туда-сюда, вверх-вниз. Ноги при этом не знают, что стоят на земле.

10 ноября вышел навык line-art-animation для Claude Code. Он делает наоборот: походку не анимирует, а рассчитывает. Опорная нога едет назад ровно со скоростью шага. Поэтому на экране она стоит на месте, как настоящая.

Идея в одну строку: живая улица, нарисованная тушью, прямо на твоём сайте. Люди ходят, кот спит, а ночью в окнах загорается свет.

Где тут хитрость

Навык — это инструкция для агента плюс маленькая библиотека на TypeScript. Внутри четыре файла без зависимостей:

• ink.ts — перо. Рука или нога — это две открытые линии, которые не смыкаются на конце. Отсюда ощущение «нарисовано от руки».
• gait.ts — походка. Пятка отрывается раньше носка, бёдра приподнимаются над шагом и проседают, когда обе ноги на земле.
• motion.ts — пружины и маятники. Шарф, сумка и фонарь качаются сами.
• daynight.ts — время суток. Днём тёмные линии на тёплой бумаге, ночью светлые на индиго.

Всё рисуется живым SVG. Значит, картинка резкая на любом экране и реагирует на мышку.

А ещё в навыке записано, за что такие работы браковали. Например: нельзя делать весь набор героев за раз. Агент сначала показывает одного человечка и ждёт твоего «да». Иначе выходит одинаковое ИИ-нечто.

Чему научишься

• Подключать навык агенту. Одна папка, и Claude Code умеет новое.
• SVG и TypeScript. Как рисовать кодом и двигать нарисованное.
• Анимации по-взрослому. Чем расчёт отличается от «качать синусом».
• Ставить задачу по частям. Сначала один кусок, потом остальное.

Готовый стартовый промпт

Нужен Node 22.18 или новее. Положи навык в папку навыков Claude Code:

git clone https://github.com/JDhruv14/line-art-animation ~/.claude/skills/line-art-animation

Открой Claude Code в пустой папке проекта и дай задание:

Слабый промпт получит красивую, но мёртвую гифку. Сильный задаёт место, героев, реакции и проверку. И главное — «сначала только пекаря». Это то правило, на котором навык построен.

Что в итоге

Открываешь страницу. Тонкая линия, тёплая бумага. Пекарь шагает к лавке, и его фартук раскрывается на каждом шаге.

Ведёшь мышкой — дрожит вывеска и пар уходит вбок. Кликаешь по коту — он потягивается. Тянешь солнце за горизонт: бумага темнеет до индиго, а окна пекарни загораются.

Посмотри пример автора, чтобы понять планку. Там японская улица у канала: жители ходят по расписанию, лодочник гребёт, птицы взлетают от клика.

Хочешь пост в соцсети? В навыке есть покадровая запись. Скрипт снимает страницу, а ffmpeg склеивает ролик 1920 на 1080. Получается 30 секунд от утра до ночи.

И это не обязательно пекарня. Твой двор. Твой офис. Улица, где ты вырос.

Честно о рамках

Это долгий прогон агента. Он рисует, проверяет, переделывает — на это уходят токены.

Для видео нужен ffmpeg на компьютере. Сама страница работает в браузере без него.

Репозиторию день от роду. Лицензия MIT, но что-то может поменяться. Если пример не запустился — попроси агента почитать ошибку.

Живым человечка делает не красивая линия. А то, что его нога знает, где земля.

Источник: line-art-animation — навык Claude Code для анимаций тушью в SVG (GitHub)