04 / 06 · 2025 · 3D-витрина
Kinetic Audio
Запуск флагманских наушников: продукт разбирается на слои прямо во время скролла — от корпуса до драйвера.
- Клиент
- Производитель наушников
- Срок
- 10 недель
- Что делали
- Концепт3D-продакшнРазработкаОптимизация
Awwwards Site of the Day
вес 3D-модели
добавлений в корзину
среднее время на странице
Задача
Нужно было объяснить, почему наушники стоят как ноутбук, не используя ни одного рендера из презентации. Все конкуренты показывали одинаковые студийные фото.
Решение
Мы отсканировали инженерную модель и сделали 3D-«разборку»: скролл снимает слои — ткань, алюминий, магнитная система, драйвер — и подсвечивает деталь, о которой идёт речь. Цвета корпуса меняются в реальном времени, кнопка «купить» ведёт сразу в корзину Shopify с выбранным цветом. Модель весит 1,1 МБ благодаря Draco и загружается прогрессивно.
Что внутри
Три решения, которые
сделали результат
Разборка на скролле
Двенадцать слоёв продукта раскрываются по одному — каждая деталь получает свой момент.
Цвет в реальном времени
Материалы переключаются без перезагрузки модели; выбор передаётся в корзину.
Быстро на телефоне
Прогрессивная загрузка и упрощённая геометрия для мобильных — сцена стартует за 1,4 с.
Технологии
- React Three Fiber
- Blender
- GLTF + Draco
- GSAP
- Shopify