Product page with a real 3D model: Vireal Aero (concept demo)

Task. A launch page for a physical product, done the way Apple does it: the product stays in the middle of the screen and the story moves on one chapter per scroll. It still has to load fast on a phone.

Solution. Five chapters for a pair of sunglasses that does not exist. On the first screen the glasses turn towards you. In "Design" the frame comes apart into lenses, rim, hinges and temples, then goes back together. In "Colors" you pick a frame and a lens coating, and the 3D model changes its material on the spot. If a device can't run WebGL, the page shows a still picture and never downloads the 3D library. With "reduce motion" switched on, nothing moves with the scroll. Built with three.js, GSAP ScrollTrigger and Lenis, in English and Russian, with light and dark themes.

Measured on the demo itself (1 Oct 2026): Lighthouse performance 98 on mobile (90 with the 3D scene loading) and 100 on desktop, about 57 frames per second while scrolling on a Mac with Apple M1. The whole demo is 1.5 MB, model and libraries included.

For your product I would use your own 3D model (from CAD or a 3D file you already have), your texts and the chapters your product needs. Monthly support after launch starts at $250.

Concept demo: the Vireal brand is fictional and there is no client. 3D model: the Sunglasses Khronos sample by the Khronos Group, CC BY 4.0.