Three distinct systems
Choose floating particles for atmosphere, a connected network for structure, or directional flow for organic energy.
Particles & systems
Particle & Flow Background
Compose quiet drifting light, connected point systems, or an organic directional current. Balance density and response while the canvas adapts to its space.
Living systems
From subtle movement to an expressive field.
Use particle backgrounds behind a product interface, an event identity, a technical diagram, or restrained typography. The engine adapts its draw count to the canvas instead of treating every screen the same.
Optional interaction
Let points move away from or toward a mouse, pen, or touch pointer—or keep the field entirely ambient.
Performance-aware canvas
Pixel density is capped, particle density adapts to area, and animation pauses when the page is not visible.
Three-step workflow
How to use the Particle & Flow studio
- Pick the system
Start with a curated field and switch between floating, network, and flow rendering.
- Balance the motion
Tune count, speed, direction, size, connection distance, color, opacity, and pointer response.
- Export the canvas
Copy the canvas markup and dependency-free script or download a full HTML page that is ready to open.
Questions, answered.
Does the particle background require a library?
No. The exported JavaScript uses the browser Canvas API and includes its own responsive resize and animation logic.
Will a dense field slow down a mobile device?
The engine caps display pixel density and adapts the number of rendered particles to the canvas area and selected mode.
Does pointer interaction work on touchscreens?
Yes. The interaction uses pointer events, so a touch, pen, and mouse can all attract or repel nearby particles.
What happens when reduced motion is enabled?
The engine renders a stable composition instead of continuously advancing the particle simulation.