Из видео —
в живого персонажа.

Три исходных ролика, один движок на чистом JavaScript. Курсор выбирает позу, Canvas показывает нужный кадр, а экспоненциальное сглаживание делает переход мягким. Ни видеоплеера, ни сторонних библиотек, ни сетевых сервисов.

1. Сначала изучаем движение

Ролик с любопытным котом: 121 кадр, 5,04 секунды. Лисёнок и кот с кофе: по 97 кадров, 4,04 секунды. Все три — 1280 × 720, 24 кадра/с. Длительность получена через FFprobe, а не из названия промпта.

Нельзя просто приравнять левый край экрана к началу видео, а правый — к концу. В исходниках персонажи несколько раз меняют направление. Поэтому для каждой сцены отдельно выбраны позы слева, по центру и справа. У лисёнка остаются движения лап и корпуса; это часть исходного ролика, а не неподвижная модель с отслеживанием глаз.

2. Сохраняем каждый кадр

FFmpeg собирает единый горизонтальный PNG со всеми кадрами шириной 320 пикселей каждый. Для 121 кадра получается изображение шириной 38 720 пикселей. Оригинальные MP4 и PNG лежат рядом, без изменений.

Для сайта те же кадры уложены в атлас по 12 в строке. Это техническая оптимизация: состав и порядок кадров не меняются. Десктоп использует кадры 480 × 270, мобильный вариант — 320 × 180. Загружается только выбранный персонаж; горизонтальные PNG не входят в начальную загрузку.

# Windows PowerShell, из корня eclipse-library:
node scripts/prepare-character-heroes.mjs

# Проверки кадров, навигации и поведения:
node --test scripts/character-heroes.test.mjs

3. Курсор управляет позой

Положение по горизонтали преобразуется в индекс кадра. Переход рассчитывается с учётом прошедшего времени, поэтому скорость реакции не зависит от частоты монитора. Уход курсора, окончание касания и клавиша Home возвращают персонажа в исходную позу. Кнопка «Посмотреть движение» проигрывает все кадры с исходными 24 кадрами/с один раз.

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

4. Не тратим ресурсы в покое

Canvas перерисовывается только при смене кадра. Когда персонаж остановился, цикл requestAnimationFrame завершается. В скрытой вкладке движение приостанавливается. Атласы предыдущего персонажа освобождаются, устаревшие запросы отменяются. При ошибке или тайм-ауте загрузки остаются постер и кнопка повтора.

Настройка «уменьшение движения» отключает анимацию. Есть видимый фокус, ползунок направления и клавиатурное управление. Для проверки можно открыть спокойный режим или фиксированный кадр на второй секунде.

Исходники и производные файлы

Материалы предоставлены пользователем для этого примера. Общая лицензия на их дальнейшее распространение не заявлена. В manifest.json записаны размеры и SHA-256 каждого файла. Ссылки скачивают локальные материалы из библиотеки, без обращения к внешнему хранилищу.

Промпт и возможности применения

Скачать исходный промпт. Этот приём подходит для героя сайта, маскота продукта, интерактивного портфолио и знакомства с персонажем. Для произвольного взгляда по двум осям нужен специально снятый набор направлений: готовый ролик не заменяет полноценную 3D-модель.

Это эксперимент библиотеки. Пропускная способность сети, точная плавность на устройствах и визуальная адаптивность требуют отдельной браузерной проверки.