sheleg-designlisted

# SHELEG Design ## Overview A page feels cinematic not from many animations, but from a **single source of truth** (measured scroll position) driving **many cheap, layered, independently-degradable responses**. Centralize scroll into one store; layers read it per frame and react in their own language. Nothing crossfades — things *redeploy*. Every layer degrades to a calm static state. **REQUIRED REFERENCE — for the cinematic path:** read [`SHELEG_DESIGN.md`](./SHELEG_DESIGN.md) before implementing a scroll-driven page — architecture, morph math, the DOM↔WebGL bridge, the build recipe (§11), the file map. **Product-UI work does not owe this read**; the one rule it would owe is repeated here: where a pack's motion tokens differ from the SHELEG defaults, **the pack wins**. **REQUIRED BEFORE ANY ANIMATION:** read [`MOTION_DOCTRINE.md`](./MOTION_DOCTRINE.md). `SHELEG_DESIGN.md` says how motion is built; the doctrine says whether to build it — the frequency table that kills animation on high-repetition paths, the easing tree and the `ease-in` ban, the duration ceiling, the forbidden forms, and the reduced-motion contract. ## When to Use - Landing/marketing/hero pages where motion is a stated goal; particle or WebGL backgrounds tied to scroll; scroll-linked charts, step flows, rails, parallax - An existing scroll site that feels nervous, janky, or out of phase - Product UI needing a locked visual system — dashboards, admin, internal/dev tools, tokens, light/dark — **style-