Paint Text for React

Paint Text lets the pointer paint a headline. Every letter the brush passes takes the paint colour at once and keeps it for a moment after the brush moves on, so a stroke leaves a trail of colour through the words that fades back, letter by letter, to the text's own colour.

Use it for a hero line, a playful heading or a call to action that rewards a sweep of the pointer. For a weight that follows the pointer, use Variable Proximity; for a highlighter mark that draws itself, Highlight Text. The letters' centres are measured once as the pointer enters; each move marks the letters inside the brush with a data attribute, and CSS does the rest: a quick colour transition paints them and, once a letter is unmarked, a delayed one fades it back. There's no animation frame loop, and nothing re-renders as the pointer moves.

Installation

Usage

import { PaintText } from "@/components/ui/paint-text";

<h1>
  <PaintText text="Run the pointer through the words" />
</h1>

Demos

Colours

paintColor is the paint, any CSS colour, including your theme's variables such as var(--destructive). By default it's the theme's --chart-2.

Brush

radius is the brush's size: letters whose centre is that close to the pointer, in pixels, take the paint. resetDelay is how long the paint stays on a letter before it fades, in milliseconds.

Accessibility

Screen readers read the text once, from a visually hidden copy, never letter by letter. At rest the text is in its own colour, fully readable; choose a paintColor that also contrasts with the page, since painted letters are read too. The colour carries no meaning, so keyboard and touch users miss nothing; inside a link with keyboard focus the whole text shows painted. A colour fade isn't motion, so reduced motion keeps it.

FAQ

API Reference