Cursor Trail
HOVER ME
Customize
Props
| Property | Type | Default | Description |
|---|---|---|---|
trailText | string | "✦" | Characters or emojis that spawn as trail particles. |
style | "fade" | "float" | "shrink" | "spin" | "scatter" | "fade" | Particle animation style. |
color | string | "#a889c7" | Fallback color for particles when colors array is not provided. |
colors | string[] | undefined | Array of colors cycled through particles. Overrides color when provided. |
spacing | number | 30 | Minimum distance in px the cursor must travel before a new particle spawns. |
minSize | number | 20 | Minimum font size (px) of spawned particles. |
maxSize | number | 48 | Maximum font size (px) of spawned particles. |
exitDuration | number | 0.4 | Duration in seconds for each particle fade-out animation. |
removalInterval | number | 30 | Interval in ms between removing trail items when the cursor stops moving. |
maxPoints | number | 12 | Maximum number of trail particles visible at once. |
followMouseDirection | boolean | false | When true, each particle rotates to match the direction the cursor is moving. |
randomFloat | boolean | true | When true, particles drift with a random floating offset after spawning. |
className | string | "" | Extra classes forwarded to the wrapper element. |
children | ReactNode | undefined | Content to wrap. The trail activates anywhere inside this area. |
trailTextstringCharacters or emojis that spawn as trail particles.
"✦"style"fade" | "float" | "shrink" | "spin" | "scatter"Particle animation style.
"fade"colorstringFallback color for particles when colors array is not provided.
"#a889c7"colorsstring[]Array of colors cycled through particles. Overrides color when provided.
undefinedspacingnumberMinimum distance in px the cursor must travel before a new particle spawns.
30minSizenumberMinimum font size (px) of spawned particles.
20maxSizenumberMaximum font size (px) of spawned particles.
48exitDurationnumberDuration in seconds for each particle fade-out animation.
0.4removalIntervalnumberInterval in ms between removing trail items when the cursor stops moving.
30maxPointsnumberMaximum number of trail particles visible at once.
12followMouseDirectionbooleanWhen true, each particle rotates to match the direction the cursor is moving.
falserandomFloatbooleanWhen true, particles drift with a random floating offset after spawning.
trueclassNamestringExtra classes forwarded to the wrapper element.
""childrenReactNodeContent to wrap. The trail activates anywhere inside this area.
undefinedCrafted withbyMohammad Tasin