Анимации
и интерактив

★ Флагман

01a

Скролл-глобус (фильм)

Глобус как кино: скролл режиссирует камеру — ныряет к хабам, перестраивает дуги по видам транспорта, цена «расшифровывается», числа собираются одометром. Сплав двух фаворитов.

globe.glGSAPLenis

Открыть демо

3D

01b

3D-глобус маршрутов

Настоящий 3D-глобус: дуги «текут» от китайских хабов к Москве, точки пульсируют. Крутится, зумится, переключается по транспорту.

globe.glthree.jsarcs

Открыть демо

Конфигуратор

01c

Глобус-конфигуратор

Кликни хаб на глобусе → камера долетает, рисуется дуга до Москвы, слайдеры веса/объёма + транспорт → мгновенная котировка цена/срок. Lead-gen в один экран.

globe.glclick→quotelead-gen

Открыть демо

ECharts

02b

Графики тарифов

«Что вам важнее?» — три слайдера приоритетов, и радар вживую морфит, подсвечивая рекомендованный транспорт. Плюс анимированные бары.

ECharts v6radarrecommender

Открыть демо

Live

04b

Трекинг (live)

Груз реально едет по маршруту, пройденный путь заливается, тикает ETA-обратный отсчёт, чекпоинты загораются. «Это настоящий софт».

getPointAtLengthETA-таймер

Открыть демо

GSAP

06b

Скролл-стори

Плавный скролл (Lenis) + закреплённая сцена: маршрут рисуется по мере прокрутки, груз летит по пути, заголовок раскрывается построчно.

GSAPLenisDrawSVG

Открыть демо

★ зашло

$1 248

03

Калькулятор стоимости

Слайдеры вес/объём + транспорт → живой расчёт по объёмному весу, анимированная цена и сравнение по всем видам.

range sliderобъёмный вес

Открыть демо

★ зашло

Оформление заявки

Приём в Китае

Таможня

05

Таймлайн 10 этапов

Вертикальный таймлайн доставки, заливается по мере скролла — каждый этап загорается в центре экрана, кольцо считает прогресс.

scroll-drivenIntersectionObserver

Открыть демо

Горизонт

07

Горизонт-путь

Скроллишь вниз — едешь вправо по маршруту Китай→Россия через 5 станций (склад → таможня → граница → импорт → клиент), груз движется по линии.

horizontal pinDrawSVGMotionPath

Открыть демо

Дата-стори

08

Цена × скорость

Дата-фильм: по скроллу один за другим появляются 4 вида транспорта на графике, рисуется кривая «дороже = быстрее», подсвечивается «ваш оптимум».

SVG scatterscrollytelling

Открыть демо

CSS 3D

09

Контейнер

3D-контейнер (чистый CSS-3D, без тяжёлых моделей) поворачивается и раскрывает двери по скроллу — внутри груз и цифры. Apple-style.

CSS transformsscrub

Открыть демо

Мини-кино

10

Таможня под ключ

Мини-кино: влетают документы, печатается код ТН ВЭД, штамп «ВЫПУЩЕНО» бьёт с размаху, галочки этапов тикают зелёным.

GSAP timelineDrawSVG

Открыть демо

Типографика

ИЗ КИТАЯ
В РОССИЮ
ПОД КЛЮЧ

11

Манифест

Кинетическая типографика: гигантские фразы «ИЗ КИТАЯ → В РОССИЮ → ПОД КЛЮЧ → NEW WAY» морфятся по весу шрифта и раскрываются из-под маски на скролле.

SplitTextvariable fontpin

Открыть демо

Zoom

12

Масштаб

От одной коробки до всей сети: скролл зумит наружу через масштабы — коробка → паллета → контейнер → склад → порт → сеть Китай→Россия.

cross-zoomGSAP scrub

Открыть демо

24/7

13

24/7

Груз едет, пока сменяются сутки: небо плавно идёт день → закат → ночь → рассвет, часы тикают, города зажигаются. «Мы не спим».

gradient cycleparallax

Открыть демо

Чертёж

14

Чертёж маршрута

Вся операция Китай→Россия плоттится как инженерный blueprint: маршрут, узлы-хабы, размерные выноски, символы видов транспорта, угловой штамп.

DrawSVGтехнический

Открыть демо

Parallax

15

Порт

Слоистая parallax-гавань: судно входит, кран снимает контейнер и ставит на фуру, слои движутся с разной скоростью — настоящая глубина по скроллу.

parallax-слоиMotionPath

Открыть демо

Цифры

98%

ТОЧНО В СРОК

16

Цифры

Кино-раскрытие цифр доверия: 10+ лет, 5000+ поставок, 200+ клиентов, 98% в срок, 4 вида транспорта — каждая на своём экране со счётчиком и микро-визуалом.

count-upSVG ring

Открыть демо

NEW WAY

3D

3D-контейнер

Настоящий WebGL (three.js), не CSS-фейк: крутите 40-футовый контейнер мышью, откройте двери — камера заезжает внутрь и показывает загруженный груз, ползунок загрузки пересчитывает тонны/м³/% вживую. Студийный свет, гофро-корпус, мягкая тень.

three.jsOrbitControlsPBR

Открыть демо

В фокусе

17

В фокусе

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

pin · scrubprogress ring

Открыть демо

18

Рентген пути

Сканер-полоса едет по грузу: слева — глянцевая обложка, справа — просвеченное нутро (датчик, пломба, GPS). Прозрачность буквально — показываем то, что прячут другие. Трижды: контейнер, борт, фургон.

clip-path scanDrawSVG

Открыть демо

19

Гонка сроков

Скролл крутит не пространство, а время: счётчик дней бежит 0→45, и четыре вида транспорта финишируют каждый на своём сроке — авиа 6–9, авто 14–18, ж/д 18–25, море 30–45. Видно, за что платишь.

time-scrublanes

Открыть демо