Статьи Unova

Сделали лендинг с 3D-анимацией на Тильде для Tilda Design Battle за 15 часов

2025-08-18 16:09
В ноябре прошлого года участвовали в конкурсе — Tilda Design Battle 4. Его суть — за 15 часов сделать креативный сайт на Тильде с анимациями и полноценными адаптивами. Захотелось проверить свои силы — и я вписался. Рассказываю, как это было.
Привет. Меня зовут Глеб Говядинский — я дизайнер и основатель студии unova. Мы создаём сайты на Тильде с интерактивными 3D анимациями
Тема батла была — тур на остров Маврикий для встречи с китами.
Мы давно используем связку с Spline + Tilda в коммерческих проектах, и для конкурса выбрали такую же технологию. Это был шанс показать нашу сильную сторону и выделиться на фоне остальных участников.
3D на Тильде? Да ещё и интерактивное, с реакцией на курсор? И всё это за 15 часов? Что? Такого ещё никто не делал. Вызов принят! Погнали!

Начал с разработки 3D-сцены

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

Этапы разработки 3D

3D — мощная штука, но требует времени. На всю работу с 3D-сценой ушло 5 часов из выделенных 15. Пока другие участники уже завершали отрисовку дизайна и начинали вёрстку, я ещё даже не добрался до фигмы, а сидел развлекался в Spline. На что же я потратил эти 5 часов?

1. Подбор и настройка 3D-модели

Моделировать кита с нуля было некогда. Зашёл на Sketchfab, нашёл уже заанимированную модель кашалота, импортировал в сцену, добавил зацикленное движение вверх-вниз — и вуаля! Основа для 3D-сцены готова.

2. Настройка текстур и материалов

Кит смотрелся чуждо и неестественно. Для усиления реалистичности поработал над текстурами и смешал пять разных слоёв:
  • Базовая текстура — отвечает за реалистичную детализацию (кожу, глаза, складки).
  • Карта нормалей — добавляет рельеф, взаимодействуя с отражениями.
  • Matcap — создаёт блики, усиливая эффект освещения.
  • Fresnel — затемняет края модели, создавая эффект глубины.
  • Дополнительный синий слой — даёт мягкое тонирование для гармонии с окружением.

3. Освещение

В сцене два источника света:
  • Первый отвечает за основное освещение кита.
  • Второй создаёт мягкий блик на спине, подчёркивая объём.

4. Окружение

Чтобы усилить реалистичность подводного пространства, добавил:
Фон сцены
Настроил глубокий тёмно-синий фон. Он стал базой всей цветовой схемы сайта. Добавил лёгкий туман, чтобы дальние объекты мягко растворялись в фоне.
Солнечные лучи
Добавил анимацию размытых солнечных лучей, проникающих сквозь толщу воды. Реализовано это хитрым способом — на заднем плане размещены узкие полупрозрачные панели с белым градиентом, которые хаотично движутся вдоль одной оси. А спереди — невидимая стеклянная панель, которая размывает всё, что за ней. Получился мягкий, реалистичный свет.
Пузырьки воздуха
С помощью генератора частиц добавил пузырьки, плывущие навстречу киту. Это усилило иллюзию движения и глубины.
Второго кита
Кашалоты — не одиночки, они живут стаями. Чтобы нашему киту не было скучно, добавил ему братишку на задний план. Один — хорошо, а два — лучше.
Прогресс создания окружения

5. Интерактив с курсором

Добавил мягкий поворот камеры при движении мыши. Получилась плавная и ненавязчивая анимация, которая добавляет живости и подчёркивает объём.
В итоге вышло то, ради чего всё и затевалось — сцена, в которую просто залипаешь. Всё двигается, переливается, плавает. Ощущение живого подводного мира.
Готовая 3D-сцена опубликована в нашем Spline-профиле. Забирайте, ремиксуйте, используйте в своих проектах

Тестирование и оптимизация

На моём компьютере всё работало идеально — плавно и без лагов. Но тестирование на ноутбуке выявило проблему: 3D сильно нагружало систему слабых устройств.
В чём дело? Полигонов немного. Лишние материалы удалены. Текстуры сжаты. Всё вроде оптимизировано…
Оказалось, что одна из анимированных текстур, имитирующая преломлённые лучи света на поверхности кита, сильно грузила систему. Пришлось её убрать. Всё — сразу полегчало и сцена стала работать стабильно и плавно даже на стареньком ноуте.
С мобильными устройствами — отдельная история. Флагманские модели ещё справляются с 3D-сценами из Spline, но мой древний Redmi Note 5 просто отказывается загружать сайт, если в нём встроена даже самая лёгкая сцена с шестью полигонами.
Чтобы решить эту проблему, специально для мобильных устройств мы используем выгрузку зацикленного видео из 3D-сцены. Да, это лишает пользователя интерактива, но сохраняет все анимации, не нагружая производительность телефона.
Для конкурсной работы сделал точно так же — выгрузил 3D в зацикленное видео и добавил в качестве фона на мобильных адаптивах.

Дизайн

После завершения 3D-сцены принялся за отрисовку дизайна сайта. Это заняло ещё 5 часов. Тут всё проще и привычнее: открыл фигму — и рисуй блок за блоком. Все тексты были указаны в ТЗ конкурса. Оставалось только продумать расположение и визуальную подачу элементов. Получился лендинг из 6 блоков.
При отрисовке опирался на принципы современного дизайна:
  • Соблюдал визуальную иерархию, работал с контрастами, выравниваниями и унифицированными отступами.
  • Отказался от классической сетки — разделил её на две зоны, расставил силовые линии, по которым выстраивал композицию.
  • Поддерживал визуальный ритм — чередовал текст и визуал, чтобы блоки смотрелись живо и не перегружали восприятие.
  • Придерживался минимализма — гармонично балансировал контент и воздух, не перегружал лишним визуальным шумом.
  • Добавлял мелкие декоративные детали и иконки — для усиления композиции и визуальных акцентов.
Концепция получилась цельной и завершённой — она точно передавала настроение и суть сайта. Конечно, можно было ещё докрутить отдельные детали, улучшить UI некоторых блоков. Но времени было впритык, и нужно было переходить к вёрстке.

Вёрстка в Тильде

После этого началась финальная сборка в Tilda (5 часов). Дизайн был нестандартным, поэтому всё собирал на зеро-блоках.
Быстро понял, что времени не хватает. Пришлось расставлять приоритеты. Сначала сделал десктоп, потом мобильные разрешения. Планшеты в итоге не успел проработать.
По умолчанию максимальное разрешение в Тильде — 1200 px. Но хотелось, чтобы сайт круто смотрелся и на 1440 px, и на 1920 px, поэтому добавил эти разрешения вручную и сделал под них отдельную вёрстку.

Не обошлось без скриптов

Чтобы добавить сайту индивидуальности, применил 3 модификатора:
  • Кастомный курсор. Заменил стандартный курсор на круг, который при наведении на кликабельные элементы плавно превращается в точку.
  • Анимация появления изображений. Модификатор, который добавил плавную анимацию появления изображений с интересным эффектом смещения.
  • Горизонтальный скролл. В блоке с фотографиями использовал скрипт, для плавного перетягивания фото по горизонтальному скроллу.
Для всех остальных анимаций использовал стандартный step by step Тильды.
Ссылка на готовый проект seewhale-promo.tilda.ws
Для адаптивной версии под мобильные разрешения сделал бургер-меню.

Итоги баттла

В конкурсе участвовало 130 человек. В шорт-лист вошли 10 финалистов, но мой сайт туда не попал из-за отсутствия палншетного адаптива. Однако жюри всё равно выделило мою работу и показало её в финальном разборе, отметив оригинальность идеи и проработку 3D.
Действительно, это выглядит эффектно, очень органично и здорово. С этим хочется развлекаться. Ты ловишь себя на ощущении, как-будто бы кит смотрит прямо на тебя, под каким углом не посмотри. Работа очень достойная.
Антон Командин, арт-директор Experience Agency, жюри
Результат: 25-е место из 130.
Но самое главное — я снова подтвердил гипотезу, что связка Spline + Tilda работает и позволяет делать сайты, которые заметно выделяются на фоне обычных сайтов.

Доработки после конкурса

После баттла я полностью завершил проект:
  • Сделал недостающие адаптивы.
  • Создал прелоудер для мягкой загрузки сайта.
  • Разработал кастомную 404-страницу, где вместо кита теперь плавают цифры «404».
  • Сделал favicon и SEO-настройки.
Страница «Ошибка 404»

Выводы после конкурса

  1. За 15 часов реально сделать хороший, сильный сайт на тильде с крутым дизайном и проработанными анимациями.
  2. Связка Spline + Tilda — действительно рабочий инструмент. Позволяет быстро собрать эффектный 3D-сайт без навыков кодинга или знаний Three.js.
  3. Tilda Design Battle — классный формат. Ограничения времени только подогревают интерес, и ты реально растёшь в процессе. Отличная встряска и мощная прокачка. Хоть выиграть не удалось — сама атмосфера и процесс мне понравились. Обязательно поучаствую в следующем баттле.
В итоге я получил классный опыт. Проверил себя и посоревновался с другими. Хоть и выиграть не удалось, ни о чем не сожалею. Планирую и дальше участвовать в последующих баттлах от Тильды.
Этот проект и другие проекты студии, можете посмотреть на нашем сайте.
А следить за новостями и интересными кейсами из сферы интерактивного 3D дизайна можете в нашем Telegram