Scroll Fill Text
A headline that colours itself in as the page scrolls past it, one character at a time, with the two or three words that matter picked out in an accent. It measures against whichever ancestor actually scrolls, so it works inside a panel as well as down a page.
The decision inside it
Reduced motion fills it and stops
Tying colour to scroll position is motion whether or not anything moves on its own. When the system asks for less of it, the text renders filled and the listener is never attached.
Installation
How you get it
One command. The CLI writes the file into components/ui/ and installs what it needs.
npx shadcn@latest add https://layropro.com/r/scroll-fill-textAPI
“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.
Dependencies
npm packages
clsxtailwind-mergeLayro foundations, installed alongside it
layro-themeLifetime access
Every component, and everything we ship next.
- All 65 components, source included
- The template, and everything released after you buy
- shadcn CLI or download — React 18/19, Tailwind v4
- One payment. No subscription.