Back to Gallery
Cursor Confetti Trail
£5 Standard License Unlimited projects
A responsive GSAP confetti trail that turns fast pointer sweeps and touch drags into colourful, directional ribbons of tumbling geometric particles.
About This Effect
A tactile geometric confetti effect that turns pointer sweeps and touch drags into colourful ribbons of circles, slashes, squares, and rings. Particles elastic-pop into view, inherit the gesture direction, rotate independently, and tumble away under gravity. The script reads only data attributes and never a class name, so it attaches to any surface: the demo puts it behind a plain order-confirmation card. A strict round-robin DOM pool keeps repeated celebrations responsive without creating nodes during interaction.
What's Included
- Interpolated path spawning that keeps fast pointer arcs visually continuous
- Pointer Events support for mouse, pen, touch dragging, and deliberate tap bursts
- Velocity-driven particle density, launch force, spread, and directional rotation
- Elastic scale-in followed by gravity fall, tumble, and opacity fade
- Strict round-robin DOM pool with tween cancellation on every recycled particle
- Configurable pool size, spawn distance, fall distance, duration, and full colour palette
- Optional data-confetti-react hook so any element can kick as the pointer sweeps past
- Keyboard-triggered burst from the focused interaction stage
- Particle motion suppressed entirely for reduced motion, leaving the page content intact
Perfect For
- Order confirmation and checkout success screens
- Signup, onboarding, and 'you're in' completion moments
- Launch pages that need a celebratory gesture without a video
- Campaign microsites with touch-friendly decorative motion
- Festival and event pages with tactile audience interaction
How It Works
The effect creates a fixed pool of absolutely positioned shape elements once at initialization, coloured by cycling the data-palette list. Pointer Events measure distance, direction, and speed; long moves are interpolated at the configured spawn interval so quick arcs form an unbroken ribbon instead of isolated clusters. Each recycled particle receives a GSAP timeline for elastic scale, directional x/y velocity, independent rotation, gravity, and fade, while gsap.killTweensOf() and timeline cleanup guarantee safe reuse. Any descendant marked data-confetti-react gets a small scale and skew kick on the same gesture. gsap.matchMedia() suppresses particle creation and motion when reduced motion is requested.
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
