adminosinthub-bit/Claude-Video-Skill

HTML → видео: несколько вариантов, выбор лучшего, финальная сборка

Claude сильнее всего в дизайне на HTML/CSS. Поэтому видео делаем так: пишем анимацию в HTML, рендерим её в видео, смотрим на результат глазами (кадры), сравниваем варианты и улучшаем.

Требования

• node + playwright (с Chromium), ffmpeg. Проверка: bash scripts/check-env.sh.

Быстрый старт

cp references/template-scenes.html work/<название>/v1.html     # шаблон на движке сцен
node scripts/render.mjs work/<название>/v1.html --preset vertical-preview --duration 20 --out work/<название>/v1.mp4

• references/engine.js — движок сцен: фон, субтитры с подсветкой (*слово*), прогресс, переходы, easing (E.pop, E.type, E.set).
• references/parts.js — детали: маскот P.bot, иконки P.icon, окно macOS P.win, пузыри чата.
• references/design-notes.md — что делает ролик «живым» (сюжет, хук, ритм, субтитры). Прочитай перед написанием вариантов.
• Примеры готовых роликов: examples/ (claude-ad — 16:9; chatgpt-ad — 9:16, 25 с; duolingo-ad — 9:16, 40 с, 60 fps с сюжетом и демонстрациями; claude-self-ad — 9:16, 39 с, 60 fps, реклама самого Claude с мета-поворотом).
• Размер файла: ролик 40 с / 60 fps ≈ 10 МБ; если нужен лимит меньше — --fps 30 или перекодируй ffmpeg -i in.mp4 -crf 24 out.mp4.

Главные принципы качества

1. Показывай, а не рассказывай. Любое утверждение в ролике — это сцена-доказательство, а не надпись.

   Утверждение	Что показать
   «Пишет код»	печатается запрос, затем по строкам появляется код
   «Объясняет понятно»	реальная ошибка (she drink), подсветка и правило «+s», сова с пояснением
   «Учит на практике»	палец тапает по словам, фраза собирается, зелёная панель «Правильно!»
   «Серия 346 дней»	счётчик 1→346 с огоньком, календарь заполняется волной, уведомление, поздравление с конфетти
   «Игра»	таблица лиги, где строка героя поднимается на 1-е место, и +XP

2. Описывай происходящее. В каждой сцене два слоя текста: маленький заголовок-ярлык сверху (<div class="kick">: «Урок», «Лига») и субтитр внизу с подсвеченным ключевым словом (cap: 'Разбирает *ошибки* понятно'). Полные фразы лучше однословных лозунгов.

3. Плавность. Финал рендерится в 60 fps. Всё живёт непрерывно: пружинные появления (E.spring, E.pop), медленный наезд камеры (cam: [1, 1.05]), покачивание маскота, моргание (P.blink), касания пальцем с рябью (P.touch), счётчики (E.count), переходы circle/wipe/left. Не оставляй статичных кадров дольше ~0.5 с.

4. Сюжет: хук (боль/юмор) → демонстрации → «лучшие качества» → кульминация (награда/результат) → призыв. 30–45 с для рекламы.

5. Три варианта — три разные идеи, а не три раскраски (например: «счётчик серии», «урок вживую», «диалог с маскотом»). Затем финал собирается из лучших сцен всех вариантов.

Процесс

1. Бриф

Уточни (или выбери разумные значения по умолчанию): тема/текст, аудитория, длительность (реклама 20–30 с, история до 60 с), формат (по умолчанию вертикальный 1080×1920 для Reels/Shorts/TikTok; 1920×1080 и 1080×1080 — по запросу), fps (30), стиль, цвета/шрифты. Составь короткую раскадровку: хук → проблема → решение → демо → призыв. Для рекламы бренда не используй официальные логотипы — рисуй своего маскота.

2. Три и более РАЗНЫХ варианта

Создай рабочую папку work/<название>/ и в ней v1.html, v2.html, v3.html (можно больше). Варианты должны отличаться концепцией, а не мелочами. Например: (а) история с маскотом, (б) продуктовое демо с карточками, (в) быстрые склейки с крупной типографикой. Разная композиция, палитра, ритм. Каждый файл — самодостаточный HTML (без внешних загрузок, шрифты — системные или встроенные). Правила анимации — в references/animation-contract.md; стартовый шаблон — references/template.html.

3. Рендер каждого варианта

Варианты — в превью-разрешении (быстро), финал — в полном:

node scripts/render.mjs work/<название>/v1.html --out work/<название>/v1.mp4 --preset vertical-preview --duration 21
node scripts/render.mjs work/<название>/final.html --out work/<название>/final.mp4 --preset vertical --fps 60 --duration 40 [--audio music.mp3]

Рендер детерминированный и параллельный (по числу ядер): время ставится вручную на каждый кадр, рывков и пропусков нет. --from 5 --to 9 рендерит только фрагмент. Один кадр без видео: node scripts/frame.mjs v1.html 3.5,7 work/<название>/frames --width 540 --height 960.

4. Анализ — обязательно смотреть

bash scripts/contact-sheet.sh work/<название>/v1.mp4 work/<название>/v1-sheet.png 12

Открой *-sheet.png и отдельные кадры через Read (изображения читаются визуально). Оцени по references/rubric.md (сумма из 8 критериев по 5 баллов): читаемость, иерархия, ритм, плавность, баланс, цельность, соответствие брифу. Для каждого варианта запиши: баллы по критериям, что получилось лучше всего, что слабее всего. Не оценивай по коду — только по тому, что видно на кадрах. Если что-то неясно — сделай кадры плотнее или в нужные моменты: bash scripts/contact-sheet.sh <mp4> <png> 12 <start_s> <end_s>.

5. Выбор лидера и синтез

• Выбери лучший вариант по суммарной оценке.
• Составь список «заимствований»: конкретные удачные решения из остальных вариантов (например, «типографика из v2», «анимация появления из v3», «палитра из v1»).
• Создай final.html на базе лидера и внеси эти правки. Исправь слабые места лидера.

6. Итерация и проверка финала

Отрендери final.mp4, снова сделай contact sheet, сравни с лидером. Если финал не лучше лидера по рубрике — исправь и повтори (максимум 3 итерации). Затем покажи пользователю результат: путь к final.mp4, краткую таблицу оценок вариантов и список того, что заимствовано откуда.

7. Звук (по желанию)

ffmpeg -i final.mp4 -i music.mp3 -shortest -c:v copy -c:a aac final-audio.mp4

Правила

• Не копируй фирменных маскотов и логотипы брендов: рисуй своего персонажа, имя бренда — только текстом.
• Не пропускай шаг 4: решение принимается по увиденным кадрам, не по предположениям.
• Все артефакты складывай в work/ (в .gitignore), в репозиторий коммить только навык и примеры.
• Если Chromium/ffmpeg недоступны — скажи об этом прямо, не имитируй результат.