57 lines
3.4 KiB
Markdown
57 lines
3.4 KiB
Markdown
# 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.
|