GOLD MOVING: сайт мувинговой компании, где переезд едет по прокрутке
Мувинговая компания из Лос-Анджелеса продаёт фиксированную цену вместо почасовой. Мы рассказали это не абзацами, а одним переездом от двери до двери: по прокрутке двойка забирает коробки, диван заворачивается сам, трак грузится и уезжает, а пол превращается в дорогу.
Марк Голдман пришёл с готовой идеей, а не с пожеланиями: красная двойка как знак категории, золотой трак, бригада в жёлтых футболках, легенда основателя — 1 500 переездов за пять лет — и форма из четырёх полей с обещанием перезвонить за 20 минут. Про анимацию сказал коротко: «полная свобода».
Главная мысль, вокруг которой строится продажа, — фиксированная цена против почасовой. Почасовой переезд дешевле на бумаге, но клиент сам торопит бригаду, упаковка идёт грубее, а поцарапанные стены становятся его проблемой. Сайт должен был объяснить это за минуту — человеку, который пришёл из рекламы с телефона.
Ограничение было одно, и оно же стало главной идеей: у компании будет золотой трак, целиком затянутый золотой плёнкой. Его нужно было подать на сайте так, чтобы запоминался именно он — фирменный трак, который не спутаешь с соседними мувингами в выдаче. Поэтому трак стал главным героем страницы: его грузят, он уезжает, облетает камера, а в финале он ждёт в темноте с включёнными фарами.
1
переезд от двери до двери — вся главная одна история
162
кадра в трёх секвенциях, которые прокрутка листает вперёд и назад
0
дней съёмки: трак, бригада и двойка сгенерированы
4
поля в заявке: откуда, куда, дата, телефон
Как шла работа
15 рабочих дней
около трёх недель от брифа до запуска
Концепция и тексты
Сценарий прокрутки, что показываем на первом экране, английские тексты про flat rate
Визуал и дизайн
Генерация трака, двойки, бригады и роликов; главная и отдельно мобильная версия
Вёрстка и анимация
Секвенции кадров, сцены по прокрутке, адаптив, скорость загрузки
Админка и заявки
Тексты, SEO и счётчики, заявки в Telegram и на почту — параллельно со сборкой
Запуск
Домен и сервер клиента, проверка на реальных телефонах, передача доступов
Срок в рабочих днях
Первый экран: пустая двойка ждёт работы
Первый экран — огромный заголовок «Flat-rate movers in Los Angeles» и красная двойка с коробками GOLD MOVING прямо между словами. Двойка слегка покачивается, а с первым движением прокрутки коробки заваливаются на неё, колесо проворачивается, и груз уезжает за край экрана. Форма заявки стоит здесь же, внизу: четыре поля, без перехода на другую страницу.
Прогресс этой сцены считает сам браузер — через CSS scroll-driven animations, в том же кадре, что и прокрутка. На телефоне так пропала дрожь: при расчёте из JavaScript двойка и заголовок отставали от пальца на кадр.
Диван заворачивается сам — 49 кадров по прокрутке
Второй экран — про упаковку, главное отличие дорогого переезда. Белый диван по ходу прокрутки накрывается плотным одеялом и плёнкой, а рядом одна за другой появляются плашки: одеяла на каждую вещь, плёнка и скотч, защита полов и дверей, разборка и сборка.
Это не видео, а секвенция: 49 кадров из сгенерированного ролика рисуются на canvas, и прокрутка листает их в обе стороны. Вернулись назад — диван разворачивается обратно. Для телефона нарезан отдельный набор кадров под вертикальный экран.
Погрузка, трак уезжает, пол становится дорогой
Дальше — самая длинная сцена сайта, и она идёт без единой склейки. Бригада грузит коробки в золотой трак, двери закрываются, трак трогается — и жёлтый пол под ним темнеет и превращается в асфальт с разметкой. Пока трак едет, снизу проезжает лента услуг: местные переезды, упаковка, сборка мебели, дальние перевозки, пианино и искусство, хранение.
Секвенции погрузки и облёта сняты с одного стартового кадра трака, поэтому стыки между ними не видны: ролик кончается ровно там, где начинается следующий. В углу экрана стоит спидометр: он показывает скорость прокрутки в милях в час, а если листать слишком быстро, всплывает подсказка «Slow down. We never rush.»
Fixed price против почасовой: две полосы на одной дороге
Главный продающий аргумент показан, а не написан. Камера облетает трак и уходит наверх, трак едет по своей полосе с пунктами flat rate, а по соседней — серый трак Hourly: он трясётся, теряет коробки, отстаёт и уезжает из кадра.
В конце сцены вид сверху: трак проезжает четыре шага работы — заявка и перезвон за 20 минут, осмотр в тот же день, цена в письменном виде, день переезда без спешки. Меню ведёт не в начало сцены, а сразу к нужному моменту: «Flat rate» открывает две полосы, «How it works» — шаги.
61 кадр облёта, тот же трак, что и при погрузке
Серый трак Hourly трясётся и теряет коробки на CSS
Разметка дороги бежит своей анимацией поверх ролика
Пункты меню ведут к моменту внутри сцены
Фраза из точек и основатель между строк
После дороги — одна фраза на весь экран: «Nobody remembers movers. Everyone remembers the scratch.» Буквы собраны из растровых точек и проявляются по словам по мере прокрутки.
Следом — блок основателя: «1,500 moves by Mark» набрано огромным шрифтом, а фото Марка вставлено прямо в строку между словами. На телефоне фото по прокрутке вырастает до половины экрана — уже после того, как человек прочитал заголовок. Финал — трак в темноте с мигающими фарами и та же форма заявки.
Визуал, которого не было: всё сгенерировано
К запуску золотой трак ещё не выехал на улицы, формы и фотосессии тоже не было. Поэтому всё визуальное мы сгенерировали сами: двойку, коробки, диван, бригаду в фирменных футболках, золотой трак в плёнке с логотипом и сцены переезда. Опорой служили фото Марка и картинки, которые он присылал в переписке: похожесть и единый стиль держатся на референсах, а не на удаче.
Ролики для секвенций сделаны в Kling 3.0 по стартовому и финальному кадру — так ракурс и свет не уплывают между сценами. Каждый ролик затем нарезан на кадры, кадры ужаты в WebP, а для телефона сделаны отдельные наборы под вертикальный экран. Золотой трак на сайте подан как фирменный образ компании, а не как фото её машины.
3
ролика Kling — диван, погрузка, облёт
162
кадра в секвенциях для компьютера, отдельный набор для телефона
1
библиотека для движения — плавная прокрутка Lenis
Телефон: та же история, своя раскладка
Покупатель приходит из рекламы с телефона, поэтому мобильная версия собрана не уменьшением, а заново. Форма заявки на первом экране складывается в две колонки, лента услуг едет вместе с траком и доезжает до последнего пункта, а меню открывается под шапкой — кнопка «Get a quote» остаётся на виду.
Админка: тексты, новости и заявки без разработчика
Анимация не мешает скорости
Три секвенции кадров, ролики и плавная прокрутка — и при этом страница открывается быстро: без блокировки главного потока и без скачков вёрстки.
0
Производительность
0
Доступность
0
Практики
0
SEO
- First Contentful Paint
- 2,8 с
- Largest Contentful Paint
- 2,8 с
- Total Blocking Time
- 0 мс
- Cumulative Layout Shift
- 0,005
- Speed Index
- 3,9 с
HTML, CSS, JavaScript
Lenis
Canvas-секвенции из роликов
CSS scroll-driven animations
Kling 3.0 (ролики)
Node.js (админка)
nginx на сервере клиента
Telegram-бот и почта для заявок
Спрашивают чаще всего
Можно ли сделать такой сайт, если у компании ещё нет фото и видео?
Да, GOLD MOVING как раз такой случай: трака и фотосессии к запуску не было. Визуал генерируется по реальным материалам — фото владельца, логотипу, эскизам, — а ролики собираются по стартовому и финальному кадру, чтобы сцены стыковались. Важно подавать такие кадры как фирменный образ, а не как фотографию конкретной машины.
Не тормозит ли анимация по прокрутке на телефоне?
Нет, если не тащить на телефон кадры для компьютера. Секвенции нарезаны отдельно под вертикальный экран и ужаты в WebP, первый экран считается средствами браузера в том же кадре, что и прокрутка, а тяжёлых библиотек на сайте нет — только плавная прокрутка Lenis.
Как владелец меняет тексты, если вся страница — анимация?
Тексты отделены от анимации: в админке каждый блок разложен по полям — заголовок, пункты, подписи. Владелец меняет слово и нажимает «Опубликовать», сайт обновляется сразу. Сцены, кадры и тайминги при этом не трогаются, сломать анимацию из админки нельзя.
Сколько стоит такой сайт?
Зависит от числа сцен и того, нужен ли генерируемый визуал: ролики, кадры для телефона и компьютера, фирменные образы. Лендинг с одной анимированной историей и админкой — понятный объём, который мы считаем по сценарию. Напишите — разберём вашу задачу.
Живые сайты, а не картинки в презентации
Команда Reut
сегодня
Здравствуйте! Нужен сайт для компании
есть примеры, что нравится
с чего начнём?
Здравствуйте! Пришлём бриф под вашу нишу
а по ответам — КП со сроками и сметой
Начнем обсуждение вашего лучшего проекта?
Подписаться на рассылку
Согласен получать письма о новых работах и статьях и на обработку персональных данных
Reut Art
© 2026 Reut · reut.art
ИП Реут Артём Юрьевич · ИНН 910402081314 · ОГРНИП 320911200026247