Interactive particle trail that follows cursor movement with physics-based animation.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

particleCount

• Type: number - Default: 50
• Number of active particles

particleSize

• Type: number - Default: 4
• Particle size in pixels

particleColor

• Type: string - Default: '#8b5cf6'
• Particle color (hex)

lifetime

• Type: number - Default: 2000
• Particle lifetime in milliseconds

friction

• Type: number - Default: 0.95
• Velocity damping (0-1)

gravity

• Type: number - Default: 0.2
• Downward force

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

className

• Type: string
• Additional CSS class

Customization

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-particle-cursor
• .cc-particle-cursor__canvas