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

Участвовали в конкурсе — Tilda Design Battle 4. Его суть — за 15 часов сделать креативный сайт на Тильде с анимациями и полноценными адаптивами. Захотелось проверить свои силы — и мы вписались. Рассказываем, как это было.

Тема батла была — тур на остров Маврикий для встречи с китами.

Мы давно используем связку с Spline + Tilda в коммерческих проектах, и для конкурса выбрали такую же технологию. Это был шанс показать нашу сильную сторону и выделиться на фоне остальных участников.

3D на Тильде? Да ещё и интерактивное, с реакцией на курсор? И всё это за 15 часов? Что? Такого ещё никто не делал.

Вызов принят! Погнали!

В рамках проекта было решено:

• разработать концепцию промо-сайта по теме тура на остров Маврикий для встречи с китами;

• использовать связку Spline + Tilda для реализации интерактивной 3D-сцены;

• создать анимированную сцену с китом, реагирующим на курсор пользователя;

• проработать окружение — освещение, солнечные лучи, туман, пузырьки и дополнительного кита;

• оптимизировать 3D-сцену под слабые устройства и мобильные версии, заменив интерактив на видеофон;

• разработать дизайн из шести блоков в Figma, соблюдая визуальную иерархию и минимализм;

• сверстать сайт на Tilda с использованием зеро-блоков и разрешений до 1920 px;

• добавить индивидуальные скрипты: кастомный курсор, анимацию появления изображений и горизонтальный скролл;

• выполнить адаптивную верстку под мобильные устройства и реализовать бургер-меню;

• доработать проект после конкурса — добавить прелоудер, favicon, SEO-настройки и страницу «404».

Каждый из этих этапов мы подробно описали ниже.

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

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

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

Кит смотрелся чуждо и неестественно. Для усиления реалистичности поработали над текстурами и смешали пять разных слоёв:

- Базовая текстура — отвечает за реалистичную детализацию (кожу, глаза, складки).

- Карта нормалей — добавляет рельеф, взаимодействуя с отражениями.

- Matcap — создаёт блики, усиливая эффект освещения.

- Fresnel — затемняет края модели, создавая эффект глубины.

- Дополнительный синий слой — даёт мягкое тонирование для гармонии с окружением.

В сцене два источника света:

- Первый отвечает за основное освещение кита.

- Второй создаёт мягкий блик на спине, подчёркивая объём.

Чтобы усилить реалистичность подводного пространства, добавили:

Фон сцены

Настроили глубокий тёмно-синий фон. Он стал базой всей цветовой схемы сайта. Добавили лёгкий туман, чтобы дальние объекты мягко растворялись в фоне.

Солнечные лучи

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

Пузырьки воздуха

С помощью генератора частиц добавили пузырьки, плывущие навстречу киту. Это усилило иллюзию движения и глубины.

Второго кита

Кашалоты — не одиночки, они живут стаями. Чтобы нашему киту не было скучно, добавили ему братишку на задний план. Один — хорошо, а два — лучше.

Прогресс создания окружения

Добавили мягкий поворот камеры при движении мыши. Получилась плавная и ненавязчивая анимация, которая добавляет живости и подчёркивает объём.

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

На наших устройствах всё работало идеально — плавно и без лагов. Но тестирование на стареньком ноутбуке выявило проблему: 3D сильно нагружало систему слабых устройств.

В чём дело? Полигонов немного. Лишние материалы удалены. Текстуры сжаты. Всё вроде оптимизировано…

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

С мобильными устройствами — отдельная история. Флагманские модели ещё справляются с 3D-сценами из Spline, но наш тестовый древний Redmi Note 5 просто отказывается загружать сайт, если в нём встроена даже самая лёгкая сцена с шестью полигонами.

Чтобы решить эту проблему, специально для мобильных устройств мы используем выгрузку зацикленного видео из 3D-сцены. Да, это лишает пользователя интерактива, но сохраняет все анимации, не нагружая производительность телефона.

Для конкурсной работы сделали точно так же — выгрузили 3D в зацикленное видео и добавили в качестве фона на мобильных адаптивах.

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

При отрисовке опирались на принципы современного дизайна:

- Соблюдали визуальную иерархию, работали с контрастами, выравниваниями и унифицированными отступами.

- Отказались от классической сетки — разделили её на две зоны, расставили силовые линии, по которым выстраивали композицию.

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

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

- Добавляли мелкие декоративные детали и иконки — для усиления композиции и визуальных акцентов.

Концепция получилась цельной и завершённой — она точно передавала настроение и суть сайта. Конечно, можно было ещё докрутить отдельные детали, улучшить UI некоторых блоков. Но времени было впритык, и нужно было переходить к вёрстке.

После этого началась финальная сборка в Tilda (5 часов). Дизайн был нестандартным, поэтому всё собирали на зеро-блоках.

Быстро поняли, что времени не хватает. Пришлось расставлять приоритеты. Сначала сделали десктоп, потом мобильные разрешения. Планшеты в итоге не успели проработать.

По умолчанию максимальное разрешение в Тильде — 1200 px. Но хотелось, чтобы сайт круто смотрелся и на 1440 px, и на 1920 px, поэтому добавили эти разрешения вручную и сделали под них отдельную вёрстку.

Чтобы добавить сайту индивидуальности, применили 3 модификатора:

- Кастомный курсор. Заменили стандартный курсор на круг, который при наведении на кликабельные элементы плавно превращается в точку.

- Анимация появления изображений. Модификатор, который добавил плавную анимацию появления изображений с интересным эффектом смещения.

- Горизонтальный скролл. В блоке с фотографиями использовали скрипт, для плавного перетягивания фото по горизонтальному скроллу.

Для всех остальных анимаций использовали стандартный step by step Тильды.

Для адаптивной версии под мобильные разрешения сделали бургер-меню.

После баттла мы полностью завершили проект:

- Сделали недостающие адаптивы.

- Создали прелоудер для мягкой загрузки сайта.

- Разработали кастомную 404-страницу, где вместо кита теперь плавают цифры «404».

- Сделали favicon и SEO-настройки.

Страница «Ошибка 404»

Итоги баттла

В конкурсе участвовало 130 человек. В шорт-лист вошли 10 участников, но наш сайт туда не попал из-за отсутствия палншетного адаптива. Однако жюри всё равно выделило нашу работу и показало её в финальном разборе, отметив оригинальность идеи и проработку 3D.

«Действительно, это выглядит эффектно, очень органично и здорово. С этим хочется развлекаться. Ты ловишь себя на ощущении, как-будто бы кит смотрит прямо на тебя, под каким углом не посмотри. Работа очень достойная.»

Антон Командин, арт-директор Experience Agency, жюри