Loading…
Live page · scroll inside
Premiumwatchmaker · dark · landing page · gsap · lenis · html
Horologe
A watch manufacture site in near-black and brass: a large SVG watch face in the hero that keeps real time (sweeping seconds, date window, tilt and glare under the pointer), a pinned movement that explodes into eight named plates as you scroll while its gears turn and its balance oscillates, three reference cards and an atelier block with an appointment form.
Placeholder photos by Ruben Caldera, Andrey Strizhkov, Matteo Vella and Lukas Tennie on Unsplash. Replace them with your own before launch.
What's inside
- 01Horologe preloaderThe balance wheel swings ±40° at 4 Hz for 1.2 s; the name fades; the slab lifts.
- 02Fixed barTurns translucent after 80 px; underlines draw.
- 03Live analogue faceOn load the hands spin from twelve to the current time over 1.6 s with power3.out; afterwards the second hand sweeps at 60 fps, the minute and hour hands move continuously; the date window shows today; the pointer tilts the watch 6° in 3D and slides a specular highlight across the crystal.
- 04Exploded movement on scrollScrolling 250 vh scrubs the stack apart vertically (each plate rises by its index × 42 units and shrinks slightly toward the back), labels fade in as their plate separates; throughout, the rotor swings lazily, the gear train turns at ratios (barrel slow, centre wheel 1×, escape wheel fast) and the balance oscillates at 4 Hz; past the end the stack reassembles.
- 05CollectionCards rise with a stagger; hovering lifts the photo and reveals the case back caption.
- 06Atelier and appointmentPhotos unroll with a stagger and drift; facts count; submit shows a confirmation.
- 07Minimal footerNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
