Case 03 / 03[Industrial B2B] — [2026]

Magic Xtal.

Клиент: Magic Xtal Ltd. — производитель прецизионных кварцевых генераторов (с 2001)
Роль: Дизайн и разработка
Стек: Astro 5 SSG · Three.js · GSAP ScrollTrigger · Lenis
Год: 2026
Статус: В разработке (демо)

Полный редизайн для производителя прецизионных кварцевых генераторов: тёмная инженерная эстетика, параметрический каталог на 30 моделей и продукт, который собирается из частиц по мере скролла.

Открыть живое демо

Magic Xtal — Point-cloud MXO37 — сборка, поставленная на скролл страницы — Point-cloud MXO37 — сборка, поставленная на скролл страницы

Обзор

Компания делает термостатированные кварцевые генераторы с 2001 года, а старый сайт на Битриксе прятал это за стеной серых таблиц. Редизайн сохраняет инженерный тон — тёмно-синий, нулевые скругления, никаких мягких теней — и ставит сам продукт в центр экрана.

Каталог параметрический: 30 моделей приходят из YAML/JSON, и ни одна цифра характеристик не написана в разметке. Четыре слоя ведут инженера от категорий к фильтрам (частота, стабильность в ppb, потребление, габарит) и к карточке со sticky-3D, кривыми фазового шума и JSON-LD Product — плюс визард подбора для тех, кто знает требование, а не артикул.

Сверх этого: 22 интерактивных вьюера, анимированная летопись компании из 14 вех с 1997 по 2025, EN/RU с сохранением страницы при переключении и SEO-разворот против всего, что делал старый сайт.

Посмотреть вживую/demos/magic-xtal/en/

Каталог с 30 моделями и 22 интерактивными 3D-вьюерами работает внутри демо — откройте и покрутите.

Фирменная анимация

Как это устроено.

В hero не рендер продукта, а сам продукт, разобранный на точки. Скролл лендинга собирает его, разбирает и возвращает обратно; drag — вращает.

01
Процедурное облако
Корпус MXO37 сэмплируется в точки и рисуется с additive-блендингом. Никакой импортированной модели — геометрия генерируется в браузере.
02
Хореография на скролле
Сборка → разборка → возврат привязаны к скроллу всей страницы: продукт собирается, пока о нём читают.
03
Вращение мышью
Drag крутит облако независимо от скролла. На внутренних страницах та же сцена уходит в фоновый режим rotate с приглушением по слоям.
04
22 настоящих вьюера
У каждой модели каталога свой: вращать, колесом разбирать сборку, PBR-металлы на корпусе.

Magic Xtal — Вьюер продукта — вращать, колесом разбирать — Вьюер продукта — вращать, колесом разбирать

Magic Xtal — mobile — Вьюер продукта — вращать, колесом разбирать

Посмотреть вживую/demos/magic-xtal/en/

Возможности06

01
Параметрический каталог
30 моделей из YAML/JSON. В разметке нет ни одной цифры характеристик — правка спеки становится правкой данных.
02
Четыре слоя навигации
Категории → фильтры (частота, стабильность ppb, потребление, габарит) → карточка → визард подбора для тех, кто знает требование, а не артикул.
03
Карточка продукта
Sticky-3D рядом со спеками, кривые фазового шума и JSON-LD Product у каждой модели.
04
Летопись компании
14 вех с 1997 по 2025, анимированный таймлайн вместо PDF, который никто не открывает.
05
EN / RU
Переключение языка оставляет вас на той же странице, а не выкидывает на главную.
06
Дизайн-дисциплина
border-radius: 0 глобально, никакого тёмного текста на тёмном, один акцентный синий. Инженерия, а не украшательство.