Prompt:
Build a standalone HTML page that is a minimal luxury product page for a fictional watch: Maison Aurelle "Calibre Nocturne 38". Concept: luxury watch dial with an inline SVG watch that shows live time, and gold hairlines. Palette: near-black #0c0d10 with a soft radial lift, champagne gold #c9a96a and pale gold #e8d3a2 for hairlines and accents, warm ivory text #ece6da, muted taupe #8d887d, a single crimson #c94a3a seconds hand. Type: Didot / Bodoni 72 / Georgia for the brand, headline and spec values; light-weight Helvetica Neue for body and tracked uppercase labels. Layout: hairline-bordered top nav with a letter-spaced serif brand and three nav words that get a gold underline sweeping in on hover; a two-column hero (stacks on mobile) with the watch on the left inside two concentric gold hairline circles and two annotation callouts ("Sapphire crystal", "18k yellow-gold case") with short gold rules; on the right an eyebrow, a large Didot "Calibre Nocturne 38" with italic gold "Nocturne", a short paragraph, dial colour swatches, a two-by-two spec grid divided by gold hairlines (38.5 mm, 72 hours, AU-21 manual, edition of 188), and a CTA row with a brushed-gold gradient "Request a viewing" button and a price "CHF 28,400". The watch is drawn in a -200..200 SVG viewBox: brushed gold case gradient, crown, leather strap stubs, a dial radial gradient overlaid with a 45-degree guilloche line pattern, 60 generated tick marks (heavier at the quarters), an inner chapter ring, brand and "GENÈVE · NOCTURNE" text, a small-seconds subdial at six o'clock, a white date window at three, tapered gold dauphine hour and minute hands, a crimson seconds hand with a lollipop ring, a gold cap, and a crystal glare highlight. Motion: hands read the real clock every animation frame so the seconds hand sweeps smoothly like a high-beat movement; the date window shows today's date; a small fixed readout shows local time. Interaction: swatches (Midnight Lacquer, Opaline Ivory, Forest Enamel, Burgundy Sunray) swap the dial gradient stops and announce the name; selected swatch gets a gold halo ring. Pointer over the stage tilts the watch in 3D (up to 14 degrees) with a long expo ease and moves the crystal glare; leaving springs back. CTA button shifts its gold gradient and widens its letter-spacing on hover, then confirms "Atelier will be in touch" on click. Reduced motion: seconds hand ticks once per second instead of sweeping, and tilt is disabled.
Title: Calibre Nocturne 38
Description: A hushed, dark luxury product page in the manner of a haute horlogerie maison. A finely detailed SVG watch with a guilloche dial, gold dauphine hands and a crimson sweeping seconds hand keeps the real time, framed by thin champagne-gold hairline circles and callouts. Didot headlines, light sans labels and generous spacing give it a calm, expensive feel, while dial swatches let the visitor try different finishes on the live watch.
Visual techniques:
- Hand-built inline SVG watch with gradient case, guilloche pattern fill and generated tick marks
- Live hands driven by requestAnimationFrame for a smooth sweep, plus subdial and date window
- Swatches that rewrite SVG gradient stops at runtime
- CSS 3D pointer tilt with perspective and a moving radial crystal glare
- Gold hairline circles, rules and spec grid dividers
- Animated underline nav, gradient-shift CTA with letter-spacing ease
- Didot plus light Helvetica Neue pairing; reduced-motion ticking mode
Interaction model: The watch always shows the current time. Hover over it to tilt it and watch the light move across the crystal. Click a dial swatch to change the dial finish, with the name of the finish shown below. Hover the nav or the gold button for subtle animated responses; clicking "Request a viewing" confirms the request.