docs: record round 2 wayfinding concept, cuts and alternatives
This commit is contained in:
56
docs/redesign/round2.md
Normal file
56
docs/redesign/round2.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# Round 2: Wayfinding
|
||||
|
||||
## Concept
|
||||
|
||||
The site is a night drive, so the reading layer should follow the rules of a road.
|
||||
Round 1 added effects around the drive (a boot terminal, a cursor headlight, a grain
|
||||
overlay, an operations ticker). Round 2 removes those effects and gives everything a
|
||||
single sign language. Every chapter is an **exit**, numbered the same way everywhere:
|
||||
|
||||
- the 3D roadside sign that drives past (`EXIT 03`, then the next exit, an exit arrow),
|
||||
- the chapter panel (a chamfered `EXIT 03` tab on the top edge, plus `THEN → Infrastructure`),
|
||||
- the navigation gantry (leading-zero exit counters at wide widths),
|
||||
- the dash cluster (exit tab, route %, chapter, Bucharest local time),
|
||||
- project registration plates (`05.1 / PRIVATE / ACTIVE`) and lettered evidence stops (A–D).
|
||||
|
||||
Each exit uses its chapter accent (rose, violet, cyan, coral) in both CSS and the sign
|
||||
texture, so the world and the page tell you the same thing at the same moment.
|
||||
|
||||
## Changes
|
||||
|
||||
- **Sign faces** (`src/scene/world/sign.ts`): redrawn as exit signs, with an accent tab, a
|
||||
"THEN" line, a fitted label, a lane rule and a 45° exit arrow that mirrors for left-side
|
||||
signs. The emissive edge takes the chapter accent. This also fixes a numbering defect:
|
||||
signs used to say Profile = ROUTE 02 while the CSS numerals said 01.
|
||||
- **Exit plates** (`src/styles/wayfinding.css`, which replaces `nightshift.css`): all labels are
|
||||
CSS generated content with empty alt text (`/ ''`), so the no-JS semantic document is
|
||||
unchanged. On arrival the current chapter's tab flickers on once, like a neon tube
|
||||
catching (this is gated behind reduced motion).
|
||||
- **Soundtrack coupling** (`src/audio/music-pulse.ts`): an analyser tap on the mixer output
|
||||
reads the low bins once per frame inside the existing scene loop. While audio is running
|
||||
and audible, kicks push the terrain surge and the sun bloom. When audio is muted or off
|
||||
it reads 0 and adds no work.
|
||||
- **Mask win** (`sign-stage.ts`): the opening reading-mask reveal is quantized to 24 steps,
|
||||
so the mask-image string, and the repaint it triggers, changes at most 24 times instead
|
||||
of every scroll frame.
|
||||
- **Hero scrim**: its bottom is feathered with a static mask, which removes the dark band
|
||||
that showed while scrolling.
|
||||
- **Vignette**: plain alpha with no blend mode, so it is never re-blended against the canvas.
|
||||
|
||||
## Cut from round 1
|
||||
|
||||
- `useHeadlight` (the beam and spotlight): a pointer-follow effect that cost work on every frame.
|
||||
- `BootSequence`: a terminal-log cliché that delayed the hero.
|
||||
- `OperationsStrip`: a third bottom pill. Its clock moved into the dash cluster, and uptime was dropped.
|
||||
- The soft-light grain overlay over the canvas, which cost compositing on every frame.
|
||||
- The hover font-weight change on the hero name, which caused layout work.
|
||||
|
||||
## Alternatives considered
|
||||
|
||||
- **Editorial dossier** case studies with sticky media columns. This is blocked because the
|
||||
live reading stage translates `.portfolio-main`, so `position: sticky` does not work inside it.
|
||||
- **Grain or film post pass** in the WebGL composer. Rejected for its fill-rate cost on low tiers.
|
||||
- **Physical sign assets from Blender**. Deferred, because the signs are procedural
|
||||
geometry with canvas faces, so the redesign needed no GLB changes and kept the first-scene budget.
|
||||
- **Per-chapter sky events** (meteors, a city skyline on approach). Worth doing, but it is scene work
|
||||
that needs its own performance pass.
|
||||
Reference in New Issue
Block a user