CursorTrail
A canvas-based cursor trail that renders a smooth, fading sequence of dots following the mouse pointer. Move the mouse over the area to see the effect. Fully customizable color, size, and trail length.
Import
import { CursorTrail } from "@animui/ui";Basic
Wrap any content with CursorTrail. Move your mouse over the preview area to see the fading dot trail.
Move your cursor here
Watch the purple trail follow your mouse
Custom Color
Pass RGB values as a comma-separated string to the color prop.
Pink trail
color="236,72,153"
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "139,92,246" | RGB values as a comma-separated string, e.g. "139,92,246" for purple. |
size | number | 14 | Maximum radius of the largest trail dot in pixels. |
length | number | 22 | Number of positions tracked in the trail history. |
className | string | — | Additional classes for the canvas container. |
children | ReactNode | — | Content rendered above the canvas. |