Scroll Text Highlight
A free scroll text highlight for React that brightens a paragraph word by word as it scrolls.
One adult in six in England reads below the level expected of a nine-year-old. That is the dose on a prescription label, the date on a letter from the council, the name of a street you were told to find. Longhand puts a volunteer beside them for one hour a week, in their own library, for as long as it takes.
Scroll Text Highlight is a free scroll text highlight for Next.js and React: a paragraph whose words start dimmed and light up one after another, left to right, as the section scrolls through the viewport. It is built with GSAP ScrollTrigger and styled with Tailwind, and it takes a plain string as its children which it splits into per-word spans internally.
The brightening is scrubbed straight from native scroll, so the words resolve to full contrast exactly as fast as you scroll and settle there. The paragraph is real, readable text at its final colour before any script runs, so with no JavaScript it is complete and it reads as one normal sentence to assistive technology. With prefers-reduced-motion enabled no scroll-linked animation is created at all and the text simply renders at full colour.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/scroll-text-highlightUsage
import { ScrollTextHighlight } from "@/components/scroll-text-highlight";
export default function Page() {
return (
<ScrollTextHighlight className="text-2xl font-medium leading-relaxed">
One adult in six in England reads below the level expected of a
nine-year-old. Longhand puts a volunteer beside them for one hour a
week, in their own library, for as long as it takes.
</ScrollTextHighlight>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | The paragraph text to highlight. Pass a plain string; it is split into per-word spans internally, with no dangerouslySetInnerHTML. The rendered paragraph is the full sentence at its final colour. |
| className | string | undefined | Additional classes merged onto the paragraph root. |
Customisation
Scroll Text Highlight declares no component tokens. The settled words use the foreground token and the only animated property is opacity, so restyle it entirely through className: set the text colour, size, weight and line height with Tailwind utilities on the paragraph. To change the resolved colour, apply a text colour utility that maps to one of your semantic tokens.
<ScrollTextHighlight className="text-3xl font-semibold leading-relaxed text-primary-accent">
Words brighten to the primary token here.
</ScrollTextHighlight>Frequently asked questions
- Is Scroll Text Highlight free for commercial use?
- Yes. Scroll Text Highlight is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Scroll Text Highlight hurt performance or accessibility?
- No. The words animate only opacity, driven by one GSAP ScrollTrigger scrub timeline, so there is no per-frame JavaScript loop of its own and no layout or colour repaint. The paragraph renders as full, readable text at its final colour before any script runs, so it is complete with no JavaScript and reads as a single normal sentence to screen readers because the word spans carry no extra aria. Contrast meets AA at the settled state, and with reduced motion enabled no scroll-linked animation is created at all.
- How do I change the text colour or size?
- Pass Tailwind utilities through the className prop. The paragraph inherits the foreground token by default, and utilities for text colour, size, weight and line height apply directly to it. There are no component tokens to configure because opacity is the only animated property.