스크롤하면 시계 무브먼트가 5단계로 스스로 조립되는 3D 스크롤리텔링 사이트. 아래 프롬프트 한 개를 Claude Code에 넣으면 이 사이트가 나온다.
스택 React + Three.js (Vite) · 테마 다크 "lume lab" (블랙 + 네온 시안 루미) · 로컬 Websites/aubrier, 포트 8950
핵심 장면 브라스 메인플레이트에 주얼 27개 압입 → 기어트레인 + 코트드제네브 브릿지 → 밸런스 휠이 4Hz로 영원히 박동 (시그니처) → 루미 다이얼 + 도핀 핸즈 → 스틸 케이스 + 3링크 브레이슬릿 → 피날레: 시계가 어둠으로 녹고 루미 바늘 두 개만 남아 12시 정각으로 스윕 + AUBRIER 로고
Build a single-page scrollytelling site for AUBRIER, a fictional Swiss watch maison
launching the Calibre AB-114. React + Three.js (Vite). The centerpiece is a large
macro-scale 3D watch movement that assembles itself as the user scrolls.
CONCEPT — "THE LUME LAB"
Dark, tech-luxury, futuristic — but horologically native, never cheap-cyberpunk.
A precision instrument examined in a night laboratory: near-black room, black-glass
bench that softly mirrors one studio softbox, and everything that would be
Super-LumiNova on a real watch (indices, hands, minute track) glows ice-cyan with a
real bloom pass. Luxury restraint everywhere else.
TOKENS — locked
--paper #0B0B0E (ground) --paper-deep #17171D --ink #EDE9E2 (bone type)
--ink-mid #8F8B82 --hairline rgba(237,233,226,.16)
--accent #6FE3FF (lume cyan; active states, glows, CTAs only)
3D materials: brushed steel, polished rhodium, warm brass (movement plate),
rose gold (train wheels, balance rim), blued steel screws, ruby jewels, sapphire,
emissive lume #91EBFF, emissive hairspring blue #4D8DFF.
TYPE
Display: Bodoni Moda, large sizes only, used sparingly (wordmark, title, store menu,
dial signature). Everything else Inter: tabular numerals, uppercase micro-labels at
10.5px/.16em. The serif/grotesque contrast IS the design.
LIGHTING (critical for the metal look)
PMREM environment from a custom studio scene: mid-gray room sphere (#4A4E5A), one
large white softbox up-left (11×7), a warm strip light right (#D8ECFA), dark floor.
Metals must read mid-tone with ONE bright streak per edge — never paper-white.
Warm key light (#FFEEDA, 2.1) with soft shadows, ice rim light (#6FE3FF, 1.3) from
behind, low cool hemisphere. Warm metals (brass/rose gold) use metalness ~0.75-0.85
so the key light keeps them caramel instead of going chocolate under the gray env.
ACES tone mapping. UnrealBloomPass (strength .45, threshold .85) so only lume blooms.
TITLE REVEAL — laser engrave + lume charge (SVG+CSS only, no extra WebGL)
Hero: kicker "AUBRIER · MANUFACTURE GENÈVE", then "CALIBRE / AB-114" in Bodoni as
SVG text. Sequence (~2.2s): (1) glyph outlines etch themselves in cyan via
stroke-dashoffset, 0.1-1.5s; (2) a blurred UV light bar sweeps left→right while the
lume fill wipes in behind it (clip-path synced), with one fluorescent flicker at 74%;
(3) settles to steady glow. Keep a real <h1> clipped for screen readers.
prefers-reduced-motion: show final state. Sub: "A movement, assembled in five acts".
CHROME
Sticky top bar, hairline rule, no fill: AUBRIER wordmark (Bodoni, tracked) left;
right: live phase indicator ("03 · Escapement", cyan glow), "The Calibre" link, menu.
Right rail: outlined phase numeral, micro title, 2-3 line caption (real DOM text),
and a live spec block where JEWELS (0→27), POWER RESERVE (0→72 h) and FREQUENCY
(28,800 vph) climb as parts land. Bottom-left first screen: "Scroll to assemble".
Bottom-right pill: "Next — {phase} ↓" that scroll-jumps. Fake shallow depth of field:
masked radial backdrop-blur + dark vignette overlays over the canvas.
THE ASSEMBLY — 5 phases in true watchmaker's order, scroll = the only timeline
01 Mainplate: warm brass plate (circular graining via canvas texture), 27 rubies in
rose-gold chatons pressed in one by one, dowel pins.
02 Going train: mainspring barrel (drum + lid + ratchet riding above its bridge),
rose-gold wheels (spoked, toothed, extruded with beveled anglage), two rhodium
bridges with côtes de Genève (canvas stripe texture), blued screws that seat with
a quarter turn.
03 Escapement: escape wheel, pallet fork with ruby pallets, rhodium balance cock,
balance wheel (rose-gold rim) over an Archimedean hairspring that glows electric
blue. SIGNATURE MOMENT: the instant this phase lands, the balance oscillates at
4 Hz forever. Nothing else on the site self-animates.
04 Dial & hands: charcoal lacquer dial printed via canvas texture fed to both map and
emissiveMap — fine glowing railway minute track, "AUBRIER / GENÈVE" in quiet bone
Bodoni under 12, "AB-114 · 72 H" in lume above 6. Applied lume batons (doubled at
12), lume dauphine hands parked at 10:10, counterweight seconds.
05 Case: Omega-genre steel sports watch — brushed caseband + polished chamfer ring,
stepped polished bezel, integrated lugs, fluted crown, boxed sapphire, and a
three-link bracelet (polished centers, brushed outers, 9 tapering rows per side,
butterfly clasp). Camera eases to top-down as it closes.
Parts fly in from exploded poses (lifted + scattered radially) on staggered settle
eases (~700ms feel, slight overshoot, cross-fade in). A cyan holographic work pad
with etched rings sits under the movement on the black-glass bench.
FINALE (6th scroll unit) — MIDNIGHT
Everything — case, dial, bracelet, bench — dissolves to black; only the two lume
hands remain. Scroll sweeps them clockwise (minute does nearly a full turn) until
they land exactly on 12:00 while the camera settles to a dead-vertical top-down and
pointer parallax relaxes to zero. "AUBRIER / Genève" wordmark fades in above the
hands. Caption: "Midnight — the watch falls away. Two hands find twelve."
BELOW THE JOURNEY — THE MAISON (#store)
Full-height section, hairline top rule: micro-kicker "The Maison", then four giant
Bodoni menu rows divided by hairlines — 01 Store (Own the Calibre AB-114),
02 Collection, 03 Boutiques (Genève · Seoul · New York), 04 Service (Care, winding &
restoration). Hover: name glows cyan, arrow slides in. Footer bar: AUBRIER wordmark,
"Manufacture Genève · Calibre AB-114", ©. The finale pill reads "Next — The Store".
TECHNICAL ARCHITECTURE
Each phase is a builder function returning a THREE.Group whose userData.parts lists
{obj, lift, scatter, spin} entries — a glTF could replace any builder without
touching scroll logic. Pure timeline module maps scroll to progress 0..6 and computes
per-part stagger windows. Per-frame UI updates write directly to DOM (no React
re-render per tick). Gentle pointer parallax (movement forward of bench). Expose
window.__aub = { step(p), setProgress, pause, resume, sample } for deterministic
frame-driving and pixel-sample verification (rAF is throttled in hidden tabs).
Mobile: movement scales down, annotations collapse to a tappable legend, captions
stack below, spec block hides. prefers-reduced-motion: discrete phase steps, balance
held still. Annotations are keyboard-reachable buttons with glowing leader lines;
per-phase alt text on the canvas.
Phase 01–03 — 브라스 메인플레이트 · 기어트레인 · 이스케이프먼트 (라이트 스튜디오 버전)
이스케이프먼트 안착 — 밸런스 휠 + 글로우 헤어스프링 (나이트 랩)
Phase 05 — 스틸 케이스 + 루미 다이얼, 10:10
피날레 — 시계가 어둠으로 녹으며 바늘이 스윕
피날레 끝 — 루미 바늘 두 개, 12시 정각