Lumière Fine Jewelry

Overview

Lumière is a concept build for a fine-jewelry house. Jewelry is sold on light and detail, so the site was designed around both: motion that behaves like light moving across a stone, and photography given enough room to show the work.

Challenge

Jewelry e-commerce usually reduces to a product grid, which flattens exactly the qualities that justify the price — craft, material, occasion. The challenge was building a page that sells the house before it sells the catalogue, without slowing down someone who came to browse pieces.

Approach

The hero holds a single piece under a slow push-in with sparkles drifting across it. Collections are six cards, each catching a shine sweep as the cursor passes. From there the page moves through the workshop, the materials, bespoke commissions, and the occasions people actually buy for.

Design

Near-black with a gold accent and a wide-tracked serif display face, deliberately quiet UI type, and generous negative space so each photograph carries its own frame rather than competing in a grid.

Development

React 19 and Vite, Tailwind CSS v4 tokens, and Framer Motion for the push-in, sparkle drift, shine sweep and scroll-linked reveals. Consultation and search open as overlay dialogs with scroll lock and Escape handling. Every image loads behind a blurred low-quality placeholder.

Responsive Experience

Audited at 360, 390, 740 landscape, 768, 1024 and 1440: no sideways overflow, no clipped text, and footer and legal links sized as real tap targets rather than 26px text links.

Final Result

Live at lumiere-jewelry-three.vercel.app as a concept piece — the collections and prices are illustrative, not a real store.

Key Features

• Sparkle-lit hero with a slow push-in
• Six collection cards with a cursor-triggered shine sweep
• Craft, materials, bespoke commission and occasion sections
• Consultation and search overlays
• Reduced-motion aware throughout