Back to components
Animation component
Text Gradient Scroll
Scroll-driven text reveal — paragraph fades word-by-word or letter-by-letter as the user scrolls.
Install
$ Run in your project root
pnpm dlx shadcn@latest add https://vibekit.desishub.com/r/text-gradient-scroll.jsonWhat it does
- Word-by-word OR letter-by-letter reveal granularity
- Three baseline opacity modes (none / soft / medium)
- Triggered by element's scroll position (useScroll)
- Drop-in <TextGradientScroll text=... /> — no setup
When to use
Use it
Hero mission statements, manifesto sections, editorial brand pages.
Skip it
Critical product copy or anything that must be readable from the first frame — accessibility risk on slow scrolls.
Prerequisites
- framer-motion (installed automatically)