Продолжаю экспериментировать с WEB и интерактивными элементами. Недавно увидел несколько роликов, где показывают эффект вращения головы вслед за курсором.

Идея понравилась, но почти везде их 360° на деле ограничивались движением влево-вправо. Решил попробовать сделать полноценный вариант на примере своего сайта: www.isograph.me

Что сделал: 1) Подготовил 8 изображений положений головы — вверх, вниз, влево, вправо и четыре диагональных направления. (NanoBP)

2) Для каждого направления сгенерировал короткую анимацию поворота головы (KLING).

3) В DaVinci Resolve почистил ролики, убрал лишние кадры и оставил нужные переходы.

4) Загрузил все 8 видео в проект и с помощью Codex в VS Code собрал логику: сайт определяет положение курсора и запускает соответствующую секвенцию.

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

На всё ушло примерно пару дней. Больше всего пришлось повозиться с генерацией видео. Kling упорно не хотел делать нормальный поворот головы по промту и постоянно добавлял лишние движения. Минимальные 3 секунды для такого простого поворота оказались слишком длинными, поэтому после нужного движения KLING начинал сам придумывать, чем заполнить оставшийся тайминг.

Пришлось хитрить: заранее прописывать в промте дополнительное движение после основного поворота, чтобы Kling не импровизировал сам, а потом просто вырезать эту часть при монтаже.

Небольшой эксперимент на стыке веба, дизайна, AI и кода. Продолжаю изучать, что ещё из этого можно выжать.

Результат работы тут: www.isograph.me