Product landing experience · 2026
Oakley Meta
A scroll-driven product landing page for the Oakley Meta AI glasses, shipped to production on oakley.com across more than twenty-five locales.
Chapter / 01 Project overview
One continuous page that advances with the scroll across twenty-five markets.
The story moves as the page scrolls: a video hero, a sequenced AI-video showcase, animated feature overlays, a comparison table, an interactive 3D viewer with exploded views, and lens and prescription options. Available sections and commercial features change per country through a configuration and feature-flag layer, so one codebase serves markets with very different requirements.
It is framework-free TypeScript: a small custom core with a state manager, an event bus, and one class per section with its own lifecycle. A Vite and Handlebars pipeline prerenders a static entry per locale with its own SEO metadata and hreflang matrix, while the Three.js viewer loads only past a scroll threshold and degrades under an FPS watchdog on low-performance devices.
- Year
- 2026
- Role
- Frontend architecture
- Type
- Product launch
- Format
- 25+ locales, 9 languages
Selected views
-
Sections enter and leave on scroll progress, each one owning its own lifecycle. -
The Three.js viewer moves the camera per hotspot and loads only past a scroll threshold.