Cursor Trail
Visual effect component that follows mouse cursor with customizable particle trails and animations to enhance user interaction.
Pro features
What the Pro version adds to this component.
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
Long Fade Trail
A long trail with an extended fade duration and soft blur
Bold Blurred Trail
Larger particles with high opacity and a subtle blur
Compact Green Trail
A shorter trail with a custom green color
Neon Glow Trail
Bright cyan particles with heavy blur for a glowing look
Soft Translucent Trail
Semi-transparent light-blue particles for a soft appearance
Fine Particle Trail
Small particles with a longer lifetime
Diamond Particle Trail
Trail rendered with diamond-shaped particles via the shape prop