Cursor Trail
Visual effect component that follows mouse cursor with customizable particle trails and animations to enhance user interaction.
Pro Features
Unlock advanced capabilities with the Pro version
Cursor Tracking
Smooth trail that follows mouse movement in real time
Fade Animation
Particles smoothly fade out over their configured lifetime
Scale Animation
Particles gradually shrink as they age for a natural trail
Duration Control
Set how long each trail particle stays visible
Shape Options
Choose circle, square, or diamond particle shapes
Full Customization
Adjust color, size, opacity, and blur to match your design
Scoped Trails
Limit the effect to a specific container with targetRef
Custom Rendering
Provide your own trail element via the renderTrail prop
Installation
Install via CLI
npx @moontra/moonui-cli add cursor-trailUsage
Move Your Mouse!
👆 See the cursor trail effect inside this area
Examples
Solid Color Trail
A simple trail using a solid color and medium-sized particles
Solid Color Trail
Move your mouse for a solid blue particle trail
Long Fade Trail
A long trail with an extended fade duration and soft blur
Long Fade Trail
40 particles with a 2s fade and soft blur
Bold Blurred Trail
Larger particles with high opacity and a subtle blur
Bold Blurred Trail
Large 10px particles at 90% opacity with blur
Compact Green Trail
A shorter trail with a custom green color
Compact Green Trail
Short 15-point trail with a custom green color
Neon Glow Trail
Bright cyan particles with heavy blur for a glowing look
Neon Glow Trail
Bright color plus blur create a glowing effect
Soft Translucent Trail
Semi-transparent light-blue particles for a soft appearance
Soft Translucent Trail
Light-blue particles at 60% opacity
Fine Particle Trail
Small particles with a longer lifetime
Fine Particle Trail
Small 3px particles with a 1s lifetime
Diamond Particle Trail
Trail rendered with diamond-shaped particles via the shape prop
Diamond Particle Trail
Uses the diamond particle shape