Back to Gallery
Canvas Particle Flow
£5 Standard License Unlimited projects
An ember-toned Canvas 2D flow field that bends into a dense wake around pointer, touch, and keyboard attraction before dispersing organically.
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
- 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
- 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
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
