Style: Noir Motion (v1.2)

Direction

A product film you scroll. A near-black studio with one soft spotlight and a single hero object (a car, a watch, a machine) that turns angle by angle as the visitor scrolls, like a launch keynote. Almost no color: graphite, smoke, and white type, plus one hot red accent that picks up a detail of the product. Nothing moves until it has to, and the motion carries the layout.

Assets (mandatory)

The product images come from assets/: several angles of the same object (identical paint, lighting, and backdrop), plus a lights-only layer derived from the opening angle (never a separately generated dark frame). Optionally a scroll-scrub frame sequence extracted from an orbit video. Never draw the product in code. Code draws the stage, light, type, lines, and UI.

Tokens

Color

Rules: the spotlight radial is the only gradient. Signal appears at most twice per viewport.

Type

• Display / captions: "Oswald" (Google Fonts). Giant wordmark 600, uppercase, clamp(96px, 17vw, 300px), letter-spacing 0.01em, ink at 85%. Spec captions 400, 30px/1.25, sentence case.
• UI and body: "Sora" 300/400. Nav and labels uppercase 12px, letter-spacing 0.12em. Section titles 400 uppercase 26px/1.2. Body 14px/1.65 in ink-muted, max 380px.

Shape

• Almost no boxes. Buttons are 1px line pills (40px tall, 22px padding, uppercase 12px); hover fills ink with void text.
• Rules: 1px line. The caption line runs full width at the caption's top edge and draws in from left to right.

Layout

• Thin nav over the stage: left links (FEATURES, MODELS), centered model name in Sora 300 with the model letter in 500, right a text link (TEST DRIVE) and an outline pill (BOOK NOW).
• Right rail fixed at the viewport edge: three 18px social icons stacked, then a vertical "SCROLL" label (rotated 90°) above a 14×22px mouse outline whose dot travels down.
• The story is one pinned stage (position: sticky, 100vh) inside a tall scroll container (≈ 500 to 600vh). Scenes are scroll ranges of that container.

Motion (scroll-driven storytelling)

Easing for scroll-linked values: map progress through smoothstep; for time-based reveals cubic-bezier(0.22, 1, 0.36, 1).

1. Intro: lights first, then the car (time-based, on load). Never cross-fade two separately generated images here: they never line up. Use one lit angle plus a lights-only layer derived from it (pipeline/scripts/derive_glow.py), stacked in the same box so they align by construction:
   • Layers, bottom to top: spotlight radial → base angle image (lighten) → a dimmer the color of void at opacity 1 → the lights layer (mix-blend-mode: screen) split into a left and a right half → a bloom copy of the lights layer (filter: blur(14px), screen, opacity 0).
   • Start only after every stage image has finished img.decode(); until then show the void and the progress bar.
   • 0 to 300 ms: pure void.
   • 300 ms: LED ignition sweep. Each half reveals its headlight from the inner end to the outer end with an animated clip-path: inset() over 520 ms, cubic-bezier(0.3, 0, 0.2, 1); the bloom follows 80 ms later, rising to 0.9 and settling to 0.7 over 420 ms. The floor reflections arrive with the bloom.
   • 820 to 1300 ms: hold (only the lights and their reflections).
   • 1300 to 3100 ms: studio lights come up. The dimmer fades 1 → 0 over 1800 ms with cubic-bezier(0.45, 0, 0.25, 1) (gentle start, long settle); the spotlight radial fades 0 → 1 over 1600 ms starting 200 ms later; the car group scales 1.04 → 1 over 2600 ms with out-quint; over the last 900 ms the lights layer and bloom fall to 0.25 so the LEDs don't look doubled.
   • 2600 ms: nav and right rail fade in (300 ms, 60 ms stagger). Scrolling during the intro jumps every animation to its end state.
   • Run it with the Web Animations API; animate only opacity, transform, and the clip-path of the two small light halves; set will-change on those layers during the intro and remove it after.
2. Frame edges: hide each image's frame with a per-image mask (a radial for the body plus linear fades for the top haze, the floor horizon, and the side edges) so no nose, wing, or floor edge is clipped.
3. Scenes (scroll-linked): each scene owns a range of the scroll container. Within its range, its angle image is at full opacity and drifts slightly (translateX ±4vw, scale 1 → 1.05) while its copy enters. Between scenes, the outgoing angle cross-fades to the incoming one over ~6% of the scroll while both slide 3vw in the direction the car would rotate and pick up filter: blur(2px) at the midpoint. This reads as rotation. The incoming angle starts fading in slightly after the outgoing one, so the midpoint dips darker instead of showing a double exposure.
4. Frame sequence (if the item provides one): draw the frames to a <canvas> and map scroll progress to frame index instead of the cross-fades; preload progressively (keyframes first).
5. Giant wordmark scene: the wordmark rises 8vh and fades from 0 to 85% behind the side-profile angle; the product sits in front, overlapping the lower half of the letters. lighten blending alone lets the letters show through the car: occlude them with a mask built from the product's silhouette (a transparent cutout of that angle, or a luminance mask computed once from the image and embedded as a data URI).
6. Spec captions: the last scene cycles 3 to 4 captions by scroll sub-range: the line draws in (scaleX 0 → 1, origin left), the caption fades up 16px; the previous caption fades out upward.
7. Scroll indicator: the mouse dot loops downward every 1.6s; a 2px signal progress bar at the very top fills with story progress.
8. Reduced motion: no intro sequence (start at the lit front with the lights layer at 0.25), scenes switch by plain cross-fade at their thresholds, no blur, no parallax drift, captions all visible as a list in the last scene. Implementation: one requestAnimationFrame loop reading scrollY; transforms, opacity, and filter only; no scroll-jacking (native scrolling stays); everything above the fold visible within 1s once the intro has finished or been skipped.

Copy voice

Engineering-proud, calm, few words. Uppercase section titles, sentence-case spec lines with one number each.

Never

• Real car, watch, or brand names, logos, grilles, or badges (no kidney grilles, no look-alike emblems); invented models only
• Colorful backgrounds, more than one accent color, neon glows, lens-flare effects, glassmorphism
• Inter, Roboto, Arial, or system fonts as the visible font
• Scroll-jacking (taking over the wheel), autoplaying sound
• Text over the brightest part of the spotlight below 4.5:1; body text in pure white
• Product angles that disagree on paint, wheels, or lighting
• Phrases like "unleash", "beast", "next level", "redefine"