Automotive · Dark

Iris

A studio film in red light alternating with white technical-catalog sheets: the video is born through an iris inside the headlight, the close-ups move with the scroll and the interface looks like an editing monitor with timecode.

Palette

--bg-dark#0C080B
background of the studio scenes and the dealerships section
--bg-light#F0F0F0
white sheets (seals, spec sheet, timeline)
--accent#D9141B
final band, active year of the timeline, technical drawing details
--glow#520B0F
red studio haze, vignette of the scenes
--text-light#F5F5F5
headlines on dark
--text-dark#111111
headlines on light, solid button of the spec sheet
--text-2#8E8E8E
descriptions, mono labels, giant year in light gray (#D6D6D6)

Typography

Display: neo grotesque, weight 400, normal case, tracking -2%, titles always on 2 short lines ending in a period, clamp(36px, 3.6vw, 60px) — suggestions: Inter Tight / Hanken Grotesk
Body: same family, 400, 12–13px, gray, max 36ch
Support/labels: mono 9–10px in UPPERCASE with 0.2em tracking for chapters ("01 / 02 · NAME"), nav timecode and drawing dimensions — suggestions: JetBrains Mono / IBM Plex Mono
Treatments: giant year (clamp(120px, 14vw, 220px)) in weight 200 light gray aligned right; final logo in a hollow square + the model's acronym at full-page size; nav markers with geometric glyphs (triangle, circle, square).

Sections

Nav — square seal with a letter + spaced name; three links with geometric glyphs; mono timecode box; text CTA on the right.
Video hero (iris) — close-up of the headlight; the image opens from the headlight's ring of light to full screen.
Pinned close-ups — frame sequence of the car in a red studio; for each detail, a 2-line title on the left with a mono label above; ruler of 4 chapters at the bottom.
White sheet with seals — the dark scene rises like a card and reveals a light background; car in profile over a cut-out rock on the right; title on the left; circular seals (solid black and outlined white) attached to the car by thin lines; circular counter in the corner.
Spec sheet — centered, large two-line title with numbers, 6-row table (label, description, value on the right), solid black button with an arrow in a square.
Interior detail — dark close-up with three illuminated buttons; title on the left and a numbered list of 3 items with dividers.
Timeline with technical drawing — title on the left, giant year on the right, line drawing of the vehicle that changes generation, dimensions, ruler with 4 milestones with the active one in red.
Dealerships — black background, two columns of cities with mono address and an outlined button.
Signature — full-page red band with the seal and the model's acronym giant in white; one-line mono footer.

Motion and interaction

Iris on the headlight: initial load/scroll → clip-path circle(6% at x y of the headlight) → circle(150%) in 1.4 s power3.inOut; the video sequence starts behind.
Close-ups following the scroll: pinned section, canvas frames advance by scrub (≈ 200 frames per 400vh); titles swap with fade+y 20px at each chapter; bottom ruler fills.
Timecode: scroll → the mono counter in the nav shows progress as mm:ss:ff.
Stacked sections: the white sheet rises over the dark one (yPercent 100→0, pinned) with square corners.
Seals that are born: entrance → line grows (scaleY 0→1, 400 ms) and the circle scales 0→1 with back.out.
Technical drawing: scroll scrub → SVG path draws itself (stroke-dashoffset) and the giant year counts between milestones; the active milestone turns red.
Final band: the acronym rises from below with a mask (yPercent 100→0).

Components

Brand seal: 18px hollow square with a letter + spaced uppercase name.
Nav item with a 6px geometric glyph.
Timecode box: 1px border, mono 10px, 64×18px.
Chapter ruler: 4 segments of 1px with a mono label and white fill.
Circular seal: 56px, solid black with white text or white with a 1px border; 1px guide line to the object.
Spec table: 32px rows with a 1px divider, value aligned right.
Solid button with a separate arrow: 36px black bar + 36px black square with an arrow.
Timeline milestone: 14px year + 10px text, active one in red with a top stroke.