Highlight text
A marker sweeps behind key phrases one after another as the paragraph scrolls into view.
Text, in view, once, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/highlight-text.tsx https://motion-brew.com/r/highlight-text.tsxOne self contained file for React and Tailwind CSS: highlight-text.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { HighlightText } from "@/components/highlight-text";
export default function Page() {
return (
<HighlightText text="Good motion is quiet. It guides the eye and gets out of the way." highlights={["guides the eye"]} color="#fde68a" className="text-2xl" />
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | a line about motion | The paragraph |
| highlights | string[] | two phrases | Phrases to highlight, in reading order; each must appear in text |
| color | string | soft yellow | Marker color |
| duration | number | 0.6 | Seconds each sweep takes |
| className | string | Font, size and color |
More text
- Rotating text: Text set on a circle spins around an arrow badge.
- Shimmer text: The thinking sheen: a bright band sweeps across muted text on a loop, for AI and loading states.
- Annotation text: Hand-drawn pen marks draw themselves around words in view: circles, underlines, boxes and strikes, chained one after another.
- Backspace text: Types a word, holds, backspaces it letter by letter and types the next, with a blinking caret.