scroll-cinemalisted

# Scroll-cinema Sites where the wheel drives a camera rather than the document. The whole genre reduces to one primitive — **map scroll position to a number between 0 and 1, publish it as a CSS custom property, and let CSS do the rest** — plus a catalogue of moves built on top of it. Everything here is vanilla. Libraries are not needed for this and they cost you 40–100 KB plus a scroll-hijacking layer that fights the browser. ## Start here 1. **Read `references/mechanics.md`** for the move catalogue with working code — aperture, dolly, parallax, 3D card entry, stacked panels, masked reveals, cycling readouts, progress rails. 2. **Read `references/pitfalls.md` before you debug anything.** It is a list of failures that look like logic bugs but are CSS-semantics or browser-lifecycle traps. Several cost real time to rediscover. 3. **`assets/template.html`** is a complete working page using every mechanic — single file, no dependencies, dark/light themed, with a toggleable overlay that labels each move as it fires. Copy it and replace the content, or lift individual mechanics out of it. ## The engine Every stage is a tall section with a sticky child. The section's height is the scroll budget; the sticky child is what you actually see. ```html <section class="stage" id="s-hero" style="height:460vh"> <div class="pin"><!-- one viewport of content --></div> </section> ``` ```css .stage{position:relative} .pin{position:sticky;top:0;height:100svh;overflow: