017
AI ready

Cursor Confetti Trail

£5

A responsive GSAP confetti trail that turns fast pointer sweeps and touch drags into colourful, directional ribbons of tumbling geometric particles.

intermediate
5 more details
pointer-effectstouch-dragparticle-poolingvelocitymicro-interaction
Cursor Confetti Trail - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Cursor Confetti Trail demo in new tab

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 an ordinary order-confirmation page. A strict round-robin DOM pool keeps repeated celebrations responsive without creating nodes during interaction.

What's included

9 items
  • 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

5 use cases
  • 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

1 section

The effect creates a fixed pool of absolutely positioned shape elements once at initialization, coloured by cycling the data-palette list. Distance, direction and speed come off the pointer, and long moves are filled in at the configured spawn interval so a quick arc forms an unbroken ribbon rather than isolated clusters. Each recycled particle gets its own timeline for scale, directional velocity, independent rotation, gravity and fade, with cleanup on reuse so a recycled particle never inherits the last one's motion. Any descendant marked data-confetti-react gets a small scale and skew kick on the same gesture, and no particles are created at all when reduced motion is requested.

Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Cursor Confetti Trail opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the effect container to your <body>:

Code snippet omitted: it ships with the download.

position: relative and overflow: hidden keep the generated particles aligned with and clipped to the container. touch-action decides what a finger does: pan-y (what the demo uses) lets a vertical drag scroll the page while sideways sweeps and taps release confetti; none makes the stage own every touch drag, which is only right for a full-screen stage on a page with nothing below it.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

The container can be any element and can hold anything. The script reads only its data- attributes; it never queries a class name, so there is nothing in script.js to rename when you drop this onto your own page.

Three things are yours to set:

  • The surface. position: relative, overflow: hidden, and a height. The demo attaches it to a full-viewport order-confirmed page, but a 32rem section works the same way. Everything in the demo's style.css apart from the five .confetti-particle rules is that page's own design (Inter, the grey ground, the summary panel, the buttons) and can go.
  • The palette. data-palette takes a comma-separated list of any length, so the confetti can be your brand colours instead of the defaults.
  • The particle look. The script only assigns .confetti-particle plus a shape modifier and a --particle-color custom property. Restyling those five rules in style.css changes every particle; the motion is untouched.

Optionally, mark one element with data-confetti-react and it will scale and skew slightly as the pointer sweeps past, then settle back on an elastic ease. The demo puts it on the heading. Leave it off and nothing else changes.

Options

Attribute Values Default Description
data-pool-size Integer, minimum 8 48 Number of particle elements created once and recycled round-robin
data-spawn-distance Pixels, minimum 8 22 Distance between interpolated particles along the gesture path
data-fall-distance Pixels, minimum 80 360 Base gravity distance before particles finish fading
data-duration Seconds, minimum 0.35 1.15 Base lifetime of each particle
data-accent-color CSS colour #ff2d7a First colour used when data-palette is not set
data-palette Comma-separated CSS colours accent + #2563eb, #fff500, #141412 Full particle palette, cycled per particle
data-confetti-react marker, on a descendant optional Elements that kick as the pointer sweeps past

While particles are emitting, the container also carries an is-active class, which the demo uses to tint its prompt line. Styling it is optional.

Interaction and Cleanup

  • Mouse movement emits continuously while the pointer is over the stage.
  • Touch and pen input emits while dragging; pointer capture keeps the drag stable at the stage edge.
  • Pointer down emits a small deliberate burst, so taps have a useful response.
  • Enter or Space emits a burst when a focusable effect container has keyboard focus.
  • All listeners are stored for removal. Delayed calls and particle timelines are killed, generated nodes are removed, and active classes are cleared when the GSAP context is reverted.

Accessibility

  • Reduced motion: the page content is unaffected, while the JavaScript gsap.matchMedia() reduced-motion branch creates no particle pool and runs no particle animation.
  • Keyboard: Add tabindex="0" and a descriptive aria-label to let keyboard users focus the stage and trigger a centered burst with Enter or Space.
  • Decorative output: Generated particles use aria-hidden="true" and never replace meaningful content.
  • No JavaScript: the panel and everything in it stay fully visible and usable; the script only adds particles on top and pre-hides nothing.
  • Touch scrolling: The demo uses touch-action: pan-y on the stage, so a finger dragged up or down still scrolls the page and only sideways sweeps and taps release confetti. Reserve touch-action: none for a stage that genuinely owns the whole screen, so decorative interaction never blocks navigation.

Dependencies

Required:

  • GSAP 3.12+ (GSAP 3.15.0 is used in the demo)

GSAP plugins: None

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

Custom Cursor Effects for WordPress

Build a custom cursor follower for WordPress using GSAP. No plugins needed, just clean JavaScript with smooth magnetic and trail effects.

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.