Scroll Word Highlight

Highlight a sentence word by word as the reader scrolls past it.

Dependencies: gsap
Size: 214 lines
Controls: 11 controls

example.tsx

1import { ScrollWordHighlight } from "@/components/onycx/scroll-word-highlight";23export default function Example() {4  return (5    <ScrollWordHighlight6      text={"We connect bold ideas with precise digital craft. Distinctive brands. Intuitive products. Websites that make you feel something."}7      eyebrow={"01 / The point of view"}8      showEmblem9      mode={"color"}10      dimColor={"#7e8795"}11      color={"#f0f1f4"}12      accent={"#ff652e"}13      start={65}14      end={65}15      scrub={0.5}16      stagger={0.16}17    />18  );19}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/scroll-word-highlight.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/scroll-word-highlight.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the scroll-word-highlight.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
text	string	—	Statement, split on spaces into words.
eyebrow	string	"01 / The point of view"	Label with a square accent point. Empty hides it.
showEmblem / emblemLabel	boolean / string	true / "THINK / MAKE / MOVE"	Gradient tile with the studio mark and a tiny caption (hidden under 600px).
note	string	"One independent studio.\nA complete digital perspective."	Note under the statement; "\n" breaks the line.
linkLabel / linkHref	string	"Get to know the studio" / "#"	Underlined text link. Empty label hides it.
mode	"color" \| "opacity"	"color"	Sweep colour dim → lit, or opacity 0.25 → 1.
dimColor / color / accent / muted	string	"#7e8795" / "#f0f1f4" / "#ff652e" / "#a6b0bd"	Unread, read, accent point/link hover, and note colours.
start / end	number	65 / 65	Sweep runs from the section top at start% to the section bottom at end% of the viewport.
scrub / stagger	number	0.5 / 0.16	Scroll smoothing in seconds and the per-word offset.
className	string	—	Extra classes on the section.