# Cursor Confetti Trail > A responsive GSAP confetti trail that turns fast pointer sweeps and touch drags into colourful, directional ribbons of tumbling geometric particles. Canonical: https://gsapvault.com/effects/cursor-confetti-trail Live demo: https://gsapvault.com/demos/cursor-confetti-trail/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | pointer-effects, touch-drag, particle-pooling, velocity, micro-interaction | | Uses Lenis | No | ## Overview 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. ## Features - 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 ## 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add the effect container to your ``:** ```html

Your content

``` `position: relative` and `overflow: hidden` keep the generated particles aligned with and clipped to the container. Keep `touch-action: none` only when the interaction stage should own touch drags; omit it when the container must remain vertically scrollable. **3. Add before the closing `` tag:** ```html ``` ### 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 | `#ff6b35` | First colour used when `data-palette` is not set | | `data-palette` | Comma-separated CSS colours | accent + pink, cyan, lime | 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 hint line. Styling it is optional. ### 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:** A full-stage demo may use `touch-action: none`. For inline page sections, choose an appropriate `touch-action` value so decorative interaction does not unexpectedly block navigation. ### Dependencies **Required:** - GSAP 3.12+ (GSAP 3.14.2 is used in the demo) **GSAP plugins:** None ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Cursor Confetti Trail](https://gsapvault.com/effects/cursor-confetti-trail) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt