016
AI ready

Canvas Particle Flow

£5

An ember-toned Canvas 2D flow field that bends into a dense wake around pointer, touch, and keyboard attraction before dispersing organically.

advanced
5 more details
canvasflow-fieldparticle-poolingpointer-attractiontouch-interaction
Canvas Particle Flow - 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 Canvas Particle Flow demo in new tab

About this effect

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.

What's included

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

Perfect for

5 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

How it works

1 section

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.

Difficulty Advanced
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 Canvas Particle Flow 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 markup to your <body>:

Code snippet omitted: it ships with the download.

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 </body> tag:

Code snippet omitted: it ships with the download.

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.

How It Works

The effect keeps a fixed object pool and recycles particles in place instead of creating new objects during animation. Each GSAP ticker update combines low-cost trigonometric flow forces with an eight-point interaction wake. Fast movement gives that wake more energy, so particles compress, brighten, enlarge, and inherit some pointer direction.

When the pointer leaves or a touch ends, attraction eases down and a restrained outward force blooms the cluster back into the ambient flow. Canvas resolution is capped at 2x device pixel ratio, while compact screens use lower particle defaults.

Touch and Keyboard

  • Mouse movement attracts immediately; a rapid sweep reveals the strongest wake.
  • Touch attraction begins on press and follows the drag, then disperses on release.
  • Focus the field and use the arrow keys to steer the attractor. Include tabindex="0" on non-interactive containers so this control remains available.

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.15.0 Core
  • A browser with Canvas 2D support

No GSAP plugins or smooth-scroll library are used.

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

Related articles

GSAP background animation: a drifting gradient backdrop

Build an ambient animated background with GSAP: soft colour fields that drift behind your content, pause off screen and respect reduced motion. Complete code.

GSAP performance: why animations get janky and how to fix it

A GSAP performance guide: keep tweens on the compositor, batch ScrollTriggers, sync smooth scroll to one clock, and stop pinned sections jumping.

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.