Automotive · Dark

Canyon

A drone flight through a red canyon tied to the scroll: the car crosses water, climbs rock and freezes mid-air with its giant name behind it; then the landscape comes to live inside a cut-out letter and earth-toned glass panels.

Palette

--bg#1A1210
dark background for transitions and footer
--sand#E9DFD3
light panel of the mask letter, light pill buttons, wordmark
--rust#B5532E
canyon rock, hover accent and active chip
--clay#5A2419
landscape shadows, base of the glass panels
--text#F6F0E8
headlines over video
--text-dark#1E1714
headlines over the light panel
--text-2#D9C3B5
captions and labels over video (with scrim) and glass (≥ 5.9:1)
--text-dark-2#5E4E45
paragraph over the cream panel (6:1)

Typography

Display: extended (wide) geometric grotesque, 600–700, UPPERCASE, 2% tracking, line-height .95, clamp(32px, 3.6vw, 60px) for chapters and huge (clamp(140px, 20vw, 320px)) for the name behind the car — suggestions: Unbounded / Syne (ExtraBold) / Clash Display (Fontshare)
Body: neutral grotesque 400, 11–13px, line-height 1.45 — suggestions: Inter / Manrope
Support/labels: 10–11px 500, normal case, for nav and fields; spec numbers in tabular-nums
Treatments: giant name behind the object (text sandwiched between the background and the car cut-out); giant initial letter as a video mask; chapter titles on 2 lines ending in a period.

Sections

Intro — no interface: top-down aerial shot of the canyon with the small car on the dirt road; the camera descends to the rear of the car.
Hero — nav appears (wordmark on the left, glass pill with 4 links in the center, light pill button on the right); extended title centered at the top, one support line and a light pill button.
Pinned chapters — continuous flight: water crossing (title at the bottom left), rock climb (title at the top right), jump that freezes mid-air.
Name behind the car — the car suspended in mid-air and the giant cream name emerging between the landscape and the car; pre-order text and button in the top-right corner.
Mask letter — cream panel slides up; on the left the giant brand initial works as a window onto the landscape; on the right a 4-line extended title and paragraph.
Spec sheet — perspective road in the background; earth-toned glass panel on the right with a title and 6 label/value rows.
Colors — car image in a rounded-corner inset frame on a dark background; nav pill marks the section.
Reservation — landscape in the background; central glass card with title, text, 2 fields, color chips and a light button.
Footer — dark strip with small links.

Motion and interaction

Scroll-tied flight: canvas frames covering the whole route (pin ~800vh) with Lenis; the car "freezes" at the end of the jump.
Chapter titles: enter with letter-spacing 0.3em → 0.02em and fade; exit with blur and dropping opacity as the camera passes.
Name behind the car: scroll → name rises from y 30% with opacity 0→1 on a layer between the frame and a cut-out PNG of the car (same framing as the last frame).
Mask letter: cream panel rises over the top (yPercent 100→0); inside the letter (SVG clipPath/text with background-clip) the video keeps scrolling with parallax.
Inset frame: scroll → full-bleed image shrinks into a frame with 16px radius and margins (clip-path inset).
Glass: panels enter with blur 0→16px and y 40px.
Color chips: click → swaps the car image (400 ms crossfade) and marks the chip.

Components

Wordmark: extended uppercase 13px, tracking 0.1em.
Nav pill: dark glass rgba(30,20,16,.45) + blur 14px, 10px links, active one with a translucent light background.
Light pill button: --sand background, dark 11px text, "→" arrow.
Glass panel: --glass + backdrop-filter blur(16px), 1px --line border, 14px radius.
Spec row: 10px --text-2 label, 12px --text value, 1px divider.
Form field: 40px translucent dark pill, 11px placeholder.
Color chip: pill with a color dot + name, active one with a light border.