Pinned chapters, scrubbed sequences and parallax depth for long-form narrative pages, product launches and annual reports.
8 effects · use them together
Featured light A full-height section pins while vertical scrolling drives a row of large cards sideways; each card's image parallaxes against its frame and a hairline progress bar tracks the journey.
Featured medium A pinned full-viewport canvas plays a 90-frame sequence scrubbed by scroll — the frames are generated procedurally at load (a turning wireframe ring in soft gradients and grain), with a mono frame counter and headlines that hand over at 30% and 70%.
light A large serif paragraph whose words fill from a muted ink to full text colour as each one crosses the viewport centre, scrubbed by scroll — plus a marker-style accent highlight that draws itself behind two key phrases.
light A tall hero built from five depth layers — sky, far ridge, mid ridge, foreground and headline — each scrubbed at its own yPercent speed from a data-speed attribute, plus a lerped pointer parallax on desktop that tilts the scene toward the cursor.
light Five full-width cards pin in sequence as you scroll; each arriving card slides over the previous one, which scales down to 0.9 and dims behind a translucent overlay, so the section ends as a neat stepped stack.
Featured medium A pinned hero where the display word DEEPER is punched out of a page-coloured panel; scrolling scales the word 40× around the stem of one letter so the camera flies through it and the image panel behind is revealed.
light A two-column feature: the left visual column is sticky for the whole section while four text chapters scroll by on the right; each chapter crossing the centre swaps the visual with a directional crossfade and lights its progress dot.
light A long vertical SVG route draws itself as you scroll (DrawSVG 0% → 100%, scrubbed) while a glowing dot rides the pen tip via MotionPath; four station dots pop in with a back.out(2) overshoot and their labels slide in as the line reaches them.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…