React scroll-triggered story components
Sections built around scroll position — parallax, scroll-triggered reveals and step-through narratives. Reach for these when content should unfold as a visitor scrolls, rather than all at once.
20 components
Scroll Fine Register
A divider/footer band whose streaming motion is built from a real tilemap-PPU scroll: a fine register sweeps 0..cellPx-1 sub-pixel offsets across 480ms before a coarse register ticks a tile over, with both registers exposed as a live numeric coarse/fine readout beside the strip.
Strip Station
Turn-by-turn directions unbent into one vertical straight-line diagram: row spacing is proportional to real ground distance, not step count, with a 44px floor that visibly breaks (equation-station zigzag, skipped chainage) rather than silently lying about distance.
Raft Moor
A collaborator presence rail where each teammate's live scroll position becomes a jump-to chip, and teammates who land on the same stretch raft outward in arrival order instead of collapsing into a '+n' count.
Ebb Flat
A pinned full-bleed tidal flat where scroll position is the water level: bars break surface, the channel drains and pools strand, and scrolling back floods it in exactly the order it emptied.
Lenticule Swing
A hero H1 lockup printed twice behind vertical lenticular slats (the problem statement and the product promise coexisting at once) that shimmers between both at rest and snaps cleanly to the promise as it scrolls out of view.
Footer ASCII Rule
A sitemap footer whose back-to-top control is a real instrument: an aria-hidden vertical rail beside it continuously reads actual scroll position, and the button drives a real spring back to the top rather than a jump. Grabbing the wheel mid-flight yields it immediately.
Nav Site Condense
A full-width site nav with the furniture a real site needs: a scroll-condensed bar, a menu trigger present at every width, and a mobile sheet built on native <dialog> for a free focus trap and Escape-to-close.
Nav Condense Rail
A full-width site nav that condenses in place as the page scrolls (roomy padding, full-size wordmark and links at the top, tightening to a dense pinned rail) over a distance measured from the bar's own rendered height at each extreme, not a guessed scroll-pixel constant.
Gallery Gantry Track
A scroll-scrubbed, infinitely-looping 3D card gallery: cards hang off a receding gantry track using real CSS perspective/preserve-3d, the whole tray tilts toward the pointer like a specimen table, and whichever card sits nearest the camera (by depth, not mouse distance) gets a procedural focus highlight and its title pushed to a live readout.
Header Scroll Pill
A page header that morphs between a full-width quiet nav bar at the top and a floating centered pill once scrolled: spring-like width/radius/padding morph, section label roll, and a progress hairline, with hysteresis so it never flutters at the threshold and a fast upward scroll flicks it back open with overshoot.
Reveal Cloth Unfurl
Media reveal that unrolls an image like a bolt of cloth: ~24 vertical strips fan open left-to-right off a rotateY hinge, curled strips converge into a shaded cylinder at the roll's leading edge, and one staggered settle ripple (plus a sheen sweep) crosses the surface once fully unrolled.
Minimap Pantograph
A minimap whose viewport rectangle is physically wired to the real viewport by a live SVG pantograph (two elbow arms solved by two-bar IK every frame), so dragging the small handle visibly swings and extends the linkage as the document pans, making the scale ratio legible instead of implied.
Listbox Sticky Groups
A grouped listbox for long lists (timezones, countries, currencies) where every passed group header sticks in place, stacking into overlapping 20px slivers you can still read and click. A live table of contents made from the headers themselves.
Timeline Changelog Wave
Changelog timeline drawn as a beach strand: each release arrives as a foam crest sweeping an arc in from the now edge, breaks at its chronological position, pops a marker in with a spring, and recedes leaving an etched tide-ring. Later waves wash past older marks so ring density reads as event history.
Scroll Story Strata
Pinned scroll story: the viewport becomes a geological core cross-section and scroll drives a drill bit descending through procedurally banded strata, with content panels crossfading per band and a mono HUD ticking depth.
Reveal Ripple Tiles
Media reveal driven by a height-field water sim: a ripple front sweeps from the trigger point, popping grid tiles open as the wave crosses them and refracting revealed tiles like wet glass; the cursor keeps stirring the water after full reveal.
Scroll Caliper
A vernier caliper pinned to a scroll container's edge whose spring-damped jaws close over the active section's extent while a mono readout ticks px and percent, tick marks streaking with velocity-scaled motion blur.
Scroll Defrost
Scroll-scrubbed defroster: a pinned full-bleed image behind rippled shower glass anneals from heavy frost with chromatic fringing to optical clarity, sealed by a specular sweep.
TOC Minimap Mercury
TOC minimap where scroll progress is a column of liquid mercury: a gooey SVG blob climbs the rail, absorbs section ticks, teardrops under fast scroll, and bulges toward hovered ticks.
Scroll Particle Tunnel
Scroll scrubs a camera through a monochrome point tunnel: velocity stretches dots into motion streaks, cursor drift adds parallax, and mono section labels at fixed depths snap into focus as you fly past.