Menu
Cursor Trail
HOVER ME
Customize
Trail Text
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. |
trailTextTypestring
Default
"✦"Characters or emojis that spawn as trail particles.
styleType"fade" | "float" | "shrink" | "spin" | "scatter"
Default
"fade"Particle animation style.
colorTypestring
Default
"#a889c7"Fallback color for particles when colors array is not provided.
colorsTypestring[]
Default
undefinedArray of colors cycled through particles. Overrides color when provided.
spacingTypenumber
Default
30Minimum distance in px the cursor must travel before a new particle spawns.
minSizeTypenumber
Default
20Minimum font size (px) of spawned particles.
maxSizeTypenumber
Default
48Maximum font size (px) of spawned particles.
exitDurationTypenumber
Default
0.4Duration in seconds for each particle fade-out animation.
removalIntervalTypenumber
Default
30Interval in ms between removing trail items when the cursor stops moving.
maxPointsTypenumber
Default
12Maximum number of trail particles visible at once.
followMouseDirectionTypeboolean
Default
falseWhen true, each particle rotates to match the direction the cursor is moving.
randomFloatTypeboolean
Default
trueWhen true, particles drift with a random floating offset after spawning.
classNameTypestring
Default
""Extra classes forwarded to the wrapper element.
childrenTypeReactNode
Default
undefinedContent to wrap. The trail activates anywhere inside this area.
Crafted withbyMohammad Tasin