Cursor Confetti Trail
GSAP-powered cursor trail that spawns colorful geometric shapes with elastic bounce-in, random rotation, and gravity fall-off on mouse move.
About This Effect
A cursor trail effect that spawns colorful geometric shapes (circles, diamonds, rings) at the mouse position as you move. Each shape scales in with an elastic bounce, rotates randomly, and falls away with a gravity-like ease. DOM elements are recycled in a round-robin pool using gsap.utils.wrap() for zero garbage collection overhead.
What's Included
- Distance-based spawning via GSAP ticker for smooth tracking
- Elastic scale-in with random rotation per particle
- Gravity fall-off with back-in easing
- DOM element recycling via gsap.utils.wrap()
- Inline SVG shapes for zero external dependencies
- Configurable pool size, spawn distance, and fall distance
- Custom accent colors via data attributes
- Graceful touch device handling with fallback notice
Perfect For
- Creative agency portfolio sites
- Playful landing pages and microsites
- Event and festival promotional pages
- Interactive art and experimental web projects
- Game-themed websites and campaign pages
How It Works
A pool of absolutely-positioned DOM elements is created on init, each containing an inline SVG shape. A GSAP ticker callback runs every frame, calculating the distance the cursor has traveled since the last spawn. When the threshold is exceeded, the next element in the pool is positioned at the cursor and animated with a timeline: elastic scale-in, random rotation, gravity y-offset with back.in ease, and opacity fade-out. gsap.killTweensOf() ensures clean recycling when elements are reused.