Skip to main content
CREATIVE TECH3D WEBSCROLL CINEMA

POLARY: A CINEMATIC 3D NARRATIVE ENGINE FOR ENTERPRISE AI

Cinematic 3D Narrative Engine

03
Engine systems
01
Real-Time systems
01
Security systems
01
Data systems
ice-ai-eosin.vercel.app
01 — Overview

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.
02 — Deep-Dive Modules

How it was built, system by system

01 / 14
Engineered a Wheel-Gated Narrative State Machine (Not Scroll Scrubbing)
Core Engine & Business LogicModule 03

Engineered a Wheel-Gated Narrative State Machine (Not Scroll Scrubbing)

chapterStore is a mutable singleton with step / iceBeat / rivalryBeat / iceDone / rivalryDone plus pub/sub. Mountain (3 beats) → ice (frost → crack waves → shatter) → rivalry (Polary + icons → shatter rivals → cave) → unlock. Cooldowns, animating locks, and touch/keyboard parity keep the intro cinematic and deterministic.

Core Engine & Business Logic3
Real-Time, Media & Tracking1
Auth, Security & Compliance1
Data, State & Performance1
Interface, Motion & Accessibility7
Engineering Highlights1

Related Projects

Explore more of my work

smoke
logo

"If Your Dreams do not scare you, they are too small !"

Got a project? Let’s vibe together and
make it ninjaa-precise—get in touch!

Call Me Now !

mail

noordragon2004@gmail.com

address

from egypt,mansoura

phone

+20 1145838187