Automotive · Dark

Coupe

An absolute black stage where a gray coupé spins tied to the scroll in front of a giant condensed word that swaps into numbers, with mono HUD labels pointing out each detail.

Palette

--bg#010101
pure black stage
--bg-2#0E0E0E
spec sheet and booking panels
--text#F4F4F2
giant word, headlines and inverted buttons
--text-2#8E8E8E
paragraphs and secondary labels
--text-ghost#3A3A3A
not-yet-revealed part of the paragraph (word-by-word reveal)
--line#262626
spec sheet dividers and rulers
--accent#E0281E
tiny red dot of the section and HUD labels (used very sparingly)
--car#A9A9A7
car gray (comes from the asset)

Typography

Display: condensed grotesque, black weight, UPPERCASE, tracking -0.01em, line-height 0.86; stage word at ~22vw spanning the width, section titles at clamp(40px, 6vw, 96px) — suggestions: Anton / Big Shoulders Display 900.
Body: neutral grotesque 18–22px in the manifesto paragraph (with word-by-word reveal), 13px elsewhere — suggestions: Inter / Geist.
Support/labels: mono 9–10px uppercase, tracking 0.08em, for HUD, city clocks, "scroll (NN%)", "01 / 04" indexes — suggestions: JetBrains Mono / IBM Plex Mono.
Treatments: giant word behind the car with the car overlapping part of it; tabular numbers in an odometer style (rolling digits); HUD labels with a red dot and a guide line to the point on the car.

Sections

Nav — model name in 13px condensed on the left; two city clocks in mono; two groups of mono links; white "test drive" button + square with a ↗ arrow.
Spinning stage (long pin) — car centered rotating 0°→~180°; behind it, a giant word that swaps across 3 states (version name → power → acceleration); HUD labels that appear attached to points on the car; circular angle dial and tabs "01 front / 02 profile / 03 rear" at the bottom left; "scroll (%)" at the bottom right.
Manifesto — car rises and exits; large paragraph with a word-by-word reveal from dark gray to white; mini spec sheet in mono on the left.
Details — centered 2-line title, vertical line, mono micro text and a "see spec sheet" button.
Sliced gallery — 3–4 crops of the car (grille, wheel, interior, exhaust) in side-by-side panels with a mono caption and "01/04" index, sliding horizontally.
Spec sheet — 2-line title on the left; large odometer numbers and, afterwards, a mono table in a bordered panel (engine, power, torque, gearbox, 0–100, top speed, weight, color, price with a red dot).
Test-drive booking — dark panel with a blurred car in the background; title; day and time chips; white booking button.
Closing + footer — 3-line title and the car coming back head-on; giant "test drive" and "top" links; 4 mono columns and a legal line.

Motion and interaction

Car spinning with the scroll: scroll scrub with pin (GSAP ScrollTrigger) → sequence of ~120 PNG/WebP frames drawn on a canvas; frame = progress × total.
Stage word swap: scrub → each word exits with yPercent -100 in a mask and the next enters from 100, over 3 progress bands; numbers roll like an odometer.
HUD: in each band, 2–3 mono labels with a red dot appear (clip-path from the left, 300ms) linked by a 1px line to a circular target on the car.
Angle dial: SVG arc that fills and shows "spin 000°".
Manifesto reveal: scrub → words go from #3A3A3A to #F4F4F2 in sequence.
Horizontal gallery: pin + translateX of the panels.
Odometer: digits in 0–9 columns with translateY, on enter.
Lenis: smooth scrolling lerp 0.08.

Components

White button: rectangle with no radius, #F4F4F2 background, 10px black mono text + attached square with ↗.
HUD label: 5px red dot, 9px white mono title, 1–3 gray mono lines, 80% black background, 1px --line border.
Target: 14px circle with a 1px white border and a center dot.
Dial: 28px circle with a progress arc + mono text.
View tabs: 3 mono labels with an underline on the active one.
Spec table: --bg-2 panel, inverted white header, 10px mono rows with --line dividers.
Day/time chip: rectangle with a 1px --line border, active one inverted.