Flow Field with Particle Trails
Particles following Perlin noise currents with warm amber trails.
What is Flow Field with Particle Trails?
Flow Field with Particle Trails moves 2,500 particles through a vector field generated by 2D simplex noise — Stefan Gustavson's compact implementation, inlined in the file with no external dependency. Each particle samples the noise at its own position to get an angle, then advances along it, so the swarm slowly organises itself into the streamlines of the field. Trails come from compositing rather than from stored history: instead of clearing the canvas, every frame lays a translucent dark wash over the previous one, so older positions fade out over a few hundred milliseconds. Two parameters are exposed — SPEED scales how far a particle travels per frame, NOISE_SCALE controls how tight the swirls are, with small values giving long calm currents and large values giving dense turbulence. The effect is CPU-bound: device pixel ratio is capped at 2, and particle count is a single constant at the top of the file if you need to trade density for frame rate.
Flow Field with Particle Trails is a free Canvas 2D web effect in the TappyPrism library. Particles following Perlin noise currents with warm amber trails. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (flow-field.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Flow Speed, Pattern Scale — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Flow Speed | SPEED | 0.3 – 3 | 1.2 |
| Pattern Scale | NOISE_SCALE | 0.001 – 0.01 | 0.0025 |
How to add Flow Field with Particle Trails to your page
- Download the standalone file flow-field.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/flow-field.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Flow Field with Particle Trails"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'SPEED', value: 1.2 }, '*');
Frequently asked questions
What is Flow Field with Particle Trails?
Flow Field with Particle Trails moves 2,500 particles through a vector field generated by 2D simplex noise — Stefan Gustavson's compact implementation, inlined in the file with no external dependency. Each particle samples the noise at its own position to get an angle, then advances along it, so the swarm slowly organises itself into the streamlines of the field. Trails come from compositing rather than from stored history: instead of clearing the canvas, every frame lays a translucent dark wash over the previous one, so older positions fade out over a few hundred milliseconds. Two parameters are exposed — SPEED scales how far a particle travels per frame, NOISE_SCALE controls how tight the swirls are, with small values giving long calm currents and large values giving dense turbulence. The effect is CPU-bound: device pixel ratio is capped at 2, and particle count is a single constant at the top of the file if you need to trade density for frame rate. Flow Field with Particle Trails is a free Canvas 2D web effect in the TappyPrism library. Particles following Perlin noise currents with warm amber trails. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (flow-field.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Flow Speed, Pattern Scale — adjustable in the browser or at runtime.
How do I add Flow Field with Particle Trails to my website?
Download the standalone file at https://prism.tappypotato.com/fx/flow-field.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/flow-field.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Flow Field with Particle Trails"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'SPEED', value: 1.2 }, '*').