Text Highlight

A hand-placed highlighter band that sweeps in behind your text and tracks wrapping.

texthighlightmarkerannotationsvgtypographyheadline

Overview

Text Highlight is a React and Tailwind CSS highlighter animation that sweeps a marker band behind important words, in Next.js or any React app, with no dependencies. It measures the real text with Range rects, so the band follows every wrapped line and refits on resize and font load, and the sweep is one scaleX transition. Draw it once when it scrolls into view, on hover with a retract on leave, or control it with drawn. The text is server rendered as normal inline content and the band paints after hydration. Reduced motion draws it instantly.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-highlight

Usage

Import TextHighlight from @/components/wensity/text-highlight and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextHighlight } from "@/components/wensity/text-highlight";
 2
 3export default function Example() {
 4  return (
 5    <p className="font-display text-2xl text-zinc-900 dark:text-zinc-100">
 6      I think wensity has the{" "}
 7      <TextHighlight>
 8        best components
 9      </TextHighlight>{" "}
10      on the internet.
11    </p>
12  );
13}

Props

Prop	Type	Default	Description
`children`	React.ReactNode	-	The inline content to highlight.
`color`	string	chili (brand)	Marker color. Defaults to the Wensity brand (chili).
`opacity`	number	0.4	Opacity of the marker band.
`duration`	number	0.9	Seconds for the sweep.
`delay`	number	0	Seconds to wait before sweeping.
`trigger`	"view" \| "hover" \| "mount"	"view"	When to draw. View draws once on-screen; hover draws and retracts.
`padding`	number	2	Extra px around the text before the band is drawn.
`drawn`	boolean	-	Force the draw state. When omitted the trigger drives it; reduced motion always draws instantly.
`as`	keyof JSX.IntrinsicElements	"span"	Outer element tag.

Featured in React hero section components.