Моушн-графика в Claude: кратко о главном
🎯 О чём этот конспект: Пошаговое руководство по созданию профессиональных 2D-анимаций, объясняющих видео (explainer videos) и инфографики внутри Claude без использования text-to-video моделей (Sora, Runway, Kling) и сторонних фреймворков (Remotion, Hyperframes). Метод основан на генерации исполняемого JavaScript-кода (HTML5 Canvas / Web Audio API), который отрисовывает каждый кадр и процедурно синтезирует звуковые эффекты прямо в браузере с идеальной синхронизацией под закадровый голос.
👤 Кому будет полезно: Вайбкодерам, контент-мейкерам, создателям YouTube-роликов и техническим фаундерам, которым нужны чистые векторные моушн-видео с возможностью точечного редактирования через промпты.
✨ Что получите: Готовый пайплайн генерации видео из текста или готового сценария, технику синхронизации анимации по таймкодам word-level SRT, метод переноса референсных стилей через чистый код и способ упаковки готовых стилей в Claude Skills.
1. Отказ от Text-to-Video и тяжелых фреймворков в пользу автономного JavaScript
Контекст: Традиционные нейросети генерации видео страдают от визуальных артефактов, «мыла», морфинга и неспособности корректно отображать текст или точные диаграммы. Альтернативный подход с использованием библиотек вроде Remotion или Hyperframes требует развертывания сложного локального Node.js-окружения, установки зависимостей и настройки сборщиков. Решение заключается в том, чтобы заставить LLM писать полностью автономный, самодостаточный JavaScript-код, использующий Canvas API и Web Audio API. Вся графика рендерится в реальном времени внутри артефактов браузера, а звуки создаются процедурно через встроенный синтез частот без внешних ассетов.
Тайминг: , ,
Выгода: Полный контроль над каждым кадром и текстом, нулевая стоимость аренды GPU-серверов для рендера, мгновенные точечные правки отдельных элементов за 5–10 секунд.
Как применить:
- Шаг 1: Формирование архитектурного запроса к Claude — Claude Artifacts — Укажите модели требование писать только vanilla JavaScript без сторонних CDN-библиотек, использующий HTML Canvas для отрисовки графики и Web Audio API для процедурных звуковых эффектов.
- Шаг 2: Реализация процедурного звука — Claude — Попросите модель создать встроенную функцию звукового движка (SFX), которая синтезирует щелчки, звуки появления элементов (whoosh, pop, click) через AudioContext.
- Шаг 3: Запуск и просмотр — Браузер / Claude Artifacts — Запустите сгенерированный артефакт; анимация будет воспроизводиться плавно с частотой 60 FPS без необходимости предварительного рендеринга видеофайла.
// Пример базовой структуры процедурного звука, который генерирует Claude
function playPopSound() {
const ctx = new (window.AudioContext || window.webkitAudioContext)();
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(400, ctx.currentTime);
osc.frequency.exponentialRampToValueAtTime(800, ctx.currentTime + 0.08);
gain.gain.setValueAtTime(0.3, ctx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.08);
osc.connect(gain);
gain.connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.08);
}Результат: Автономное интерактивное полотно в браузере, воспроизводящее чистую векторную анимацию с синхронными звуковыми эффектами без единого видеофайла.
2. Метод передачи эталонного кода в промпт для 100% консистентности стиля
Контекст: Когда вы отправляете в Claude или ChatGPT видеофайл в качестве референса стиля, нейросеть не смотрит само видео. Она разбивает его на несколько статичных скриншотов с потерей плавности, таймингов и физики движения. Из-за этого генерация «по визуальному референсу» всегда дает сильные галлюцинации и отклонения от нужной стилистики. Если же передавать модели исходный исполняемый JavaScript-код эталонного стиля, Claude не пишет архитектуру с нуля, а лишь модифицирует логику сцены и объекты. Это обеспечивает одинаково высокий результат как на флагманской Claude 3.5/3.7 Sonnet, так и на Claude 3 Opus или моделях OpenAI.
Тайминг: , ,
Выгода: Стабильное сохранение фирменного визуального стиля (шрифты, скругления, физика пружин, цветовая палитра) на любых темах с первой попытки без лишней траты лимитов токенов.
Как применить:
- Шаг 1: Выбор базового пресета стиля — Библиотека стилей / Собственная заготовка — Выберите желаемый стиль (например, Glassmorphism, 16-bit Pixel, Chalkboard, Cut Paper Diorama, Flat Vector Science).
- Шаг 2: Сборка промпта с включением кодовой базы — Текстовый редактор / Prompt Builder — Сформируйте промпт, в тело которого помещается полный JavaScript-код рабочего примера выбранного стиля, а в конце указывается задача по изменению сценария.
- Шаг 3: Отправка в Claude — Claude Chat — Отправьте промпт (он прикрепится как объемный текстовый блок paste). Модель прочитает алгоритмы интерполяции, функции отрисовки и сохранит идентичную динамику в новой анимации.
You are an expert motion graphics designer and JavaScript developer.
Below is the reference JavaScript code that defines the visual style, physics, rendering loops, and procedural sound effects:
--- BEGIN REFERENCE CODE ---
[ВСТАВИТЬ ПОЛНЫЙ JAVASCRIPT/CANVAS КОД СТИЛЯ]
--- END REFERENCE CODE ---
Task:
Create a new 15-second motion graphics explainer video in the exact same visual style and timing dynamics as the reference code above.
Topic: How Noise-Cancelling Headphones Work.
Ensure the procedural audio effects match the visual transitions. Return only the complete, updated HTML/JS artifact.Результат: Новая сцена полностью сохраняет эстетику референса (от динамики линий до структуры теней) без необходимости многократных правок промпта.
3. Двухэтапная валидация: генерация сториборда перед созданием анимации
Контекст: Генерация полноценного моушн-кода объемом в сотни строк требует существенного расхода контекстного окна и времени генерации. Если концепция визуализации выбрана нейросетью неудачно, приходится перегенерировать весь код заново, расходуя лимиты запросов. Для решения этой проблемы в пайплайн внедряется этап генерации визуального сториборда (Storyboard). Claude сначала выводит статические кадры ключевых точек (visual beats) истории, что позволяет оценить композицию, читаемость схем и логику подачи информации до запуска рендера в коде.
Тайминг: , ,
Выгода: Экономия до 60% времени и лимитов токенов за счет утверждения сценария на этапе превью и точечной корректировки смысловых блоков.
Как применить:
- Шаг 1: Активация запроса сториборда — Claude Chat — При отправке запроса добавьте инструкцию сначала сгенерировать 3–5 ключевых статических сцен в виде векторных иллюстраций/компонентов.
- Шаг 2: Анализ ключевых битов (Beats) — Claude Artifacts — Оцените компоновку элементов: понятна ли зрителю физика процесса (например, входящая звуковая волна и противофаза в шумоподавлении).
- Шаг 3: Внесение текстовых правок — Claude Chat — При необходимости скорректируйте сцену запросом: «Сделай волну инвертированного звука красного цвета и увеличь толщину линий».
- Шаг 4: Переход к полной кодогенерации — Claude Chat — Отправьте команду утверждения: «Сториборд отличный, генерируй полный анимированный код с таймингами и звуком».
Before generating the full animated motion graphics code, generate a visual storyboard showing 4 key visual beats of the explanation.
Display them side-by-side as static SVG/Canvas illustrations so I can review the visual composition and narrative flow.
Once approved, I will ask you to compile the final animated code.Результат: Утвержденный визуальный концепт ролика, гарантирующий отсутствие сюрпризов при финальной компиляции анимации.
4. Пословная синхронизация анимации с закадровым голосом через SRT
Контекст: Главная сложность создания объясняющих видео — идеальное совпадение появления графических объектов с произносимыми словами диктора. Приблизительные тайминги приводят к рассинхрону, из-за чего видео выглядит непрофессионально. Решение строится на генерации дикторской дорожки через качественный TTS (например, Gemini TTS в Google AI Studio или ElevenLabs) с последующим созданием субтитров с пословной разметкой (word-level SRT). Claude использует эти миллисекундные метки каждого слова как триггеры для запуска конкретных функций анимации внутри цикла requestAnimationFrame.
Тайминг: , , ,
Выгода: Идеальная телевизионная точность моушн-дизайна: графический элемент вылетает строго в ту миллисекунду, когда диктор произносит ключевое слово.
Как применить:
- Шаг 1: Создание озвучки в Google AI Studio — Google AI Studio — Перейдите в раздел моделей, выберите аудио-модель
Gemini Flash TTS, задайте стиль речи (например,Narration), вставьте текст сценария и экспортируйте полученный аудиофайл. - Шаг 2: Получение пословного SRT — Claude / Whisper / ElevenLabs — Загрузите аудиофайл в Claude или локальный Whisper и запросите транскрипт с пословными таймкодами.
- Шаг 3: Внедрение таймингов в промпт видео — Claude Chat — Передайте полученный массив слов и меток времени в Claude вместе с задачей на анимацию.
- Шаг 4: Загрузка аудио в артефакт — Claude Artifacts — В сгенерированном окне нажмите кнопку «Load Voiceover» или перетащите аудиофайл мышью (drag-and-drop). Плеер свяжет воспроизведение аудиофайла с временной шкалой Canvas-анимации.
Give me a word-level SRT transcript for this audio file that I can copy paste.Create a synchronized Canvas motion graphics video for the following topic: "How stars are born".
Visual Style: Flat Vector Science.
Audio Sync: Use the following word-level timestamps to trigger visual events, labels, and state transitions:
1
00:00:00,100 --> 00:00:00,500
Stars
2
00:00:00,520 --> 00:00:00,850
begin
3
00:00:00,870 --> 00:00:01,100
as
4
00:00:01,120 --> 00:00:01,450
huge,
5
00:00:01,500 --> 00:00:01,800
cold
6
00:00:01,820 --> 00:00:02,300
clouds...
Include an audio loading interface in the HTML so I can drag and drop my voiceover file. Sync the animation loop currentTime to the audio element currentTime.Результат: Готовое видео с живой озвучкой, где физические взрывы, вспышки, масштабирование и текстовые плашки срабатывают ровно на нужных звуковых акцентах.
5. Упаковка кастомных стилей анимации в Claude Skills для мгновенного вызова
Контекст: Каждый раз копировать огромный массив эталонного JavaScript-кода в окно чата неудобно: это забивает буфер обмена и требует постоянного обращения к внешним базам данных стилей. Когда вы настроили идеальный визуальный стиль под свой бренд (цвета, шрифты, динамика сглаживания, звуковые сигналы), этот пайплайн можно инкапсулировать прямо в настройки модели через инструмент Claude Skills (или Custom Instructions / Projects). Это позволяет в дальнейшем вызывать генерацию видео в один короткий промпт.
Тайминг:
Выгода: Сокращение времени подготовки промпта с 5 минут до 10 секунд; стандартизация визуального языка контента для всей команды.
Как применить:
- Шаг 1: Финализация кастомного шаблона — Claude Chat — Доведите генерацию до идеала, отрегулировав цветовые константы, скорость движения объектов и шрифтовые пары под стиль вашего канала.
- Шаг 2: Запрос на создание системного скилла — Claude Chat — Попросите модель упаковать полученный код и правила поведения в структуру Claude Skill или системную инструкцию Project Knowledge.
- Шаг 3: Сохранение в Claude Projects — Claude Settings / Projects — Добавьте сформированный блок инструкций в Custom Instructions проекта под названием, например,
skill-motion-explainer. - Шаг 4: Вызов генерации по короткому запросу — Claude Chat — В новом чате просто напишите: «Используй мой стиль Flat Science для темы: Принцип работы квантового компьютера».
I am completely satisfied with this visual style, timing engine, and audio design.
Please convert this entire setup into a reusable Claude Skill definition.
Extract the core JavaScript engine, canvas setup, audio synthesizers, and aesthetic rules into a clean template with placeholder slots for new narrative topics and transcripts.Результат: Собственная библиотека переиспользуемых пресетов анимации внутри рабочего окружения Claude, готовая к вызову в одно предложение.
Моушн-графика в Claude: ответы на частые вопросы
В: Обязательно ли уметь программировать на JavaScript, чтобы создавать такие видео? О: Нет, практических знаний кода не требуется. Пользователь выступает в роли арт-директора: вы копируете готовый код стиля из базы или референса в промпт, задаете тему своими словами, а Claude самостоятельно модифицирует логику рисования Canvas. Если требуются правки (замедлить анимацию, сменить цвета, увеличить текст), достаточно попросить об этом модель на обычном русском или английском языке.
В: Какая модель Claude лучше справляется с генерацией: Opus или Sonnet? О: Обе модели дают сопоставимый профессиональный результат, если в промпт включен эталонный исходный код. Claude 3.5 / 3.7 Sonnet отлично справляется с кодингом Canvas-сцен и работает значительно быстрее, в то время как Opus немного глубже улавливает сложные метафоры при сторибординге без референса. В большинстве случаев достаточно возможностей Sonnet.
В: Как генерируются звуковые эффекты, если не используются внешние MP3-файлы? О: Все звуки (клики, свисты, электронные сигналы, хлопки) синтезируются с помощью встроенного в браузер Web Audio API. В JavaScript создаются осцилляторы (OscillatorNode) с определенной частотой (синусоида, пила) и узлы громкости (GainNode) для затухания, что формирует процедурные звуки без скачивания внешних файлов.
В: Как экспортировать готовый результат из Claude Artifacts в стандартный видеофайл (MP4/WebM)? О: Поскольку анимация работает на HTML5 Canvas, ее можно записать прямо в браузере с помощью встроенного JavaScript API MediaRecorder (добавив в код кнопку «Record/Download MP4»), либо захватить окно браузера через OBS Studio / экранную запись в разрешении 4K 60 FPS.
В: Почему генерация через чистый JavaScript лучше готовых инструментов вроде Remotion? О: Remotion — мощный фреймворк на базе React, но он требует установки Node.js, зависимостей npm, настройки сборщиков и рендера через терминал. Метод чистого JavaScript работает «из коробки» на любом устройстве прямо в веб-интерфейсе Claude без установки ПО.
В: В чем разница между строчным (line-by-line) и пословным (word-level) SRT для синхронизации? О: Построчный SRT дает тайминг на целую фразу (3–5 секунд), из-за чего анимация привязана к началу предложения. Пословный SRT дает таймкод каждого отдельного слова, позволяя триггерить визуальные эффекты строго в момент ударения на ключевом слове, что делает видео динамичным. Для коротких роликов (до 60 секунд) предпочтителен пословный вариант.
В: Работает ли этот метод в ChatGPT или других LLM? О: Да, если передавать промпт с полным эталонным кодом, ChatGPT (GPT-4o / Canvas) также способен модифицировать сцены. Однако, по тестам автора, Claude генерирует более чистый Canvas-код с лучшим чувством композиции и таймингов движения.
Моушн-графика в Claude: инструменты и ссылки из видео
- Google AI Studio — Облачная среда разработки от Google, использовалась для генерации дикторского голоса с помощью модели Gemini Flash TTS —
https://aistudio.google.com - ElevenLabs — Платформа генерации реалистичного голоса и автоматического извлечения транскриптов с точными таймкодами —
https://elevenlabs.io - Claude (Anthropic) — Основная языковая модель и среда Artifacts для написания, компиляции и интерактивного воспроизведения анимаций —
https://claude.ai - Remotion — Фреймворк для создания видео с помощью React и кода (упомянут как более сложная альтернатива) —
https://www.remotion.dev - Hyperframes — Инструмент создания анимаций на коде для AI-пайплайнов — упомянут в видео
- Style Atlas (База из 86 стилей) — Бесплатная библиотека пресетов и готовых промптов моушн-графики — упомянута автором (ссылка в описании оригинального видео)
Конспект создан на основе видео «Claude Video Generator (No AI Video Needed)» канала Matt Wolfe / Future Tools. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=Ge1B-Ok1Pfk
