Пошаговый гад: Как сделать анимированную страницу, которая следит за курсором

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

Так у нас появилась сова для страницы 404. Посмотреть на неё можно здесь: elenchus.ru/owl-not-found. Поводите мышкой из стороны в сторону, а на телефоне — пальцем по экрану.

Ниже рассказываем, как мы её сделали. Это пошаговый гайд: если повторите шаги, получите такую же страницу со своим персонажем.

Внутри нет 3D-модели. Сова — это короткое видео, в котором она поворачивает голову слева направо. Видео не проигрывается само: скрипт берёт положение курсора и перематывает его на нужный кадр.

Такой приём работает для любого движения «из стороны в сторону»: персонаж поворачивается, предмет вращается, дверь открывается. Нужны только изображение, видеогенератор и немного JavaScript.

Мы нашли на MotionSites интерактивного персонажа, который реагирует на движение мыши, и решили повторить механику. Сова для 404 подошла по смыслу: страница потерялась, а она оглядывается и ищет.

Выбирайте персонажа с простым движением в одной плоскости. Поворот головы влево-вправо идеален. Сложные движения из нескольких частей управлять курсором труднее.

Мы сгенерировали три вещи:

Персонаж на стартовом кадре должен смотреть прямо. Так видеогенератору проще сделать поворот в обе стороны.

Мы анимировали сову в Kling через SYNTX, режим Image to Video. Задача для промпта: поворот головы влево, возврат в центр и поворот вправо. Примерно так:

Сова медленно поворачивает голову влево, возвращается в центр и поворачивает голову вправо. Тело неподвижно. Камера статична, фон и свет не меняются.

Главное в промпте — статичная камера и неподвижный фон. Если камера едет или свет мерцает, при перемотке всё будет дёргаться. Готовьтесь к нескольким генерациям: нам понадобилось несколько попыток, чтобы получить чистое движение.

Это самый неочевидный шаг, и именно он решает, будет ли сова двигаться плавно.

Всё это делает одна команда в ffmpeg:

ffmpeg -i owl_source.mp4 -c:v libx264 -pix_fmt yuv420p -g 1 -crf 20 -an owl.mp4

Дальше разберите видео покадрово и запишите, на какой секунде персонаж смотрит максимально влево, где прямо и где максимально вправо. Эти отметки понадобятся в коде.

И ещё про фон. MP4 не поддерживает прозрачность. Поэтому мы обрезали края видео маской по силуэту пещеры (CSS-свойство mask-image), и сова встраивается в тёмный фон страницы без видимых границ. Силуэт для маски проще всего получить из картинки на зелёном фоне.

Композицию мы собрали в Figma: крупные цифры 4 и 4, сова вместо ноля, растительность по краям, текст и кнопка «Вернуться». Сразу нарисуйте и мобильную версию: там всё встаёт в один столбец.

Страницу на HTML, CSS и JS мы собрали с помощью ChatGPT по макету из Figma. Чтобы результат совпал с макетом, дайте нейросети точные данные: размер макета, координаты и размеры блоков, шрифты и цвета. Попросите сделать композицию, которая целиком масштабируется под экран, — тогда пропорции сохранятся и на ноутбуке, и на большом мониторе.

Видео ставим на паузу и меняем video.currentTime в зависимости от того, где курсор. Минимальная рабочая версия:

Значения START и END — те самые отметки из шага 4. requestAnimationFrame нужен, чтобы не дёргать видео чаще, чем обновляется экран.

Курсора на телефоне нет. Сначала мы сделали ползунок под совой, но потом убрали его: живее, когда сова просто следит за пальцем. Для этого хватает строки с touchmove в коде выше.

Ещё одна деталь: некоторые мобильные браузеры не грузят видео до первого касания. Пока видео не загрузилось, показывайте вместо него статичную картинку — первый кадр совы.

Мы собрали стили, скрипт и небольшие изображения в один HTML-файл. Такую страницу можно открыть в браузере без сервера или вставить в HTML-блок конструктора — у нас она живёт на Tilda. Тяжёлые файлы — видео и крупную растительность — лучше загрузить отдельно и подключить ссылкой, так страница быстрее открывается.

Сова поворачивалась неравномерно. Влево она реагировала сразу, а вправо — только когда курсор доходил почти до края. Причина была в самом видео: сова сначала смотрит прямо, потом влево, возвращается, замирает и только потом смотрит вправо. Если растянуть весь ролик на ширину экрана, получается каша. Решение — взять только один непрерывный поворот слева направо и вырезать паузу в центре. Для этого и нужен покадровый разбор из шага 4.

Движение запаздывало. Пока в видео было мало ключевых кадров, сова догоняла курсор рывками. Помогло перекодирование с -g 1.

Шрифт цифр потерялся. В макете «404» были набраны декоративным шрифтом, которого не оказалось на сайте, и браузер показал обычный. Мы перевели цифры в вектор (SVG), и теперь они выглядят одинаково везде. Крупные декоративные надписи вообще надёжнее делать картинкой, а не текстом.

Страница была тяжёлой. В первой версии картинки лежали прямо в коде, и он вырос до десятков тысяч символов. Маску пещеры мы перевели в SVG, а статичную картинку-заглушку уменьшили — код стал вдвое короче.

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

Так же можно оживить не только 404, но и первый экран, страницу товара или спецпроект: маскот следит за посетителем, продукт поворачивается вслед за курсором.

Если хотите такую страницу для своего сайта, но нет времени разбираться с кодеками и кадрами, напишите нам в Elenchus. Мы делаем сайты, в которых интерактив помогает бизнесу, а не просто украшает. А сова по-прежнему ждёт на elenchus.ru/owl-not-found.

Разбираем. Проектируем. Запускаем. Развиваем.