Method
Each stage below places the same ten blocks: seven on the base grid, one window at plane −1, one solid pop and one glass overlay on the 5-grid. Placement uses the engine's per-edition custom properties, so resize the window and all three studies recompose together. What differs is when each block lands, and what machinery decides it.
Study A · Reading order
IntersectionObserver · engine default
A. Blocks land in DOM order — which is reading order, by system law. The default because it's honest: the animation teaches the document structure.
Study B · Scroll-driven, zero JavaScript
your browser: CSS timeline activeyour browser: showing static fallback
B. No script runs here. Each block's animation-range is offset by a custom property, so the stagger radiates center-out from the navy anchor — and scrubbing backward disassembles it. The animation is attached to scroll itself.
Study C · Plane-major
explicit delays · depth as narrative
C. The sheet lays itself first; the window opens; the hoverers arrive last, shadows after. Depth becomes a three-beat story: flat, then below, then above.
Findings
- B is the keeper for the client site. Scroll-driven assembly costs zero JavaScript, degrades to simply-present blocks, scrubs bidirectionally (which reads as craftsmanship), and respects reduced-motion with two lines. Recommend it as the SNX default, with the observer as fallback machinery rather than primary.
- Stagger should not exceed ~8 steps. Beyond that the tail feels laggy rather than choreographed. Large set pieces should land in banks, not solos.
- C's plane-major narrative is a hero-moment tool, not a default. One per page, above the fold, where the depth story earns its second of theatre.
- Shadows must land late. In every variant, the hard shadow fading in after its block settles is what makes the landing read as weight. Simultaneous shadow reads as decal.
- Engine gap found and noted: v0.1's observer applies delays per stage entry; a stage taller than the viewport starts its lower blocks off-screen. Fix queued for v0.2: per-block observation above a height threshold.