Данте — Божественная комедия
Иммерсивная 3D-визуализация «Божественной комедии» Данте — 14 233 терцины, переведённые в цвет, геометрию и пространство. Листаемое путешествие через Ад, Чистилище и Рай.
Dante Color
10 weeks
2025
Результаты
8 min
Avg Session
Time spent navigating the work
45K/mo
Page Views
Organic traffic at peak
14,233
Tercets
Mapped in color and 3D space
1.2s
Load Time
Time to interactive (mobile)
Задача
Проект требовал рендеринга 14 000+ текстовых фрагментов как интерактивных 3D-объектов при сохранении 60fps на мобильных. Навигация должна была ощущаться как перелистывание средневекового манускрипта, а цветовая система — отражать эмоциональную дугу каждого канто.
Наше решение
Построили 5-экранный навигационный пайплайн: Intro → Colormap → Parts → Cantos → Tercets → Tercet Detail. Каждый переход — Framer Motion с анимациями по scroll. 3D-кристалл в центре — Three.js OctahedronGeometry с MeshTransmissionMaterial (хроматическая аберрация, преломление). Свайп-навигация на детальной странице по паттерну 3 слайдов. Цветовая карта строится на расчёте luminance.
Системная архитектура
3D Layer
Three.js via React Three Fiber. OctahedronGeometry with MeshTransmissionMaterial — chromatic aberration, refraction, scroll-driven rotation and scale.
Navigation Flow
Intro → Colormap → Parts → Cantos → Tercets → TercetDetail. Each screen is a full-page Framer Motion animated route with directional transitions.
Color System
luminance-based binary contrast switch (>0.35 threshold). Each tercet gets a unique color derived from its position in the poem's emotional arc.
Performance
transition-all removed from 3000+ elements to prevent frame drops. CDN Tailwind replaced with PostCSS/Vite build. Ambient glows fixed-positioned with pointer-events:none.
Технический стек
“I wanted people to feel Dante, not just read about him. FLUORITE made that possible — the 3D crystal, the colors, the swipe rhythm. It's exactly the experience I imagined.”
Creative Director
Dante Color Project
Готовы создать что-то выдающееся?
Обсудим, как применить схожий архитектурный подход к вашим задачам.