Text Cursor for React

Text Cursor leaves a trail behind the pointer, like breadcrumbs. As the pointer moves through its area, the next character of its text is dropped every few pixels, turned the way the pointer is going, and drifts up as it fades: sparkles scatter behind a flourish, emoji take turns, and a word spells itself along the path.

Use it for a playful hero, a celebration, a kids' page or a section that should feel alive under the pointer. For a trail of the text itself, use Echo Text; to light up letters near the pointer, Spotlight Text. The trail is a fixed set of characters reused in turn: a handler writes where the next one goes to CSS variables and restarts a CSS keyframe animation the install adds to your stylesheet, with no state, no animation library and no frame loop. With reduced motion each character only fades where it was dropped.

Installation

Usage

import { TextCursor } from "@/components/ui/text-cursor";

The trail plays over its own children, inside its box.

<TextCursor className="h-64" text="✨">
  <h2>Move the pointer here</h2>
</TextCursor>

Demos

Word

A word is dropped a character at a time and in order, so it spells itself along the pointer's path. spacing is how far the pointer moves between one character and the next, 40 pixels by default: about a letter's width reads best for a word. Here the trail is styled through its slot, [&_[data-slot=text-cursor-char]]:text-xl, and takes the area's colour.

Trail

count is the most characters on screen at once, 8 by default, and duration how long each lingers, 1000 ms: more of both makes a longer, denser trail. Several emoji take turns. orient={false} keeps every character upright, whichever way the pointer moves.

Accessibility

The trail is decoration: hidden from screen readers and from the pointer, so it's never read out and never blocks a click on the content beneath, and clipped to the area. The content is your children, read and used as usual. On a touch screen a tap drops one character where it lands, and dragging a finger scrolls the page as usual, with no trail. With reduced motion each character appears and fades where it was dropped, without drifting.

FAQ

API Reference