Back to Gallery 016

Canvas Particle Flow

£5

Organic flow-field particle system with attractor physics. Particles drift like floating embers before being pulled toward the cursor on canvas.

canvasflow-fieldphysicsorganic-motion advanced

About This Effect

A premium Canvas 2D particle system that moves away from mathematical spirals toward organic, flow-field driven motion. Particles behave like floating dust or embers, gently swaying with simulated noise before being smoothly pulled toward a high-inertia attractor (the mouse). The rendering uses soft radial gradients and alpha blending to create a misty, deep-space aesthetic.

What's Included

  • Organic flow-field motion using layered trigonometric noise
  • Sophisticated attractor physics with high-inertia tracking
  • Misty, soft-focus rendering with radial gradients
  • Subtle particle life cycles with smooth fade-in/out
  • DPR-aware high-resolution canvas rendering
  • Minimalist, high-contrast dark aesthetic
  • Interactive mouse tracking with smooth 'return to center' logic
  • Performance optimized for 60fps even with high particle counts

Perfect For

  • High-end agency hero sections
  • Luxury brand landing pages
  • Minimalist portfolio backgrounds
  • Premium SaaS marketing sites
  • Ambient background for dark-themed applications

How It Works

Particles are updated every frame using a combination of a simulated flow field (trig noise) and a physics-based attractor. The attractor smoothly interpolates toward the mouse position, creating a 'floaty' feel. Particles have individual life cycles and are re-seeded with new properties when they 'die'. Rendering uses source-over for trails and screen blend mode for particle highlights to create a vibrant but soft look.

Difficulty Advanced
Includes HTML + JS + CSS source, documentation, lifetime updates
£5

Premium Effect

Canvas Particle Flow

Purchase this effect to unlock the full source code and implementation.

Browse Free Effects

Your Cart

Your cart is empty

Browse Effects