Apple sells hardware with pages where the product sits in the middle of the screen and the story moves on one chapter per scroll. Vireal Aero is that kind of page for a pair of sunglasses that does not exist. It was built to show what such a site takes, and that it can still load fast on a phone.
The page has five chapters. The first screen is a large headline, "See the light.", with the glasses turning towards you; on a computer they lean slightly after the cursor. In "Lenses" three short lines appear one at a time while the tint of the mirrored lenses shifts with the scroll. In "Design" the frame comes apart: lenses, rim, hinges and temples drift away from each other, hold for a moment over three specs, then go back together.
In "Colors" you pick a frame (silver, graphite or gold) and a lens coating (iris, ocean or amber), and the model changes its material on the spot. The last chapter is a grid of specs that count up once when they come into view.
If the device has no graphics card, or WebGL fails to start, the page still works: it shows a still picture of the glasses in the same place and never downloads the 3D library. With "reduce motion" switched on, nothing is pinned and nothing moves with the scroll: the model stands at one good angle and the text appears without sliding. Theme and language are set before the first paint, so the page does not flash.
How it is built: three.js draws the scene, GSAP ScrollTrigger ties each chapter to the scroll position, and Lenis smooths the mouse wheel on a computer, while phones keep their own scrolling. The model is the Sunglasses Khronos sample by the Khronos Group (Eric Chadwick, Darmstadt Graphics Group), licensed CC BY 4.0. The logos on its temples were replaced with a Vireal mark and the materials were changed; the credit is in the demo's footer.
The scene draws a new frame only when something moves (the scroll, an animation or the cursor), and in a hidden tab it draws nothing. If frames start to take too long, the picture gets slightly less sharp by itself. The design uses one typeface, Inter, and one violet accent taken from the lens. The whole demo is 22 files and 1.5 MB, libraries and the model included.
Measured on 2026-10-01. Lighthouse on the mobile profile: performance 98, with the largest content shown at 2.3 s. That test machine has no graphics card, so, like PageSpeed Insights, it gets the still picture. With the 3D scene loading the score is 90. On desktop: 100. In screen recordings of the full scroll, Chrome on a Mac (Apple M1) gave about 57 frames per second at desktop and phone sizes. The phone size was emulated on the Mac, not measured on a real phone.
In a real project: a 3D model of your own product (from CAD or a 3D file you already have), your texts and brand, and the chapters your product needs. Monthly support from 250 USD: text and price updates, new sections, checks in new browsers and phones, speed monitoring and small improvements.