# Canvas Particle Flow > An ember-toned Canvas 2D flow field that bends into a dense wake around pointer, touch, and keyboard attraction before dispersing organically. Canonical: https://gsapvault.com/effects/canvas-particle-flow Live demo: https://gsapvault.com/demos/canvas-particle-flow/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | canvas, flow-field, particle-pooling, pointer-attraction, touch-interaction | | Uses Lenis | No | ## Overview A cinematic Canvas 2D particle effect that turns a warm ember field into a responsive stream around a cyan attractor. Rapid pointer sweeps or touch drags compress nearby particles into a bright wake, while slower movement creates a restrained gravitational pull. When interaction ends, a soft radial release returns every particle to autonomous flow-field drift. ## Features - Layered trigonometric flow-field drift with independent particle depth - Velocity-sensitive pointer and touch attraction with an eight-point wake - Particle scale and brightness responses around the attractor - Warm orange and pink ember rendering with a cyan core glow - Fixed particle pools with in-place recycling and DPR-aware canvas sizing - Responsive particle defaults for desktop and compact screens - Keyboard steering plus static reduced-motion and no-JavaScript compositions - Complete ticker, listener, ResizeObserver, canvas, and instance cleanup ## Use Cases - Immersive agency and studio landing-page backgrounds - Science, technology, and research storytelling interfaces - Music and culture launches with atmospheric interaction - Portfolio covers that need a tactile generative signature - Product reveals with a premium dark-field treatment ## 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 A fixed pool of particles receives small directional forces from a layered trigonometric flow field on every GSAP ticker update. Pointer or touch velocity is recorded into a short wake; nearby particles are pulled toward those points, inherit some travel direction, and increase in scale and brightness as the wake compresses. On exit, attraction decays gradually while a restrained outward impulse blooms the cluster back into autonomous flow, and every listener, observer, ticker callback, and generated canvas is removed by the effect cleanup. ## 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 markup to your ``:** ```html

Sweep or drag to bend the field

``` The script creates and prepends the canvas automatically. Keep the container positioned and give it an explicit height; the included `.particle-field` class already does both. **3. Add before the closing `` tag:** ```html ``` ### Options Set options on any `[data-refined-attractor]` container. | Attribute | Values | Default | Description | |---|---:|---:|---| | `data-particle-count` | `80`–`1200` | `560` desktop / `330` compact | Number of interactive ember particles. | | `data-dust-count` | `0`–`500` | `180` desktop / `90` compact | Number of low-cost ambient particles. | | `data-attraction` | `0.2`–`2.5` | `1` | Multiplier for wake and attractor force. | | `data-flow-speed` | `0.2`–`2.5` | `1` | Multiplier for autonomous field drift. | | `data-accent` | Six-digit hex | `#4deeff` | Attractor core and glow colour. | | `data-ember` | Six-digit hex | `#ff6a37` | Primary particle colour. | | `data-ember-secondary` | Six-digit hex | `#ff3d81` | Secondary particle colour. | Invalid numeric values fall back to the defaults; out-of-range values are clamped. Invalid colours fall back to the palette above. ### Accessibility - `prefers-reduced-motion: reduce` renders one composed static canvas frame and does not attach movement handlers or a ticker callback. - Without JavaScript, the included CSS supplies a layered static ember field. - The generated canvas is `aria-hidden`; give the container a concise accessible label. - A visible focus ring is included for keyboard users. ### Dependencies **Required:** - GSAP 3.14.2 Core - A browser with Canvas 2D support No GSAP plugins or smooth-scroll library are used. ## 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 Canvas Particle Flow](https://gsapvault.com/effects/canvas-particle-flow) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt