016
AI ready

Canvas Particle Flow

£7
or the whole Vault, £99
Open in new tab

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

Updated

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.

Canvas Particle Flow - GSAP animation effect preview

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, from the latest scan. 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.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

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

In your downloadThe working code for this step, in index.html.

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:

In your downloadThe working code for this step, in index.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.

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.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

Related articles

Aurora Gradient Field demo, from this article

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. Stagger Grid Reveal demo, from this article

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.

£7