Sable — нишевый парфюм (3D-флагман)

Лендинг вымышленного парфюмерного бренда с процедурным 3D-флаконом на Three.js. Финальный проект wow-серии портфолио — закрывает нишу React Three Fiber.

Фишка: флакон целиком построен кодом (без импортированных моделей) — гранёное стекло через MeshTransmissionMaterial, металлическая крышка, тонированная жидкость. Две механики сразу: скролл-кинематография (камера и флакон движутся по прокрутке) и живой конфигуратор (три аромата меняют цвет жидкости, свечение и ноты в реальном времени, флакон вращается перетаскиванием).

Стек

• React 19 + Vite 8 + TypeScript
• Three.js + @react-three/fiber + @react-three/drei + @react-three/postprocessing
• SCSS (кастомные свойства, токены), framer-motion для 2D-раскрытий
• Шрифты через @fontsource (Cormorant Garamond / Manrope / Inter)

Особенности

• Процедурная геометрия — LatheGeometry для гранёного корпуса, ноль внешних ассетов и лицензий
• Студийный свет без HDRI-файлов — собран из Lightformer, работает офлайн
• Производительность: тяжёлая 3D-сцена вынесена в отдельный чанк (code-splitting), cap DPR, меньше сэмплов стекла и слабее bloom на мобилке
• Деградация: нет WebGL → премиум CSS-фолбэк; prefers-reduced-motion → сцена статична, конфигуратор работает по клику; лоадер на время инициализации
• Доступность: контраст WCAG AA в обеих темах, семантика, aria-label, видимый focus, форма с валидацией без alert
• SEO/GEO: JSON-LD (Brand + Product), OG/Twitter-превью, robots.txt, sitemap.xml, llms.txt, страница 404
• Тёмная тема по умолчанию + светлая (sable-theme в localStorage)
• Акцент: indigo #6366f1

Разработка

npm install
npm run dev      # http://localhost:5173/sable-landing/
npm run build    # сборка в dist/
npm run preview  # предпросмотр сборки

Деплой

GitHub Pages через GitHub Actions (.github/workflows/deploy.yml): сборка Vite с base: '/sable-landing/', публикация артефакта на Pages.

Примечание

Бренд вымышлен, продукт не продаётся, форма работает в демо-режиме — это портфолио-проект.