Watchmaking · Dark

Movement

A macro product film tied to the scroll over absolute black: the camera passes through the glass to the heart of the movement, pulls back, explodes the piece into layers and delivers a carousel of variations with names in spaced uppercase.

Palette

--bg#000000
absolute background of all sections
--bg-2#0B0A10
slightly purplish background of the film and cards
--text#F1EEEA
uppercase titles and price
--text-2#8D8A90
paragraphs, specification captions
--text-3#4A474E
inactive carousel names, dimmed labels
--accent#B5476B
ruby/magenta of the movement's reflections, active dot
--metal#C9C6C2
light button, guide lines of the labels

Typography

Display: wide (extended) geometric grotesque in uppercase, weight 300–400, wide tracking (+0.12em), clamp(22px, 2.6vw, 40px), titles on 2 lines with a period — suggestions: Unbounded Light / Clash Display (Fontshare) with open tracking; closer alternative to "wide": Syne 400
Body: simple humanist grotesque, 400, 12–13px, line-height 1.6 — suggestions: Inter / Satoshi
Support/labels: micro uppercase 8–9px with +0.2em tracking for specifications, nav and exploded-view labels
Treatments: variation names in wide uppercase (36px) with the active one in white and neighbors in dark gray; price with a tiny superscript currency symbol; titles that type letter by letter with a vertical offset

Sections

Loader — black screen with a counter/thin line while the film's frames load.
Film hero — close-up of the product on black, 2-line uppercase title in the bottom-left corner, short paragraph; no nav visible at the start.
Dive — the film advances: the camera enters through the glass to the central component in macro, with blur and magenta reflections; part counter appears.
Exploded view — product opened into 5–6 layers stacked vertically, with horizontal guide lines and tiny labels alternating left/right; title on the left.
Spec sheet + price — whole product on the left, on the right title, paragraph, specifications line, large price and a light pill button.
Nav appears — thin bar with the logo on the left, 4 central links in micro uppercase and an outlined button on the right.
Variations carousel — centered overline, active product in the center at full size, smaller darkened neighbors at the sides, large variation name and tiny description, 3-dash indicator.
Behind the scenes — video/photo of a workshop bench in a frame that grows to full-bleed, uppercase title on the left.
Warranty/CTA — centered 2-line title, support line, and a final phrase that enters letter by letter.

Motion and interaction

Film on scroll: scroll scrub → sequence of ~180–240 JPG/WebP frames drawn on a fixed <canvas>; the frame index follows the ScrollTrigger progress with pin; GSAP + Lenis.
Chapters: scroll → the film is divided into chapters (close-up, dive, explosion, pull-back); each chapter has a text block that enters and exits with fade/y.
Exploded view: scroll scrub → layers separate along the vertical axis (in the film or with stacked PNG images), guide lines grow with scaleX 0→1.
Horizontal carousel: drag/horizontal scroll → active item scales to 1 and opacity 1, neighbors 0.55 and 0.35; names slide and change color; snap.
Custom cursor: cursor → 18px circle with a dot that follows with a lag (lerp 0.15) and grows over buttons.
Typed text: scroll → letters enter one by one with y 0.4em and opacity, stagger 30ms.
Media expansion: scroll scrub → workshop bench video frame goes from 36% of the width to full-bleed (clip-path inset).

Components

Light pill button: --metal background, black 8px uppercase text tracking .2em, 26px height.
Outlined button: 1px --line border, white micro-uppercase text.
Exploded label: number + name at 8px, 120–200px 1px guide line to the part.
Specifications line: 3–4 items separated by "·" at 8px gray uppercase.
Price: 10px superscript symbol + 28px value tracking .06em.
Carousel item: transparent PNG image, 36px wide uppercase name, 8px description, 14px 3-dash indicator.
Cursor: 18px ring with a 1px white border at 60% + 3px dot.