POLARY: A CINEMATIC 3D NARRATIVE ENGINE FOR ENTERPRISE AI
Cinematic 3D Narrative Engine
The problem worth engineering
Polary is a full-viewport marketing experience that turns a product story into a film-like descent through ice. The mountain is not a hero image — it is a dual React Three Fiber canvas stack (sky/lights behind HTML copy, Draco-optimized mountain in front) so peaks can occlude brand text without double-drawing silhouettes.
Narrative progress is not scrubbed by scroll: a module-level chapterStore drives discrete wheel/touch/keyboard beats — mountain camera dolly, frost → crack → Voronoi shatter, rival-icon reveal, then Lenis smooth-scroll unlock into GSAP comparison sections. The hard problems were interaction correctness under dual input systems (R3F canvases must never steal the wheel; Lenis.stop() preventDefaults and would kill the beat machine, so lock uses Lenis prevent instead), mobile viewport safety (100svh, ScrollTrigger ignoreMobileResize, scaled data hubs), and motion that stays recoverable (bfcache BootReset, manual scrollRestoration, ice-boot loader gated on mountainInfo.ready).
Built on Next.js 14 App Router (static export for Cloudflare Pages), Three.js 0.169 + R3F/Drei, GSAP 3 + @gsap/react, Lenis, d3-delaunay, and custom GLSL for alpine sky, snow, and wind.
- Dual-canvas React Three Fiber mountain scene with a wheel-gated narrative state machine.
- Voronoi ice-shatter pipeline feeding Lenis unlock into GSAP product-story sections.
- Camera beats budgeted for locked 60fps cinematic scroll on desktop.
How it was built, system by system

Interface documentation
Click any screen to inspect it full size.
Related Projects
Explore more of my work

Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform

Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)

Fix Vision | Interactive High-Performance Creative Agency Platform

IQ Academy | Full-Stack Arabic EdTech Learning Platform

TMT Eye | Enterprise Intelligent Transport Operating System

BioBlob | Real-Time Bio-Inspired Simulation Engine

Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform

Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)

Fix Vision | Interactive High-Performance Creative Agency Platform

IQ Academy | Full-Stack Arabic EdTech Learning Platform

TMT Eye | Enterprise Intelligent Transport Operating System

