2026brandingOG Jewelers · Miami7 weeks

OG Jewelers — digital flagship

Digital flagship for a premium Miami jewellery house with three boutiques, specialising in GIA-certified diamonds and investment-class watches (Rolex, Patek, AP, Richard Mille). Reads like a Hodinkee editorial — and runs a live auction layer over $24M/year on eBay.

https://og-jewelers.vercel.app/
jewelry
hover.tracked
Surface

What users see. Identity, motion, UI craft, copy.

Cormorant Garamond italic with Manrope body and JetBrains Mono tags. Obsidian + a three-stage champagne gold gradient (#F5D58C → #C9A35F → #8E6D2F) — no vulgar "jewellery yellow". Every section closes with an italic shimmer phrase — a stylistic refrain through the whole page. Film grain at 5% opacity in overlay mode pulls "digital" out of the interface.

Editorial LayoutLive Auction WidgetBento GridCount-up StatsMarquee BrandsCursor Sheen
scripta://case/og-jewelers/architecture
Substrate

What holds it up. Architecture, contracts, infra, latency.

Procedurally assembled cluster of three Rolex-Day-Date-style watches built from Three.js primitives — fluted bezel, indexed dial, crown, lugs, links. MeshPhysicalMaterial (metalness 1.0, clearcoat, low roughness) with a multi-tier studio lighting rig: warm key, two gold kickers, a cool rim. The cluster reacts to cursor (parallax) and scroll (scale + Y-drift + Z-recede).

Procedural WatchesMeshPhysicalMaterialThree-tier LightingDPR Clamped [1,2]Passive Listeners
Story

Not another Shopify jewellery site

The client wanted to walk away from the templatised jewellery aesthetic (dark background + gold text + stock photography) and design an experience that feels like editorial content from Hodinkee — not yet another Shopify variant. At the same time it had to keep commercial functionality: a catalogue, the live auction status, a request for private viewing. So we built it as a single-page digital flagship on Next.js 14 with three layers — immersive 3D hero, editorial composition, commercial layer.

The unmeasurable details that make the difference

Animated count-up statistics — 17+ years, $24M+ volume, 12 400+ pieces sold — give the numbers weight at the moment of scroll. An infinite marquee strip with haute horology brands — instant credibility cue. Cursor-following radial sheen on every Bento card — almost imperceptible, but creates a sense of premium. Film grain at 5% overlay. Live-indicator pulse synchronised across the page. Vignette + radial gradient on the hero, focusing attention on the 3D and the headline.

Gallery

Pieces of the product.

  • gradient
    3D watch cluster · Three.js primitives01/06
  • mono
    Live auction widget · countdown02/06
  • rings
    Diamonds — GIA-certified catalogue03/06
  • mesh
    Bento — five pillars04/06
  • scan
    Editorial journal · market notes05/06
  • noise
    Count-up stats · scroll-bound06/06
[ Results ]
17+
years on market
$24M
live-auction volume
12.4K
pieces sold lifetime
3
flagship boutiques
[ Stack ]
Next.js 14React 18TypeScriptTailwindThree.jsR3F@react-three/dreiFramer MotionLucide React
Next case

Shelk — Eastern-cuisine restaurant