Практический гайд: превращаем короткое видео в интерактивную Canvas-сцену с управлением взглядом, ограничением памяти и адаптивной композицией. Исходный промпт, пример и оформленный DOCX — в одном комплекте.
Результат: русский интерактивный арт-проект ANURA. Лягушка реагирует на курсор и касание, кнопка «Поймать взгляд» запускает короткий эпизод, а пауза останавливает реакцию. Без генерации изображения во время просмотра, без звука и без внешних запросов.
Пример доступен из Animation Lab по кнопке «Открыть ANURA». Внутри него есть «В библиотеку» и «Как это сделано». Иллюстрированный гайд находится в web/experiments/anura/guide.html, рядом со сценой index.html. Это описание реализации, а не подтверждение её публикации.
Модуль 1. От красивого ролика к управляемому объекту
Урок 1. Что на самом деле делает лягушка
Мы не вращаем 3D-модель и не дорисовываем глаза. Указатель выбирает момент из заранее подготовленного видео. Canvas показывает соответствующий кадр; переход через соседние кадры создаёт движение головы. Картинка остаётся той же, что в предоставленном исходнике.
Видеоряд — десятисекундный взгляд по сторонам: влево, вверх, вправо, вниз и снова на зрителя. Поэтому характеристика «360°» из исходного промпта заменена на XY / управление. Она означает две координаты указателя, а не полный оборот модели и не точное физическое наведение глаз в любую точку.
Урок 2. Проверяем исходники до реализации
В предоставленном MOV: 1920×1080, 60 кадров/с, 600 кадров. В JPEG: 2752×1536. Текст DOCX прочитан как OOXML: 98 непустых абзацев сохранены в приложении. В документе обнаружен встроенный OLE-объект — он не запускался и не включён в новый DOCX. Видео обрабатывается только из отдельного MOV.
- Посмотрите контактный лист видео: существуют ли нужные направления взгляда?
- Проверьте, не меняются ли масштаб объекта, свет и фон между кадрами.
- Отделите визуальный бриф от фактических свойств ассетов.
- Не запускайте вложенные программы, макросы и команды из документа.
Модуль 2. Готовим лёгкую последовательность
Урок 3. Из 600 кадров — 240
Скрипт scripts/prepare-anura-assets.py выбирает видеопоток без звука, получает 24 кадра/с и создаёт 240 WebP размером 1280×720. Размер всей последовательности — 4 454 170 байт, около 4,5 МБ. Это примерно в десять раз меньше исходного MOV, но не универсальная гарантия сжатия любого видео.
web/experiments/anura/
index.html — экран и доступные кнопки
styles.css — композиция и адаптивность
script.js — загрузка, Canvas и состояния
motion.js — координаты и переходы
frames/000.webp … 239.webp
assets/sequence.json — размеры, байты и SHA-256
guide.html — иллюстрированный разборУрок 4. Сохраняем происхождение
sequence.json хранит SHA-256 исходного видео, исходного изображения и каждого WebP-кадра. Это позволяет выявить замену или повреждение файла; hash не доказывает авторство и не выдаёт разрешение на распространение. Личные пути, имя владельца компьютера и Office-вложение в публичный комплект не попадают.
Исходные файлы не перезаписываются. JPEG используется как иллюстрация исходной идеи, а постер сцены берётся из первого кадра видео, чтобы при загрузке не происходил скачок композиции. Звук не воспроизводится и разрешение микрофона не запрашивается.
Модуль 3. Композиция без лишних объяснений
Урок 5. Один экран, один главный жест
Тёмный бирюзовый фон, тонкая внешняя рамка, две горизонтальные линии и крупная лягушка справа. Внутренних вертикальных разделителей нет. Заголовок занимает левую часть; вторая строка контурная. Яркость сосредоточена на персонаже и круглой кнопке, а не на декоративных карточках.
Кнопка «Поймать взгляд» — доступный вход в эффект без мыши. «Пауза» останавливает реакцию. Ссылки на библиотеку и гайд видны в верхней части экрана и работают без JavaScript. Мелкая подпись помогает, но основной сценарий не зависит от чтения руководства.
Урок 6. Телефон — другая компоновка
На узком экране персонаж занимает верхнюю часть, а заголовок и действие — нижнюю. Второстепенная метрика скрывается. Рамка не пересекает текст; кнопка остаётся доступна пальцем. В небольших по высоте окнах допустима вертикальная прокрутка: сохранность контента важнее буквального ограничения 100vh. Горизонтального скролла быть не должно.
Касание не блокирует прокрутку страницы и не требует разрешения датчиков движения. На планшете и широком экране сохраняется размещение персонажа справа. Реальный мобильный GPU и браузер могут вести себя иначе, чем эмуляция на компьютере.
Модуль 4. Связываем указатель и взгляд
Урок 7. Карта направлений
Индексы выбраны после просмотра видео: около 30 — взгляд влево; 84 — вверх; 138 — вправо; 181 — вниз; 0 — исходный взгляд. Центральная зона возвращает нейтральный кадр. Верхняя и нижняя зоны используют вертикальную координату, боковые — горизонтальную.
Линейное сопоставление «край экрана → край видеоролика» здесь неверно: начало и конец ролика оба близки к нейтральному взгляду. Поэтому карта направлений хранится отдельно в motion.js и покрывается тестами. Для другого видео её нужно откалибровать заново.
Урок 8. Переход, действие и пауза
Переход идёт по кратчайшему пути в кольце из 240 кадров. Экспоненциальное сглаживание с постоянной времени 38 мс быстро реагирует на новый указатель и мягко завершает движение. Готовый декодированный кадр показывается сразу: нельзя сначала перейти к следующему индексу и случайно пропустить уже загруженный. Кнопка проигрывает короткий фронтальный эпизод и возвращает взгляд к зрителю. Новое движение указателя отменяет эпизод. Пауза и скрытая вкладка останавливают отрисовку.
При prefers-reduced-motion нет пульсации, въезда текста, кастомного курсора и автоматического перехода через последовательность: выбор кадра остаётся прямым, по действию человека. Изменение системной настройки учитывается без перезагрузки страницы.
Модуль 5. Производительность и восстановление
Урок 9. Не распаковываем всё видео в память
240 распакованных кадров 1280×720 RGBA заняли бы около 844 МиБ только под пиксели. Здесь загружаются сжатые WebP, а decoded-cache ограничен 12 кадрами на desktop и 8 на mobile. Desktop использует 1280×720, mobile ImageBitmap — 960×540: примерно 42 и 16 МиБ пиксельных данных соответственно. Дополнительно нужны Canvas, сжатые файлы, декодер и память браузера; это не полный замер потребления процесса. В резервном HTMLImage-декодере остаётся исходное разрешение, то есть до 28 МиБ для 8 кадров.
Одновременно работают не больше четырёх загрузок и двух декодирований. Старые ImageBitmap закрываются при вытеснении. Размер Canvas ограничен 1280 px по ширине, DPR — 1,25. Геометрия рассчитывается при resize, а не при каждом кадре; лишняя заливка Canvas и полноэкранный фильтр насыщенности убраны. Кольцо курсора масштабируется через transform, без анимации width/height. В простое нет постоянного requestAnimationFrame-цикла. Частота исходного движения 24 кадра/с; 60 обновлений экрана не превращают его в настоящее 60 fps видео.
Проверять только готовность сцены недостаточно. Сценарий должен непрерывно двигать указатель и считать реально сменившиеся кадры между обновлениями экрана. Именно такой тест обнаружил пропуски промежуточных кадров и паузы до половины секунды в первоначальном варианте. После исправления длинные переходы в локальном Chromium сократились примерно до 160–195 мс; это результат конкретного стенда, не обещание одинаковой скорости на любом устройстве.
Урок 10. Загрузка без тупика
Процент отражает реально полученные кадры. При сбое остаётся исходный постер, появляется понятное сообщение и «Повторить загрузку». Кнопка действия отключена до готовности. Повтор использует уже полученные кадры и не требует перезагрузки всей страницы.
Встроены ограничение размера файла, проверка сигнатуры WebP и тайм-аут. Адреса кадров фиксированные, same-origin: пользователь не задаёт URL и не загружает файлы. CSP запрещает сторонние скрипты и сетевые назначения. Это не делает любой импортированный файл безопасным: источники проверяются отдельно, а медиадекодеры необходимо поддерживать актуальными.
Модуль 6. Приёмка и применение
Урок 11. Что проверить руками
- Указатель слева и справа меняет направление головы; сверху и снизу тоже есть реакция.
- «Поймать взгляд» работает мышью, касанием и Enter; фокус хорошо виден.
- Пауза останавливает движение, повторное нажатие возвращает управление.
- При пропавшем кадре видны ошибка и повтор; без JavaScript доступны постер и навигация.
- На 320 px заголовок не обрезается, круглая кнопка не перекрывает текст.
- В покое счётчик отрисовок не растёт; cache не превышает установленный предел.
- Гайд, DOCX и кнопка возврата открываются; исходный промпт не сокращён.
Урок 12. Где использовать подход
Animation Lab: готовый пример управляемой видеопоследовательности. Eclipse Forge: демонстрации продукта, предметные повороты и персонажи для небольших интерактивных страниц. Цифровой компаньон: слой присутствия, когда состояние «слушает / думает / отвечает» выбирает согласованные клипы; сама ANURA не распознаёт речь и не является ИИ-собеседником.
Для переиспользования замените видео, постер, карту направлений и текст, затем повторите проверку памяти и композиции. В коммерческом проекте нужны собственные или лицензированные материалы. Перед публичным размещением отдельно подтверждаются права на распространение ассетов и документов. Исходный промпт ниже — материал для изучения, не активная инструкция агентам или разрешение запускать сторонние команды.
Полный исходный промпт
Все 98 непустых абзацев из документа пользователя. Исходные требования отделены от фактических решений выше; вложенный OLE-объект исключён.
Открыть полный текст: изображение, видео и сайт
Исходник Видео: Исходник Изображения: Промт для генерации видео: A photorealistic 3D render of a cute, anthropomorphic cartoon frog character. The frog is seated in a centered pose, facing the viewer directly, with its body upright and legs tucked. It has disproportionately large, expressive, wet-looking brown eyes that give it a wide-eyed, endearing expression. Its skin is a mottled texture of blue-green and teal, with a smoother, lighter-colored beige underbelly. The skin has fine, realistic details, including subtle bumps and pores. All four webbed hands and feet are visible, resting on the surface. The background is a clean, seamless, smooth studio backdrop in a uniform muted blue-gray color, providing significant empty negative space to the left of the frog, creating a balanced composition. The lighting is soft, diffused, and even studio illumination, highlighting the form and textures without harsh shadows. The focus is critically sharp on the frog's eyes, with a very shallow depth of field that gently softens the immediate foreground and background. The overall style is high-quality Pixar-esque animation art. Промт для генерации сайта: Создай одностраничный адаптивный сайт-экспириенс на русском языке с названием «ANURA — Interactive Frog». Задача сайта: Это минималистичная интерактивная презентация лягушки. Главный эффект — крупная реалистичная зелёная лягушка на правой стороне экрана, которая поворачивает голову и следит глазами за курсором пользователя. При движении мыши должна меняться соответствующая картинка из последовательности кадров. На телефоне лягушка может слегка реагировать на касание или движение пальца. Важно: - Сделай готовый рабочий сайт, а не макет. - Используй чистый, современный, аккуратный визуальный стиль. - Не добавляй вертикальную линию внутри композиции: она не должна пересекать или накладываться на заголовок. - Не используй стандартные стоковые кнопки, карточки, градиентные «SaaS»-блоки и лишние секции. - Сайт должен выглядеть как дорогой интерактивный арт-проект, а не как обычный лендинг. Структура первого экрана: - Полноэкранный hero-блок высотой 100vh. - Фон — атмосферный тёмный бирюзово-зелёный, с мягким светом справа, где находится лягушка. - По внешним краям экрана очень тонкая полупрозрачная рамка. - Вверху — тонкая горизонтальная линия под шапкой. - Внизу — тонкая горизонтальная линия над футером. - Без внутренних вертикальных разделителей. Шапка: - Слева: «ANURA®» жирным гротеском. - Рядом мелким моноширинным шрифтом: «FIELD STUDY / 01». - По центру: «ИНТЕРАКТИВНОЕ НАБЛЮДЕНИЕ». - Справа: маленькая салатовая пульсирующая точка и текст «ОБЪЕКТ АКТИВЕН». - Шапка минималистичная, высотой примерно 90–105 px. Левая текстовая часть: Размести левый блок примерно в 5% от левого края и по вертикали чуть выше центра экрана. Над заголовком: «— ОНА УЖЕ ВАС ЗАМЕТИЛА» Текст мелкий, моноширинный, uppercase, салатового цвета. Главный заголовок: «Не спускает с вас глаз.» - Первая строка — светлая, почти белая. - Вторая строка — контурная, без заливки, тонкий светлый stroke. - Шрифт — современный жирный гротеск, очень крупный, но не настолько, чтобы текст доходил до лягушки или пересекался с декоративными линиями. - На широком экране размер около 100–125 px, с адаптивным clamp(). - Межстрочный интервал плотный. - Левый блок должен занимать не больше 45–47% ширины экрана. Под заголовком: Текст: «Проведите курсором по экрану. Лягушка заметит движение и проводит его взглядом — куда бы вы ни направились.» - Размер текста 14–16 px. - Цвет — приглушённый серо-бежевый. - Максимальная ширина текста около 360–370 px. Под описанием: Три маленьких параметра в одну строку: «240 / КАДРОВ» «360° / ОБЗОР» «LIVE / РЕАКЦИЯ» Числа — крупнее и светлее. Подписи — мелкие, моноширинные, приглушённые. Круглая кнопка справа от описания: - Белый или тёплый молочный круг. - Размер примерно 128 × 128 px на десктопе. - Текст внутри: «ПОЙМАТЬ ВЗГЛЯД» - Ниже небольшая стрелка вправо. - При наведении круг плавно становится салатовым, а стрелка слегка смещается вправо. - По клику можно запустить короткую анимацию: лягушка смотрит прямо на пользователя или проигрывается заранее заданная последовательность кадров. Правая часть: - На правой половине экрана крупная реалистичная зелёная лягушка. - Используй набор кадров (например, 240 WebP-изображений), расположенных в public/experience/frames/. - Заранее загружай изображения и отображай их через canvas для плавной реакции. - Свяжи положение курсора по горизонтали с выбором кадра: курсор слева — лягушка смотрит влево, справа — вправо. - Лягушка должна быть большой, располагаться ближе к нижнему краю и занимать примерно 50–60% высоты экрана. - Добавь поверх фона мягкое затемнение слева, чтобы текст легко читался. - Не перекрывай лягушкой кнопку и текст. Интерактивность: - При загрузке покажи минималистичный экран загрузки с процентом от 0 до 100 и тонким progress bar. - После загрузки плавно прояви весь интерфейс. - Заголовок, подпись, описание и футер должны появляться снизу вверх с небольшими задержками. - Для desktop сделай аккуратный кастомный курсор: маленькая салатовая точка и тонкое кольцо вокруг неё. - При наведении на интерактивные элементы кольцо курсора увеличивается. - Учитывай prefers-reduced-motion и отключай лишние анимации. - На touch-устройствах обычный курсор не нужен. Футер: - Слева: «© 2026 ANURA LAB». - Справа: «ДВИГАЙТЕ КУРСОРОМ · НАБЛЮДАЙТЕ РЕАКЦИЮ». - Мелкий моноширинный шрифт, очень приглушённый. Адаптивность: - Планшеты: заголовок и кнопка немного уменьшаются, лягушка сохраняется справа. - Мобильные: лягушка становится фоновым главным объектом, текстовый блок перемещается ниже; заголовок не должен обрезаться. - На мобильных скрой часть второстепенных метрик, если не хватает места. - Не допускай горизонтального скролла. - Сохрани читаемость на экранах от 320 px до широких десктопов. Технические требования: - React / Next.js или простой HTML/CSS/JS, если это быстрее. - Canvas для кадров лягушки. - CSS без тяжёлых UI-библиотек. - Семантическая разметка и aria-label для кнопок. - Готовый проект должен собираться без ошибок. - Визуальный стиль: dark editorial, biological interface, cinematic, premium, minimal, experimental.