Lenis-style smooth-scroll animations built from scratch: lerped scrolling, parallax, scroll-linked text, horizontal tracks, stacking cards, coverflow, pinned steps, path drawing, and more.
npx motionfoundry list --collection scrollnpx motionfoundry add smooth-scroll parallax-layers scroll-fill-textShowing 18 of 18 components
SmoothScroll
A Lenis-style smooth scroll viewport built from scratch: wheel input drives a target position that a frame-rate independent lerp chases each frame, with an optional progress bar and live velocity readout that make the inertia visible.
ParallaxLayers
A self-contained smooth-scroll scene where up to five decorative planes (glow orbs, rings, glass cards, dots and sparks) translate at different fractions of the scroll distance behind native-speed headlines, creating layered depth.
ScrollFillText
An Apple-style reading effect: a pinned paragraph inside its own smooth-scroll viewport whose words blend from a dim color to full color one by one in sync with scroll progress.
VelocityMarquee
Two counter-direction marquee rows pinned inside a smooth-scroll viewport: they drift at a base speed, then accelerate, flip direction and skew with scroll velocity, easing back smoothly when scrolling stops.
ScrollCoverflow
A pinned 3D coverflow carousel inside its own smooth-scroll viewport: scrolling glides the cards past the center, where the active card faces forward while its neighbours rotate away and recede in depth.
PinnedSteps
A pinned two-column walkthrough inside its own smooth-scroll viewport: scrolling advances through the steps, highlighting and expanding the active step with a live progress line while the visual on the right crossfades to that step's illustration.
ScrollPathDraw
A pinned SVG route draws itself in a two-color gradient as you scroll a smooth-scroll viewport, led by a glowing head dot, while milestone markers light up and their labels rise into place the moment the line reaches them.
HorizontalScroll
Vertical wheel or touch scrolling inside a smooth-scroll viewport drives a pinned horizontal track of cards; the scroll distance is measured from the track width so the last card lands exactly at the end, with a counter and progress line.
StickyStackCards
Cards pin one after another inside a smooth-scroll viewport, each settling a few pixels below the last, while the cards underneath scale down and dim in proportion to how many cards cover them.
ScrollZoomReveal
A pinned panel of pure-CSS synthwave art starts as a small rounded inset and expands to full-bleed as you scroll (clip-path inset plus counter-scale tied to eased progress), then a headline fades up over it.
ScrollTimeline
A vertical milestone timeline inside a smooth-scroll viewport: the line draws with scroll, and each dot lights up with a springy scale while its card slides in the moment the line tip reaches it.
SplitScreenScroll
A pinned two-column story inside its own smooth-scroll viewport: as you scroll, the text column travels up while the gradient visual column travels down, so each heading meets its paired visual mid-screen, with a progress divider and counter between them.
ParallaxColumns
Three masonry columns of gradient tiles pinned inside their own smooth-scroll viewport; scrolling drives each column at a different speed while the middle column counter-moves, under a frosted title card.
ScrollWordSwap
A big pinned headline inside its own smooth-scroll viewport whose key word swaps once per scroll section with a masked slide, blur or flip, while the word color, background wash and segmented progress bar shift to each word's tint.
ScrollTiltCards
Feature cards inside a smooth-scroll viewport rotate in 3D as they enter from below, settle perfectly flat at the viewport center, and tilt away again as they leave the top, with scale, depth shadow and glow tied to scroll position.
ScrollFocusList
A large-type list inside a smooth-scroll viewport where the entry nearest the center is sharp, bright, scaled up and underlined in the accent color, while every other entry blurs and dims continuously with its distance from center.
SnapSections
Full-height sections inside their own viewport that advance exactly one section per wheel or trackpad gesture with an eased snap animation, plus clickable dot navigation and PageUp/PageDown/Arrow/Space/Home/End keys; each section's content rises in as it becomes active.
ScrollColorShift
Chapter sections inside a smooth-scroll viewport where the whole background and text color interpolate between up to four colors as each section reaches the center, with automatic light/dark text for contrast and a tunable blend window.