CALIBRE — Fine Watches
Time, engineered.
A dark-luxe horology storefront for a fine-watch maison: ten procedurally-rendered SVG references (no photography), a GSAP exploded-movement scroll story, a drag-to-rotate product view, spec count-ups and a full MSW commerce flow. Built in Next.js 15, fully static, every dial and complication drawn in code.
Role · Design + front-end build (simulated backend via MSW) · Updated Jun 2026
- 10 watch product pages with full specs, complications, a rotating SVG hero and variant swatches
- Shop with a four-dimension filter (collection, movement, material, price) + sort, collections, craftsmanship, maison, client-services and press pages
- A GSAP exploded-movement scroll story with six detailed mechanical SVG parts
- A four-step MSW checkout with tax/shipping and Zustand-persisted cart
- Delivery
- 24–48h
- Licence
- One-time licence · full source
- Support
- 14 days setup support
- Updates
- Free updates included
Backend · Shopify (headless)
Connect a Shopify store — references, inventory, orders and payments are managed in the Shopify admin.
Delivered as full Next.js source. Connect a Shopify store and swap MSW for the real Storefront API.
What makes it special
Procedural SVG watch faces
Ten visually distinct references rendered entirely in SVG from product data — tourbillon cages, chronograph sub-dials, moon phases, power-reserve arcs — no photography needed, zero CLS.
Exploded-movement scroll story
A GSAP ScrollTrigger-pinned craftsmanship section separates six mechanical parts (barrel, bridge, escape wheel, balance, pallet fork, rotor) and reassembles them across the scroll.
Drag-to-rotate product view
Framer Motion drag spins the watch face with momentum, auto-rotates when idle and supports arrow-key control — fully reduced-motion aware with a static fallback.
Spec data-viz + MSW commerce
Spec figures count up; a four-step checkout with tax/shipping computation and ORD- order lookup runs entirely client-side via MSW + Zustand, basePath-aware for the store preview.
Refined and accessible
Warm gold on charcoal that holds WCAG 2.2 AA, labelled controls, focus-visible rings, an accessible rotate control and a keyboard-operable checkout.
What’s included
- 10 watch product pages with full specs, complications, a rotating SVG hero and variant swatches
- Shop with a four-dimension filter (collection, movement, material, price) + sort, collections, craftsmanship, maison, client-services and press pages
- A GSAP exploded-movement scroll story with six detailed mechanical SVG parts
- A four-step MSW checkout with tax/shipping and Zustand-persisted cart
- Self-hosted fonts, reduced-motion fallbacks, WCAG 2.2 AA, static export
Gallery
More Fashion & Accessories templates
Make CALIBRE yours.
Buy it as-is, or have YantraCore tailor it to your brand and content.