← All effects

Flow Field

BackgroundVanilla JS · zero dependenciesShow the invisible field
-- fps
prefers-reduced-motion detected — animation paused, static frame shown

X-ray · layers

draws the invisible arrows
the travellers themselves
paths linger instead of clearing

Parameters

Field scale2.4
Particles400
Speed1.0×
Trail fade6%
your version · updates as you tinker

How this effect works

Imagine every point on the screen has an invisible arrow pinned to it, each one pointing a slightly different way. Drop a particle anywhere and it simply follows the arrow it happens to be standing on, then the next one, then the next. That is a flow field: the particles have no plan, the field does. Tick Show the field above to make the arrows visible — the particles were obeying them all along.

The arrows come from one line of maths: two sine waves combined into an angle. Nothing is stored, nothing is precomputed — ask the function for any point and it answers with a direction. Field scale zooms this invisible landscape: small values give long lazy rivers, large values give tight turbulence. The trails layer, exactly as in Matrix Rain, is just a translucent wipe instead of a clear — the paths you see are the past refusing to disappear at once.

Production notes: respects prefers-reduced-motion (one static frame) · cost is linear in particle count — 400 is comfortable on phones, 900 is a desktop showpiece · particles that drift off-screen are respawned rather than tracked forever · the copied snippet is self-contained HTML + JS.