Scroll Chapters
Long pages told chapter by chapter: a pinned stage, sliding panels, a text crawl, lit paragraphs, stacking cards and drifting columns, checked in a real browser for dead scroll.
Turn a long page into scroll-driven chapters with nine dependency-free modules: a pinned stage with a scroll timeline, full-screen panels that slide over each other, a perspective text crawl, word-by-word lit paragraphs, stacking cards, opposing marquee rows, a pinned heading over drifting picture columns, reveals and a chapter rail. A browser check then scrolls the page and reports dead scroll, modules that never move, unlit words, overflow and text that disappears without JavaScript or with reduced motion.
How it works
Write one line per chapter: what the reader sees, why now, and which module carries it; pick one signature
Build the page as plain HTML, then add data-ch attributes for the stage, panels, crawl, words, stack, marquee, drift, reveal and rail
Run scripts/check.mjs at desktop and phone sizes, with reduced motion and without JavaScript, and fix every finding
Frequently asked questions
What does the check find?
It scrolls the rendered page in quarter-viewport steps at 1440 × 900 and 390 × 844 and records every module. It reports modules with a typo or that never change, pinned stretches of a viewport or more where nothing happens, paragraphs that never fully light, horizontal overflow, console errors, text hidden with reduced motion or without JavaScript, more than one signature module and pins longer than six viewports. A deliberately broken test page produced 9 errors and 5 warnings; the three examples pass with none.
Does it need a library or a model key?
No. The modules are one CSS file and one script with no dependencies. The check needs Node.js and Chrome. The example photographs were generated for these demos; your own page uses your pictures.
What happens with reduced motion or without JavaScript?
Without the script the page is ordinary flowing HTML. With reduced motion nothing is pinned or scroll-linked, every word is lit and stage layers show their final state one after another. The check fails the page if any text is hidden in either mode.
Are the examples real?
No. Northbound No. 9 and Okra Studio are fictional, and their numbers are made up.