〽️ 3D e-commerce, который чувствуешь через экран Кейс: интерактивный 3D-шоукейс баскетбольного мяча с кинематографическими анимациями Наша команда реализовала проект, в котором продукт — не просто карточка на странице, а полноценный интерактивный опыт. Баскетбольный мяч живёт в браузере: его можно рассмотреть, прокрутить и буквально ощутить через экран. ⚡️Стек технологий: — React 19 — архитектура интерфейса — Three.js / React Three Fiber — 3D-рендеринг в реальном времени — GSAP + ScrollTrigger — кинематографические scroll-анимации — WebGL + кастомные шейдеры — процедурные текстуры без единого изображения — Web Audio API — звуковые эффекты, сгенерированные кодом Что под капотом: Процедурная текстура мяча Кожа, швы, характерная пупырчатая поверхность — всё создано математикой через кастомные шейдеры. Ни одного растрового изображения. Результат — гиперреалистичный мяч, который весит килобайты. ✨Scroll-driven анимации Мяч перемещается, вращается и трансформируется синхронно со скроллом. Физика, подиум, шоукейс продукта — каждая секция становится новым кадром визуальной истории. ✨Анимация «в корзину» По клику мяч вылетает из 3D-сцены и приземляется в иконку корзины. Под капотом — перевод 3D-координат в 2D, расчёт дугообразной траектории и синхронизация масштаба. Работает одинаково точно на любом экране. ✨Звук из кода Клик «добавить в корзину» сопровождается звуковым эффектом, который генерируется прямо в браузере через Web Audio API. Ноль загруженных аудиофайлов — мгновенный отклик. Результат: — Вес проекта: менее 3 МБ — Полная адаптивность: от мобильного до 4K-монитора — Ноль внешних текстур и аудиофайлов — всё генерируется кодом — Реализовано нашей командой — чистый стек, никаких компромиссов Если вашему продукту нужен такой уровень подачи — напишите нам @stunagncy Сам сайт: https://slamdunk-five.vercel.app