Stretch Text Scroll
Three pinned panels whose oversized words grow on a vertical scaleY as you scroll in, snap to full height, then collapse back out. The final panel keeps scaling its word past the frame until a background still takes over, its wash fades, and a centered headline reads in word by word. GSAP ScrollTrigger with SplitText and Lenis.
npx shadcn@latest add https://ui.aryank.space/r/stretch-text-scroll.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| words | [string, string, string] | Overdrive / Static / Friction | The three stretched panel words. |
| heroText / header / outroText | string | BLANK editorial lines | Opening, revealed headline, and closing copy. |
| image / embedded | string / boolean | BLANK-hosted still / true | Backdrop for the final panel; embedded owns the scroll container. |
wordstextThe three oversized panel words that stretch in and out.
heroText / header / outroTexttextOpening line, revealed headline, and closing line.
imageasset-urlStill revealed behind the final scaling panel.
gsaplenis