Reading Spread
Long-form reading layout with a progress rail, hanging pull-quotes and a measure that never exceeds 68 characters.
- Difficulty
- Standard
- Credits saved
- ~70
- Access
- Members
Technique
Named grid columns for margin notes, scroll-linked progress bar, text-wrap: pretty for orphan control.
Choreography spec
none — continuous progress rail
- continuousrail scaleX tracks article scroll position
- per pull-quotemargin note fades in as it enters the measure
Reversibility
Rail and notes both track position directly.
Reduced motion
Rail static at 0, notes always visible.
Build a "reading-spread" section for my landing page. TECHNIQUE Named grid columns for margin notes, scroll-linked progress bar, text-wrap: pretty for orphan control. SPEC ██████████████████████████████████████████████ ██████████████████████████████████████ ████████████████████████████████████████████████████ RULES ████████████████████████████████████████████ ██████████████████████████████████████████████████
Full prompt unlocks with membership.
Reading spread
Choreography is scroll position, made legible.
A set piece earns its scroll or it should not exist. The test is simple: if the user scrolls back up and the frames do not rewind exactly, the section is animation, not choreography.
That distinction is the whole discipline. Animation runs on time. Choreography runs on position. One of them fights the user; the other one hands them the transport control.
Everything here derives from a single number — how far a wrapper has travelled through the viewport. Transforms, opacity, clip paths and label states are all functions of that number.
Which means there is no state to desynchronise, no timeline to resume, and no janky catch-up when a trackpad throws forty events at you in a frame.