Effects / Canvas 2D
Flow fields
Thousands of fine lines following invisible currents, building up like hair or wind.
Prompt to build it
Build a flow field of glowing magenta trails on near-black. Move ~800 particles along angles from layered noise, draw short line segments each frame, and fade the canvas with a translucent fill. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.
Tested code
One self-contained HTML file with no libraries: the same code that runs above. Your AI gets it from Flow's get_effect tool.
Show the code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flow fields | Flow effect</title>
<!--
Flow effect: Flow fields (https://flow.donta.io/effects/flow-fields)
Self-contained: no libraries. Copy the .fx-stage element, the CSS and the
script into your project and size .fx-stage however you like.
-->
<style>
:root { --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --body: ui-sans-serif, system-ui, sans-serif; }
html, body { margin: 0; min-height: 100%; background: #0e0e10; display: grid; place-items: center; }
.fx-stage { width: min(100vw, 960px); }
/* Stage that every effect fills. Container units (cqw/cqmin) size the art. */
.fx-stage {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 16px;
container-type: size;
background: #111;
isolation: isolate;
}
.fx-fill {
position: absolute;
inset: 0;
}
.fx-fallback {
position: absolute;
inset: 0;
}
.fx-center {
display: grid;
place-items: center;
}
@media (prefers-reduced-motion: reduce) {
.fx-stage *, .fx-stage *::before, .fx-stage *::after { animation-play-state: paused !important; }
}
</style>
</head>
<body>
<div class="fx-stage"><canvas class="fx-fill" aria-hidden="true" style="width:100%;height:100%;display:block"></canvas></div>
<script>
function flowLoop(el, frame, opts) {
opts = opts || {};
if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
for (let i = 0; i < (opts.stillFrames || 1); i++) frame(2 + i / 60);
return function () {};
}
let raf = 0, onScreen = true, last = 0;
const start = performance.now(), gap = opts.fps ? 1000 / opts.fps : 0;
const io = new IntersectionObserver(function (e) { onScreen = e[0].isIntersecting; });
io.observe(el);
function tick(now) {
raf = requestAnimationFrame(tick);
if (!onScreen || document.hidden || (gap && now - last < gap)) return;
last = now;
frame((now - start) / 1000);
}
raf = requestAnimationFrame(tick);
return function () { cancelAnimationFrame(raf); io.disconnect(); };
}
function flowCanvas(canvas, o) {
const ctx = canvas.getContext("2d");
const dpr = Math.min(devicePixelRatio || 1, 2);
function size() {
const w = o.fixed ? o.fixed : Math.max(1, Math.round(canvas.clientWidth * dpr));
const h = o.fixed ? o.fixed : Math.max(1, Math.round(canvas.clientHeight * dpr));
if (canvas.width !== w || canvas.height !== h) {
canvas.width = w; canvas.height = h;
if (o.init) o.init(ctx, w, h);
}
}
if (o.fixed) { canvas.style.imageRendering = "pixelated"; canvas.style.objectFit = "cover"; }
size();
new ResizeObserver(size).observe(canvas);
return flowLoop(canvas, function (t) { o.draw(ctx, t, canvas.width, canvas.height); }, o);
}
/** Canvas 2D effect: flow. Self-contained; no imports. */
let flow = [];
function initFlow(ctx , w , h ) {
ctx.fillStyle = "#07040c";
ctx.fillRect(0, 0, w, h);
flow = Array.from({ length: w < 500 ? 450 : 900 }, () => ({
x: Math.random() * w,
y: Math.random() * h,
life: Math.random() * 200,
}));
}
function drawFlow(ctx , t , w , h ) {
if (!flow.length) initFlow(ctx, w, h);
ctx.fillStyle = "rgba(7, 4, 12, 0.06)";
ctx.fillRect(0, 0, w, h);
const k = 1 / Math.min(w, h);
ctx.strokeStyle = "rgba(226, 92, 220, 0.55)";
ctx.lineWidth = Math.max(1, Math.min(w, h) / 400);
ctx.beginPath();
for (const p of flow) {
const x = p.x * k, y = p.y * k;
const a = (Math.sin(x * 3.1 + t * 0.15) + Math.cos(y * 3.7 - t * 0.1) + Math.sin((x + y) * 1.9 + t * 0.07)) * Math.PI * 0.75;
const nx = p.x + Math.cos(a) * 1.6;
const ny = p.y + Math.sin(a) * 1.6;
ctx.moveTo(p.x, p.y);
ctx.lineTo(nx, ny);
p.x = nx;
p.y = ny;
p.life -= 1;
if (p.life < 0 || p.x < 0 || p.x > w || p.y < 0 || p.y > h) {
p.x = Math.random() * w;
p.y = Math.random() * h;
p.life = 120 + Math.random() * 200;
}
}
ctx.stroke();
}
flowCanvas(document.querySelector(".fx-stage canvas"), { draw: drawFlow, init: initFlow, stillFrames: 200 });
</script>
</body>
</html>
How it works
A noise function gives each point an angle; particles move along those angles and leave faint trails that slowly fade.
Guardrails
- Reset particles that leave the canvas so density stays even.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.