Shadcn.io is not affiliated with official shadcn/ui
Paint Text
Cursor-driven text painter that reveals each glyph as the pointer crosses it, leaving the painted letters fully visible while unpainted glyphs render as a soft ghost outline, built with React, Next.js, motion, and TypeScript.
Paint Text preview
Letters start as a faint ghost — a low-opacity outline of the headline, just legible enough to hint at what's coming. As the cursor moves across the text, every glyph it passes flips into its painted state, fading up to its final color and staying there. Painted letters do not unpaint; they accumulate, so the user feels like they are physically rolling paint across a stencil. An optional autoResetMs clears the canvas after a few seconds so the next visitor gets a fresh blank too. All state lives in refs and all updates happen via direct DOM writes inside requestAnimationFrame, so the component renders once and animates without ever re-rendering — even on long strings. Spaces stay rigid. Drop it into a hero, a signup page ("type your story"), or any interactive headline that benefits from active engagement.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the paint-text text effect into my projectRelated Components
Text Pressure
Variable font weight responding to cursor proximity
Variable Proximity
Variable-font axes that follow the cursor
Magnet Text
Letters physically pulled toward the cursor
Text Trail
Cursor trail that paints letters in its wake
Text Cursor
Character trails following cursor movement
Text Hover Effect
SVG text with radial gradient mask reveal
FAQ
Was this page helpful?
Sign in to leave feedback.
Outline Text
Hollow stroked text with a solid color fill that animates in from any direction on hover, view, loop, or always for React applications built with Next.js, motion, and Tailwind CSS.
Paper Cut Text
Layered paper-cut craft typography with stacked depth layers, soft drop shadows, and optional cursor-driven parallax tilt for an editorial paper-craft aesthetic for React, Next.js, motion, and Tailwind CSS.