Cursor trail

A word trails behind the cursor letter by letter.

Move your pointer around this area

Installation

$ npx shadcn@latest add @textlab/cursor-trail

Needs @textlab in your components.json. Setup takes a minute.

Usage

usage.tsx

import { CursorTrail } from "@/components/textlab/cursor-trail/cursor-trail";

<CursorTrail text="hello" className="h-80 rounded-xl border"><p>Move your mouse here</p></CursorTrail>

Variants

chainscatter

Props

Prop	Type	Default	Description
text*	string	–	The copy.
variant	"chain" \| "scatter"	"chain"	String letters along your path, or let each chase the cursor.
children	ReactNode	–	Content of the area the trail lives in.
spacing	number	0.62	Distance between letters on the chain, in em.
trailClassName	string	–	Class for the trailing letters.
as	ElementType	"div"	Rendered element.
reducedMotion	"user" \| "always" \| "never"	"user"	user follows the OS setting; always shows the still version.
className	string	–	Merged onto the root.

When to use it

Reach for it

Playful hero areas and 404 pages.
Portfolio sections that invite exploring.

Skip it

Over content people need to read or click; the trail sits on top.
Touch-only experiences.

Accessibility

The trail is decorative and aria-hidden; it never blocks clicks.
Content inside the area works normally.

Motion

Chain letters hold a fixed distance and turn to follow the path.
Letters fade in and out with the pointer instead of popping.

Reduced motion. No trail; the area renders its content only.

Performance

One frame loop that writes transforms; pauses when offscreen.