Moto Card — Сайт закрытой карты, сделанный как 3D-ролик о продукте
Moto Card — металлическая платёжная карта только для участников клуба. Сайт ближе к ролику о продукте, чем к лендингу: тёмная сцена, предмет, который раскрывается постепенно, и единственный путь — заявка — в конце.
Задача
На бумаге премиальная карта — обычный продукт: вся ценность в том, насколько она ощущается закрытой и качественно сделанной. Фотография делает металлическую карту плоской, а привычный список функций поставил бы её в один ряд с любой массовой бонусной картой.
Подход
Мы поставили карту в 3D на тёмной сцене и связали её появление с прокруткой: объект поворачивается и ловит свет по мере движения по странице. Вход намеренно узкий: одно действие — «Подать заявку», — а единственная конкурирующая ссылка ведёт на условия членства.
Строить сцену, а не страницу
Весь сайт лежит на почти чёрном фоне. Карта стоит на единственном постаменте под направленным светом, а всё остальное — навигация, текст, единственная кнопка — набрано с низким контрастом вокруг, чтобы ничто не отвлекало от предмета.
Сдержанность и есть механизм. Когда на странице мало элементов, продукт воспринимается как редкость.
Анимация, связанная с прокруткой
Карта — не зацикленное видео, а 3D-объект в реальном времени на Three.js, анимацию которого выстраивает GSAP. Положение прокрутки управляет поворотом и светом, поэтому посетитель сам раскрывает продукт и рассматривает его, а не просто смотрит.
Это геометрия, а не видео, поэтому один и тот же файл работает на всех размерах экрана и во всех цветах без новой отрисовки.
Вход только через заявку
Нет формы регистрации и таблицы цен. Одно действие — «Подать заявку» — и ссылка на условия членства рядом. Это вся зона конверсии, и она работает на позиционирование сильнее любого текста об эксклюзивности.
Разработка
Сайт собран на Webflow: GSAP управляет анимацией, Three.js отрисовывает карту, а слой плавной прокрутки делает анимацию стабильной во всех браузерах. Webflow позволяет клиенту самому править тексты и изображения, не трогая код анимации.
Что сделали
- 3D-карта в реальном времени на Three.js на тёмной сцене
- Появление по прокрутке, выстроенное на GSAP
- Единственный путь конверсии — заявка
- Сайт на Webflow, чтобы клиент сам правил контент
Частые вопросы
Металлическую карту оценивают по отделке и весу, а плоская фотография это теряет. Отрисовка в реальном времени позволяет посетителю поворачивать карту под движущимся светом, а один файл закрывает все размеры экрана и все цвета.
Да. Появление привязано к положению прокрутки, а не к фиксированной временной шкале, а слой плавной прокрутки сохраняет стабильность во всех браузерах; геометрия одна и та же на любом экране.
Потому что карта доступна только по заявке. Таблица цен или форма регистрации противоречили бы позиционированию, поэтому вся зона конверсии — одно действие «Подать заявку».
Как устроен сайт
«Сайт ощущается скорее как знакомство с продуктом, чем как обычный лендинг. 3D-анимация карты была важной частью того, чего мы хотели, и Sakura воплотила её великолепно.»