cinematic-scroll-landinglisted

# Cinematic Scroll Landing Pages Methodology distilled from production builds (agency-grade studio site rebranded into an institutional LMS landing; a full-page book site for an LMS trial). It produces sites that feel like one continuous film, not a stack of sections. ## The core system (always applies) 1. **Research the reference, don't clone the stack.** Award sites are usually custom WebGL engines. Decompose the *feel* into reproducible mechanics: smooth scroll, parallax, distortion, looping. You get 90% of the feel with Lenis + GSAP + disciplined art direction. 2. **One visual universe.** The #1 cause of "sections feel unrelated" is mixed-source imagery. Generate ALL imagery with ONE locked style template (see `references/imagery-universe.md`). Never mix stock photos with generated art. QA every batch on a contact sheet; crop generator watermarks (bottom ~5.5% is typical). 3. **A shared atmosphere layer.** One `position: fixed` layer behind all content (radial gradient + slow-drifting fog/noise + faint watermark), mounted ONCE at layout level — never per-section. Content floats *through* one continuous world. 4. **One transition grammar.** Pick ONE reveal recipe and ONE dissolve recipe and use them site-wide (e.g. clip-path `inset(12%)→0` + scale `1.2→1`; cross-dissolves with ~25vh overlap). Matched parallax on ALL media. Consistency, not variety, is what reads as cinematic. 5. **Film grammar.** Section labels as slates (`SC.0