Анимация сборки из деталей LEGO в стиле фирменной инструкции. Каждый кадр нарисован кодом на Canvas 2D, без картинок, моделей и 3D-движка. Модель задается списком шагов, а движок сам рисует страницу инструкции со списком деталей, номером шага, падающими кирпичами и желтой обводкой новых деталей, а в конце поворачивает готовую модель.

Внутри лежит пример, рыжий кот из 106 настоящих деталей. Каждая пара деталь плюс цвет сверена с каталогом BrickLink, морда держится на кирпичах с шипом сбоку, печати нет.

Готовые ролики лежат в папке media, вертикальный cat.mp4 и горизонтальный cat-16x9.mp4.

Откройте index.html в браузере. Пробел или клик ставят на паузу, стрелки листают по кадру.

• index.html?format=horizontal горизонтальная версия 1920×1080
• index.html?model=microduck второй пример, мини-робот
• index.html?view=parts каталог всех 47 деталей
• index.html?t=12 открыть на 12-й секунде

Нужны Node.js 20 или новее и ffmpeg.

npm install
npx playwright install chromium
node tools/render.cjs --model cat
node tools/render.cjs --model cat --format horizontal

Ролики появятся в папке exports.

Фото превращается в мозаику из круглых и квадратных плиток 1×1 на черных пластинах 16×16, как в наборах LEGO Art. Один шип равен одному пикселю, а каждой клетке достается настоящая плитка в цвете, который реально выпускается. Цвета сравниваются так, как их видит глаз (CIELAB, CIEDE2000). Палитра подбирается под конкретное фото, соседние плитки смешиваются в промежуточные тона, одиночные точки убираются. Черно-белое фото определяется само и собирается из четырех серых.

На выходе получаются картинка, карта сборки с номером цвета на каждом шипе, список деталей с номерами BrickLink и ролик. В ролике камера летит вдоль фронта сборки, а в конце встает над портретом, и рядом появляется фото. Пример выше собран из студийного портрета, мозаика 80×80, 6400 плиток. Целиком ролик лежит в mosaic.mp4.

node tools/mosaic.cjs photo.jpg --size 80 --video
node tools/mosaic.cjs photo.jpg --video --format vertical
node tools/mosaic.cjs photo.jpg --frames 3,9,15

Результаты ложатся в папку exports проекта, вертикальный ролик называется <имя>-build-vertical.mp4. Инструмент понимает JPEG, PNG, WebP, GIF, BMP и AVIF. HEIC с айфона сначала пересохраните в JPEG. Прозрачный фон ложится на белый.

Или откройте mosaic.html, перетащите фото и крутите настройки в браузере. Оттуда же скачиваются картинка, карта сборки и видео. Видео в браузере пишется в реальном времени, поэтому на больших мозаиках может дергаться, ровное дает консольная команда. Фото никуда не отправляется.

1. Скопируйте src/models/cat.js в src/models/<имя>.js, поменяйте шаги и в последней строке замените root.MODELS.cat на root.MODELS.<имя>.
2. Добавьте файл строкой <script src="src/models/<имя>.js"></script> в index.html.
3. Проверьте модель командой node tools/check-model.cjs <имя>. Скрипт найдет пересекающиеся детали и детали, которые ни на чем не держатся.
4. Откройте index.html?model=<имя> и отрендерьте ролик.

Координаты, крепление деталей сбоку и частые ошибки описаны в reference/modeling.md, все детали и цвета собраны в reference/parts.md.

Папка целиком является скиллом для Claude Code и других агентов с поддержкой SKILL.md. Установите ее так.

git clone https://github.com/siliconbag/lego-build ~/.claude/skills/lego-build

Дальше просто попросите агента, например «собери из лего сову и сделай горизонтальный ролик». Агент спроектирует модель из настоящих деталей, сверит цвета по каталогу, прогонит проверку и отрендерит видео. Инструкция для агента лежит в SKILL.md.

Стиль подсмотрен у фанатского буклета Microduck, где LEGO-модель робота Pollen Robotics собрана из 1113 деталей.

LEGO является товарным знаком LEGO Group, которая не спонсирует и не одобряет этот проект. Модели проверены только на компьютере, живьем их никто не собирал.

MIT