A sticky panel
It holds its position while the steps move past it, so the reader never loses the frame the steps belong to.
The library, demonstrated
The mechanics, running
Every scroll mechanic in the library, live on one page, in the order you would meet them. This is the reference we build client pages from, published rather than kept internal because a list of capabilities is worth less than the capabilities running.
Why this page exists
Every page we build is assembled from named mechanics rather than laid out by hand. The front door lists them. A list is easy to write and proves nothing, so this page runs them instead, one after another, with a line above each saying what it is for.
It is also how we catch our own bugs. Two mechanics on this page had never appeared on a live page at all, which meant nobody would have found out they were broken until a client asked for one.
Unfold
A pinned line that lights word by word as you scroll it, so the reader sets the pace rather than watching a timer.
Use it once, near the top, for the single sentence the whole page is about. Twice on one page and it stops being a moment.
Statement
One phrase, one screen, nothing else on it.
LineThe story's own words. Never a new claim written to fill the space.
NotesThree or four columns of small type underneath, for the qualifications.
EchoA word set several times behind itself, for depth rather than decoration.
23
2
350 KB
Steps
- 01A sticky panel
- 02For a sequence
- 03Not for a list
For a sequence
Anything with an order: a process, a method, a chain of cause and effect.
Not for a list
If the items do not depend on each other, use reveal instead and save the pin.
Track
A pull quote is one sentence. If it needs three, it is a paragraph.
Quote
Compare
Before
Two sides that arrive from opposite directions as the section enters, so the contrast is something that happens rather than something the reader has to assemble from a table.
Use it for a genuine before and after, or for two positions that actually oppose. Not for two things that merely differ.
After
The right side carries the argument, because it arrives second and lands last.
If the two sides are equally weighted, this is the wrong mechanic and a bars block or a plain table will serve the reader better.
Macro
An extreme close-up, scrubbed by scroll.
The subject fills the frame and drifts across it while one line of type holds. This is the beat that makes a product page feel photographed rather than laid out, and it is the only mechanic here that needs a genuinely good image.
CoverUnfoldStatementCountersStepsTrackBarsQuoteCompareMacroMarqueeRevealNoteShatterWorldShowcaseJourneyStageVariantsBuyIndexProseCloser
Reveal
For a list that is genuinely a list
Items that stand alone and do not depend on each other. Numbered where the order means something, plain where it does not.
Cheaper than steps
No pin, so it costs nothing from the budget of two.
Staggered on entry
Each item arrives just after the one above it, which is enough to make a list feel handled rather than dumped.
The rest of the library
Five commerce mechanics are not on this page because they need a product to be about: showcase, journey, stage, variants and buy all run on the product demonstration. Shatter runs on the click that never came, and world, the 3D scroll, is on the front door.
If you want one of these pointed at your own story, tell us what it is.