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 @compronents/stretch-text-scrollInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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