WebE-commerceLuxury3D Web

Lumière & ValeFine Jewellery Storefront

An online storefront for a fine jewellery house: an editorial home page with collections, best sellers, a try-on showcase and a ring rendered in real-time 3D, made to feel as considered as the pieces it sells.

Start a similar project

Category: Web
Services: Website Development
Year: 2026
Built with: Astro, React Three Fiber, Three.js +3 more

Overview

The project

Planning something similar?Get a free discovery call

Lumière & Vale is an online storefront for a fine jewellery house. The home page opens like a magazine cover: a portrait in an arch, a fan of photographs, the season’s headline, and a ring turning in real-time 3D on a stone plinth. From there it moves through the collections, a try-on showcase, the best sellers with prices, a film of the craft, the house standard and what customers say.

The site is built with Astro, so the words and photographs arrive as plain, fast HTML, and the 3D is added on top with React Three Fiber and custom shaders. Scrolling is smoothed, sections reveal themselves in time with it, and the amount of 3D detail is chosen from each visitor’s graphics hardware so the page stays comfortable on a phone.

We developed the site end to end: the layouts, the motion, the 3D ring and the responsive behaviour from phone to desktop.

Highlights

What makes it work

An editorial hero: a portrait in an arch, a fan of photographs and the season's headline in a classic serif
A ring in real-time 3D, turning on a stone plinth beside the headline
Collections as a list that opens: Necklaces, Rings, Bracelets and Earrings, each with its number of designs
A try-on showcase on a phone, with a pendant, earrings, a ring and a bracelet to choose between
Best sellers with prices and a Buy Now button on every card
A film of the craft that plays inside the page
The house standard in six points, from certified diamonds to worldwide delivery
Customer stories, an Instagram wall and an FAQ that opens in place
A ribbon of four promises that never stops: free worldwide shipping, lifetime warranty, secure payments, 30-day returns
The level of 3D detail is set from each visitor's graphics hardware, from phone to desktop
Smooth scrolling, with every section revealed in time with the scroll

The challenge

Jewellery is bought on trust and on looks. The site had to earn both in the first screen, and keep a real-time 3D ring from slowing down everything around it.

5 problems we had to solve, from design, visual quality, performance and more.

01 / 05Design
Luxury is restraint
Cream, deep burgundy and one classic serif carry the whole site. Each section does one job and leaves room around it, so the photography and the pieces do the talking rather than the interface.
02 / 05Visual quality
A ring that looks like a ring
Polished metal and cut stones are among the hardest things to draw convincingly in a browser. The ring is lit like a product photograph and sits on the same stone plinth as the photography, so the 3D reads as part of the picture, not as an effect placed on top of it.
03 / 05Performance
3D on a phone
Most visitors arrive on a phone. The page reads the device's graphics hardware when it opens and sets the level of 3D detail to match, and the 3D code is kept apart from the rest so the words and photographs do not wait for it.
04 / 05Interaction
Seeing it on
The try-on showcase sits in a phone in the middle of the page, with four pieces to choose between and a single button to open it, so the idea is understood in one look.
05 / 05UX design
From browsing to buying
Collections come first for people who browse and best sellers with prices come next for people ready to choose. The promises that remove doubt, shipping, warranty, returns and secure payment, stay in view along the way.
5 of 5 solved
A storefront that reads like a magazine and still gets a visitor from the first photograph to Buy Now.
Tell us your challenge