diff --git a/docs/redesign/round4.md b/docs/redesign/round4.md new file mode 100644 index 0000000..b324ce9 --- /dev/null +++ b/docs/redesign/round4.md @@ -0,0 +1,76 @@ +# Round 4: Cinema + +## The juror's critique (before) + +Shots: `round4/before-*.webp`, `round4/before-sheet.webp`. + +- **Murky world.** The whole frame sat in one purple haze with no true blacks and no contrast range. The sun was a pale, flat disc that looked like clip-art. Nothing in the frame said "night". +- **Empty destination.** The road ended at nothing. Wireframe hills and grey districts read like a synthwave template. Nothing pulled the eye to the vanishing point. +- **A lonely road.** No other traffic and no light moving through the frame, so speed came only from the grid scrolling. +- **One card, eight times.** Every chapter used the same rounded glass card over the world. Chapter changes were invisible: the panel swapped and the world carried on unchanged. +- **Generic hero.** A standard gradient name with no title-card moment and no opening shot. +- **Flat sound.** The soundtrack did not react when you took an exit. + +## The transformation + +The site now plays like the opening of a film: crane shot, title card, then a drive where every chapter is an exit you physically pass through. + +1. **Film grade and lens (all tiers).** + - `src/scene/cinematic-grade.ts` swaps three's CustomToneMapping chunk for ACES followed by a deeper toe, an S-curve, cool shadows, warm highlights and a saturation lift. The low tier, which has no post-processing, gets the same grade. + - On post-processing tiers, `LensFinishPass` replaces OutputPass one for one and allocates no extra render target. It adds: + - chromatic aberration at the frame edges; + - an anamorphic blue streak sampled from a bloom mip that already exists; + - vignette and grain; + - letterbox bars and an exposure flash. +2. **The destination.** `world/skyline.ts` is a single procedural plane that draws a two-layer city silhouette against the sun. It has lit windows, sun-caught roof edges and blinking masts, uses one draw call and no texture. +3. **Traffic.** `world/traffic.ts` draws taillight pairs, long-exposure trails and wet-road pools. + - Fast cars pull away when you idle. Scroll fast and you overtake trucks. + - Three instanced draws; vehicle count is 14, 10 or 7 depending on tier. +4. **Wet road.** The asphalt now picks up a sun glare column, headlight throw from the car, and pylon reflections that travel with the drive. +5. **The sun.** A saturated vermilion-to-gold disc, held below the ACES shoulder so it no longer washes out to cream. +6. **Opening crane.** On a fresh load at the top of the page, the camera starts high and looking at the sun, then cranes down to the car over 4.2 s with letterbox bars. Scrolling speeds it up five times. +7. **Exit gates (the chapter cut).** + - On every chapter change, nine light gates in the next chapter's accent colour rush past in about two seconds. The frame flashes slightly and the field of view opens. + - The audio answers with a pass-by: a band-passed air sweep that pans left to right. Its nodes are allocated in advance, so a chapter change only schedules automation. +8. **Title card and night plates.** + - The hero name is a large Outrun chrome title with a clip-path reveal that runs only under `prefers-reduced-motion: no-preference`. + - Panels became sharp-cornered dark plates with an accent rule, a hairline and crop marks. + - The broken one-word-per-line portrait-strip captions are fixed at ≥1100px. + +## Evidence + +- Typecheck clean. Vitest: 684 of 684 passed. +- `build:preview` budgets, with `violations: []`: + + | Budget | Size | + | --- | --- | + | Initial JS | 95.2 KB | + | HTML + critical CSS | 40.9 KB | + | Fonts | 69.0 KB | + | First live scene | 322.8 KB | + | Deferred non-video | 596 KB | + +- No new textures or render targets, so GPU allocation is unchanged. +- FPS on Intel Arc iGPU, headed, before → after: + + | Section | Before | After | + | --- | --- | --- | + | start | 168 | 152 | + | infrastructure | 187 | 176 | + | selected-builds | 185 | 173 | + | toolkit | 175 | 179 | + | contact | 200 | 184 | + + p95 frame time is 8.4 ms everywhere. +- After shots: `round4/after-*.webp`, `round4/after-sheet.webp`, `round4/after-mobile-sheet.webp`. + +## Honest regressions and open items + +- FPS is about 6–9% lower, mainly from the lens pass and the traffic. +- The first frame at `start` has one worst-case spike of about 196 ms from shader compiles. +- The letterbox and lens effects appear only on post-processing tiers. The low tier gets the grade, the skyline, the gates and reduced traffic. +- The hero copy at 390 px still overlaps the car once the crane settles. This was true before this round too. +- Not done this round: + - a new car model or Blender asset pass; + - a nav and soundtrack-button redesign; + - consolidating the 12 stylesheets (the new CSS is one appended block in `route.css`). diff --git a/docs/redesign/round4/after-1440-contact.webp b/docs/redesign/round4/after-1440-contact.webp new file mode 100644 index 0000000..c6d7c8e Binary files /dev/null and b/docs/redesign/round4/after-1440-contact.webp differ diff --git a/docs/redesign/round4/after-1440-exit-gates-400ms.webp b/docs/redesign/round4/after-1440-exit-gates-400ms.webp new file mode 100644 index 0000000..68d1a1d Binary files /dev/null and b/docs/redesign/round4/after-1440-exit-gates-400ms.webp differ diff --git a/docs/redesign/round4/after-1440-exit-gates-700ms.webp b/docs/redesign/round4/after-1440-exit-gates-700ms.webp new file mode 100644 index 0000000..cba4769 Binary files /dev/null and b/docs/redesign/round4/after-1440-exit-gates-700ms.webp differ diff --git a/docs/redesign/round4/after-1440-intro-crane.webp b/docs/redesign/round4/after-1440-intro-crane.webp new file mode 100644 index 0000000..056369f Binary files /dev/null and b/docs/redesign/round4/after-1440-intro-crane.webp differ diff --git a/docs/redesign/round4/after-1440-profile.webp b/docs/redesign/round4/after-1440-profile.webp new file mode 100644 index 0000000..29a9b37 Binary files /dev/null and b/docs/redesign/round4/after-1440-profile.webp differ diff --git a/docs/redesign/round4/after-1440-selected-builds.webp b/docs/redesign/round4/after-1440-selected-builds.webp new file mode 100644 index 0000000..46e244c Binary files /dev/null and b/docs/redesign/round4/after-1440-selected-builds.webp differ diff --git a/docs/redesign/round4/after-1440-start.webp b/docs/redesign/round4/after-1440-start.webp new file mode 100644 index 0000000..5a1f490 Binary files /dev/null and b/docs/redesign/round4/after-1440-start.webp differ diff --git a/docs/redesign/round4/after-390-start.webp b/docs/redesign/round4/after-390-start.webp new file mode 100644 index 0000000..9687d1e Binary files /dev/null and b/docs/redesign/round4/after-390-start.webp differ diff --git a/docs/redesign/round4/after-mobile-sheet.webp b/docs/redesign/round4/after-mobile-sheet.webp new file mode 100644 index 0000000..137f1a2 Binary files /dev/null and b/docs/redesign/round4/after-mobile-sheet.webp differ diff --git a/docs/redesign/round4/after-sheet.webp b/docs/redesign/round4/after-sheet.webp new file mode 100644 index 0000000..ad29c65 Binary files /dev/null and b/docs/redesign/round4/after-sheet.webp differ diff --git a/docs/redesign/round4/before-1440-contact.webp b/docs/redesign/round4/before-1440-contact.webp new file mode 100644 index 0000000..2e365c2 Binary files /dev/null and b/docs/redesign/round4/before-1440-contact.webp differ diff --git a/docs/redesign/round4/before-1440-profile.webp b/docs/redesign/round4/before-1440-profile.webp new file mode 100644 index 0000000..78d46f2 Binary files /dev/null and b/docs/redesign/round4/before-1440-profile.webp differ diff --git a/docs/redesign/round4/before-1440-selected-builds.webp b/docs/redesign/round4/before-1440-selected-builds.webp new file mode 100644 index 0000000..3a9ce4b Binary files /dev/null and b/docs/redesign/round4/before-1440-selected-builds.webp differ diff --git a/docs/redesign/round4/before-1440-start.webp b/docs/redesign/round4/before-1440-start.webp new file mode 100644 index 0000000..e9f3cb5 Binary files /dev/null and b/docs/redesign/round4/before-1440-start.webp differ diff --git a/docs/redesign/round4/before-390-start.webp b/docs/redesign/round4/before-390-start.webp new file mode 100644 index 0000000..653fb83 Binary files /dev/null and b/docs/redesign/round4/before-390-start.webp differ diff --git a/docs/redesign/round4/before-sheet.webp b/docs/redesign/round4/before-sheet.webp new file mode 100644 index 0000000..d7c6d97 Binary files /dev/null and b/docs/redesign/round4/before-sheet.webp differ