Scroll Scatter Text

PRONew

Preview live, install via shadcn or copy the source.

Installation

Install via shadcn

This will install the component and its dependencies automatically.

PRO COMPONENT

Unlock with PRO

This component is exclusive to reframe/ui PRO.
Get instant access to all premium components and templates.

Usage

scroll-scatter-text-usage.tsxTSX

Props

NameTypeDefaultRequiredDescription
textstringYesText to display — letters scatter and settle on scroll.
classNamestringNoExtra class for root section.
viewportClassNamestringNoClass for sticky viewport.
headingClassNamestringNoClass for heading (typography).
letterClassNamestringNoClass for each letter span.
heightstringh-[750vh]NoTailwind height class controlling scroll distance.
intensitynumber1NoScatter intensity 0-2 (scales y/rotation/x).
yRange[number, number][95, 170]NoY displacement range in % before intensity.
rotationRange[number, number][12, 28]NoRotation range in deg.
xRangenumber10NoMax random X offset in em.
staggernumber0.04NoStagger between letters (s).
baseDurationnumber0.9NoBase duration per letter tween.
startXstring92vwNoHeading initial X.
endXstring-42vwNoHeading final X.
disableHeadingDriftbooleanfalseNoDisable heading horizontal drift.
easestring | "varied"variedNoEasing strategy or single GSAP ease.
scrollDistancestringNoCSS height overriding Tailwind height (e.g. "300vh").
scrubboolean | numbertrueNoScrollTrigger scrub value.
scrollerstring | HTMLElement | nullNoCustom ScrollTrigger scroller (selector or element). Needed inside PreviewModal fixed containers.
© reframe/ui 2026Built by @thommysart
More in Scroll Effects