Unova 
Тендеры и лиды
Информация
Расскажу, зачем мы используем Spline, как встраиваем его в сайты, какие анимации используем и как оптимизируем сцены для стабильной работы.
Меня зовут Глеб Говядинский. Я дизайнер и основатель студии Unova. Мы делаем сайты на Тильде с интерактивными 3D анимациями.
Сплайн мы используем в собственных проектах. Также занимаемся разработкой 3D-сцен для других студий и команд. Чаще всего это коллаборации, где мы создаём интерактивные 3D-решения для сайтов.
Основная роль сплайна, как вы уже догадались — 3D анимация. Мы используем его для создания 3D-сцен, которые двигаются, откликаются на курсор и клики, реагируют на прокрутку и даже имитируют физику объектов и частиц. Такой подход делает сайт более живым и эффектным. Пользователь перестаёт быть наблюдателем и получает возможность управлять интерфейсом.
Интерактивные 3D анимации помогают не только украсить сайт, но и решают ряд других важных задач.
Таким образом, сплайн-анимации не только добавляют красоты, но увеличивают бизнес-метрики.
Сначала мы создаём саму сцену в Spline, а потом добавляем её на сайт. Для размещения используем два подхода.
Самый простой вариант — скопировать несколько строк кода и вставить их в HTML-блок Tilda. В этом случае сцена подгружается напрямую с серверов Spline.
Более сложный вариант — выгрузить сцену в формате .splinecode, загрузить ее в свой репозиторий и подключить через API @splinetool/runtime. Тогда сцена открывается уже с нашего хостинга, что дает больше контроля.
Просто вставить 3D на сайт — недостаточно. Чтобы пользователь получил хороший опыт нужно настроить хороший интерактив.
В своей практике мы выделили несколько приёмов, которые особенно хорошо ощущаются пользователем внутри интерфейса.
Простые плавные анимации, которые повторяются бесконечно. Создают легкую динамику. Делают сцену живее. При этом не сильно отвлекают пользователя от основного контента. Простой, но эффективный способ оживить статичную композицию.
Тоже простой прием. Небольшое изменение угла обзора при движении мыши. Создаёт естественное ощущение трёхмерности. Приём ненавязчивый, но очень выразительный.
Анимация, при которой элемент двигается вслед за курсором. Благодаря этому можно перемещать элемент по экрану, просто двигая мышью. Приём можно доработать — создать небольшой «паровозик»: первый элемент движется за курсором, второй — за первым, третий — за вторым. Это делает эффект заметнее и добавляет динамики сцене.
Важный момент. Чтобы 3D сцена добавленная на сайт стабильно реагировала на курсор, у всех элементов, размещённых поверх неё, нужно отключить взаимодействие с мышью (pointer-events: none). В противном случае эти элементы будут блокировать курсор, и 3D-сцена перестанет правильно отслеживать движения.
Принцип тот же, что и в предыдущем приёме, но двигается не объект, а источник света. Благодаря этому курсор может подсвечивать элементы сцены и создавать эффектную игру света и тени.
Объект не двигается, а поворачивается за движением мыши — будто наблюдает за курсором. Эффект легкий, но сразу делает сцену живее.
Причём есть хитрость. Для слежения за курсором используется триггер «Look at», который можно направить либо на курсор, либо на другой объект. Если вместо курсора выбрать отдельный объект, Spline позволяет более гибко настроить поведение — задать ось вращения и плоскость, в которой будет улавливаться курсор. Поэтому, для более точного управления, мы создаём вспомогательный невидимый объект, который двигается за курсором, и указываем его как цель для «Look at». В итоге получаем то же слежение за курсором, но с более точной и гибкой настройкой.
Продвинутое слежение за курсором
Тут все просто. При наведении на объект срабатывает триггер, который запускает анимацию. Так можно создавать как лёгкие, ненавязчивые эффекты, так и более сложные, залипательные сцены.
Скролл — одно из главных действий пользователя наряду с движением курсора. Анимации, реагирующие на прокрутку, помогают сделать интерфейс более живым и выразительным. Элементы могут плавно появляться, менять положение или форму, усиливая динамику страницы.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13201 тендер
проведено за восемь лет работы нашего сайта.
При включённой симуляции физики элементы ведут себя естественно. Их можно толкать, сталкивать и наблюдать за реакцией, создавая ощущение реального пространства.
За счет частиц можно создавать интересные атмосферные сцены. А если привязать к курсору particle force, пользователь сможет взаимодействовать с ними — разгонять, отталкивать или притягивать.
Настоящая магия начинается при комбинации всех этих приемов. Редко получается обойтись каким-то одним. Смешение всех выше описанных приемов открывает бесконечные возможности для создания интересных интерактивных 3D-сцен.
Пример нашей сцены, где всё собрано вместе: винты вращаются, корпус плавно поворачивается, глаза и панель следят за курсором, аппарат двигается за мышью, а при зажатии ЛКМ срабатывает анимация и физика. В итоге — ощущение, что управляешь настоящим живым объектом. Поиграться в реалтайме со сценой можно по ссылке
Чтобы 3D-сцена работала плавно даже на слабых устройствах, важно следить за её оптимизацией. В Spline для этого есть встроенный инструмент — панель производительности, которая показывает, насколько сцена оптимизирована.
При работе нужно учитывать два ключевых показателя:
Вес напрямую влияет на скорость загрузки 3D на сайте. Чем меньше размер сцены, тем быстрее она отобразится у пользователя.
Даже лёгкая сцена может нагружать процессор, если в ней много вычислений в реальном времени.
Всё это помогает достичь баланса между визуальной выразительностью и производительностью. Даже сложная 3D-сцена будет работать плавно — если грамотно контролировать её вес и оптимизировать работу в реальном времени.
На одном из конкурсов Tilda я делал 3D-сцену с китом. Хотел усилить атмосферу и добавил эффект преломления воды. Для этого поверх текстуры освещения наложил анимированную маску noise. Визуально это выглядело интересно, но производительность сразу упала почти вдвое. В итоге пришлось отказаться от эффекта ради стабильности.
Чтобы не сталкиваться с проблемами оптимизации на реальных проектах, мы обязательно тестируем все сцены перед публикацией. Смотрим, чтобы показатели в панели производительности не выходили за пределы нормы и были соблюдены все встроенные рекомендации Spline.
Кроме того, мы отдельно проверяем сцену на слабом ноутбуке и замеряем производительность через FPS-метр. Так можно заранее понять, не будет ли 3D-анимация тормозить у пользователей.
Это помогает избежать ситуации, когда сайт с классной сценой выглядит эффектно, но работает с лагами.
Spline — инструмент, который действительно меняет подход к no-code разработке. Он позволяет не просто добавить 3D на сайт, а создать более глубокое и вовлеченное взаимодействие между пользователем и интерфейсом. Даже простая сцена с минимальной анимацией способна заметно усилить впечатление от сайта и сделать его запоминающимся.
Мы используем Spline в своих проектах постоянно и можем уверенно рекомендовать его другим дизайнерам и студиям. Интерактивные элементы помогают не только усилить визуал, но и улучшить бизнес-показатели
В планах — продолжать развивать направление интерактивного 3D и использовать Spline в новых проектах. Посмотреть уже реализованные работы можно на нашем сайте unova.pro
Также приглашаю подписаться на мой канал. Там я делюсь новыми сценами, которые делаю для Spline-комьюнити, рассказываю о свежих проектах и делюсь новостями из мира интерактивного 3D.
А если вам интересно следить за новостями студии и видеть наши свежие кейсы — подписывайтесь на канал студии unova.
