KOI LAB — A current of colour

# KOI LAB — A current of colour

Build an editable React + TypeScript + Vite + Tailwind CSS website, split into App.tsx, KoiStage.tsx, art.ts and style.css. Use the original project archive in the JSON asset map for the exact vector artwork and composition. Do not paste a giant HTML document, embed the reference website in an iframe, or substitute a video for the working canvas.

## Design
A deep underwater canvas in #04090d / #0a202d / #194656. Syne 600–800 display type, Inter 400–600 body. Fixed transparent-to-dark navigation: SCROLLHAUS with KOI LAB label, The idea, The currents, Dive in, and Motion pause. At 520px use a working accessible menu. Keep 44px controls and visible keyboard focus.
Full viewport hero: blue light rays from above, faint perspective floor, rising bubbles, silver koi at several depths. Large frosted, extruded SCROLLHAUS lettering spans 92% width in the center. One larger koi crosses the lettering from right to left as you scroll. Its cyan scales, transparent ray-lined tail and fins shift through copper to violet. Draw the fish as vector canvas illustrations with gradients and scales; this is an illustrated depth effect, not a GLB model. Do not place an extra DOM headline over the wordmark.

## Scroll only — no cursor response
Native vertical scrolling controls ALL scene motion, forward and reverse. No mousemove/pointermove listeners, mouse parallax, cursor-following fish, or idle swimming. A sticky viewport sits in a 330vh desktop runway / 280vh phone runway. Normalize progress = clamp(-runwayRect.top / (runwayHeight - innerHeight),0,1), ease displayed progress with 1-exp(-12*dt); scene time = progress*20. Fish x, y, tail wag, bubbles, title parallax and colour all derive from that progress. At desktop the foreground fish x = width*(.84-.65*progress); on phone x = width*(.7-.4*progress). Cyan #67e8f9 → copper #fb923c → violet #c084fc. Three bottom chapter markers follow progress. HUD: “YOUR SCROLL SETS THE PACE / SCROLL TO DIVE ↓”.
Use one canvas, cap devicePixelRatio at 2, and repaint only when progress, size or palette changes. ResizeObserver sizes the canvas. Keep motion state in refs; use one cleaned-up requestAnimationFrame loop. Suspend painting offscreen and in hidden tabs. Do not pre-render or cache hundreds of bitmap canvases. Motion pause freezes the displayed progress; reduced motion shows the opening still, keeps native scrolling and reveals text without animation.