Scroll Text Highlight
A free scroll text highlight for React that brightens a paragraph word by word as it scrolls.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
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.
We build the sections other libraries skip. Every reveal is scrubbed straight from your own scroll, so the words brighten exactly as fast as you read them, then settle at full contrast and stay there. Nothing is pinned, nothing is hijacked, and with motion turned off the whole paragraph is simply there, sharp and complete.
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">
We build the sections other libraries skip. Every reveal is scrubbed
straight from your own scroll, so the words brighten exactly as fast as
you read them, then settle at full contrast and stay there.
</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">
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.