sheleg-design

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.

READ FIRST, BEFORE ANY OF THE CRAFT BELOW: CREATIVE_DIRECTOR.md — the decision layer. What the surface is for and what would prove it failed; which lane and which mode the task is in, because a redesign starts by measuring the thing it replaces and an update changes a token rather than the components that read it; which tools to cast, measured with npx sshlg-skills pack design --lane <lane> rather than recalled; when to build two variations with two disjoint casts in parallel subagents — and the rule that keeps that honest, which is that the rubric is written before either one exists; and the validation split that matters, where alignment to the brief and measurable quality are two different questions and neither implies the other. The failure mode of an agent doing design is not ugliness, it is plausibility, and that document is what refuses it.

REQUIRED REFERENCE — for the cinematic path: read 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. 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.