Inspiration Traditional e-commerce grids kill the magic of luxury shopping. When a $50,000 skeleton-dial timepiece is squeezed into a flat, silent grid of static 2D images, it loses its premium feel, material textures, and sense of weight. Walking into a physical high-end boutique—whether on Place Vendôme in Paris or Bond Street in London—is a tactile and audio-visual ritual of soft lighting, deliberate movements, and the crisp mechanical sound of gears.
We set out to bridge the gap between physical luxury and digital retail. Our goal was to create an online showroom that doesn't just display a product, but evokes the same tactile and emotional response as holding it in your hands. This inspired Lumina: an experiential, ultra-luxury single-product showroom where design and gravity surrender to interactive art.
What it does Lumina drops the user into a dark, atmospheric 3D environment centered around The Celestial Tourbillon, a hyper-realistic, open-worked mechanical timepiece.
Cinematic 3D Discovery: Instead of browsing a static details page, users navigate through smooth, GSAP-driven camera transitions that sweep into macro close-ups—focusing on the skeleton dial, the sapphire crystal caseback, the knurled titanium crown, or the satin-brushed bracelet links. The lighting dynamically adjusts to highlight the material textures of each component. ASMR Procedural Audio: To replicate physical interaction, the page features a fully speed-mapped audio engine. As you click and drag to rotate the watch, the ticking of the gears speeds up or slows down in real-time, mapping the audio playback rate directly to your cursor velocity. Deep ambient hums and high-frequency glass chimes accompany camera views and UI transitions. Luxury E-Commerce Flow: The experience resolves in an elegant, multi-step "Inquire" drawer. The user goes through an intuitive selection, shipping, and secure payment simulation that maintains the boutique's minimalist design aesthetic. How we built it 3D Viewport: We utilized React Three Fiber (R3F) and Three.js to render the timepiece, setting up a complex, responsive lighting rig (key, fill, rim, and spot lights) that interpolates positions during transitions. Soft contact shadows ground the object in space. Procedural Sound Engine: Rather than loading bloated .mp3 or .wav files, we built a 100% procedural synthesizer using the native HTML5 Web Audio API. We synthesized: A continuous atmospheric drone (55Hz sub-bass triangle wave modulated by a 0.1Hz LFO). Tactile mechanical ticks (white noise buffer shaped by a bandpass filter and a sharp 2ms-attack/35ms-decay volume envelope). Ambient UI chimes and transitions (frequency-swept sine and triangle waves). State Bridge & Animation: We used Zustand as a lightweight state engine to connect the user's cursor drag velocity on the Canvas directly to the synthesizer tick rates. Camera and FOV transitions are orchestrated smoothly with GSAP. Visual Interface: The overlay layout is built on a responsive vanilla CSS design system utilizing a dark color palette, subtle glassmorphism, and premium typography (Cormorant Garamond and Inter). Challenges we ran into Browser Audio Restrictions: Modern browsers block audio context initialization until a direct user gesture occurs. To avoid console errors and broken audio, we turned this limitation into a design feature: the audio context is suspended initially, and the moment a user clicks or touches the watch to explore it, the context is resumed—effectively "igniting" the boutique's atmosphere. Network Failures and Asset Loading: Relying on loading massive external .glb 3D files over the network can break a live demo. To address this, we built a gorgeous procedural fallback watch model entirely out of Three.js primitive geometries. If a model fails to load, the engine seamlessly switches to this built-in model, complete with translucent sapphire crystal, metallic lugs, and a rotating tourbillon ring. Physics of Sound Velocity: Mapping rotation drag to sound required calculating real-time angular velocity. We had to measure the coordinate differences between frames, divide by the frame time delta, normalize the scalar speed, and pass it through a tick accumulator threshold to trigger clicks that sound natural rather than chaotic. Accomplishments that we're proud of Extremely Tiny Footprint: Because all audio is generated procedurally from raw code and the heavy 3D assets are code-split, the initial page payload is optimized to just ~68KB (gzipped). Tactile Speed Mapping: Spinning the watch and hearing the immediate, organic tick feedback creates a highly satisfying, physical connection with a virtual object. Adaptive Lighting Rig: The moving spot and directional lights create a cinematic glow on the metal textures that feels premium and premium-branded. What we learned Web Audio API is a Superpower: Procedural audio is not just lightweight—it's highly interactive. We learned how to sculpt noise, map envelopes, and synthesize complex textures without loading a single audio asset. Design restraint in Luxury Retail: When displaying high-end luxury, less is more. Restraining UI elements, utilizing white space, and using subtle micro-animations make the product shine and feel exponentially more expensive. What's next for Lumina WebGPU & Real-Time Raytracing: Leveraging next-generation WebGPU pipelines to render photorealistic glass refraction, metallic anisotropy, and light bounce on the dial components. Interactive Atelier: Expanding the configurator, allowing users to customize dial colors, bezels, and straps. The procedural audio engine would adjust its click pitch and resonance to match the chosen materials (e.g., gold vs. titanium). Spatial Computing (WebXR): Porting the boutique to headsets like the Apple Vision Pro, allowing clients to place the timepiece on their actual desk and hear the mechanical ticks in full spatial 3D audio.
Log in or sign up for Devpost to join the conversation.