Flow Particles

Moves thousands of particles along an invisible current, leaving fading trails. Positions live in a float texture that a GPU pass moves along curl noise, which is divergence-free, so the particles swirl instead of bunching. Each frame they are drawn as points into a trail texture that fades, shown in two tones on the page's ground. The pointer drags the current with it. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or a colour-renderable float texture, or without JavaScript, a still wisp of lines stands in. Fills its positioned parent.

Flow.

move your cursor

Live, from the library itself: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript with its libs

11.4 kB raw

2.9 kB raw of its own, 1.6 kB gzip. The rest is the runtime, the canvas helper and the GL core, loaded once for every effect on the page.

CSS 5.2 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 56 · Firefox 51 · Safari 15; needs webgl2. Elsewhere: without WebGL2 or a colour-renderable float texture (EXT_color_buffer_float), a still wisp of curved lines.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/flow-particles

src/pages/index.astro

<section class="relative min-h-[60vh]">
  <FlowParticles color="var(--primary)" />
  <h1 class="relative">Particles on a current</h1>
</section>

Without a key the registry answers 401 with an upgrade message. Related free primitives: particles.

Props

Prop	Type	Default	Description
`color`	`string`	`'oklch(0.66 0.2 292)'`	Trail colour; any CSS colour, theme tokens included.
`core`	`string`	`color lifted 50 % toward white`	The colour where trails are densest.
`count`	`number`	`14000`	Particles for a 1440 × 900 box; a card or a hero gets the same density (rounded up to a square texture, 16² to 512²). Read when the field is created.
`scale`	`number`	`2.2`	Current scale: eddies across the short side.
`speed`	`number`	`1`	Flow speed multiplier.
`trail`	`number`	`2.6`	How fast trails fade, per second. Lower is longer.
`drag`	`number`	`1`	How strongly the pointer drags the current; 0 turns it off.

Reduced motion

No loop: three seconds of flow are simulated at once and the trails drawn as a still; the pointer does not drag it.

With `ClientRouter`

Bound through the shared runtime: loop, observers and pointer listener are released before the swap and the WebGL context is lost on purpose after it; five round trips leave one context. Under transition:persist the canvas keeps its context and starts again on the next page.

Why it is built this way

GPGPU: every particle is a texel (xy, age, seed); one fragment pass moves them all, and the point pass reads its position by gl_VertexID. There is no vertex buffer and no CPU work per particle.
Full float for positions: half float rounds a slow step to zero past x = 0.5 and the flow turns into vertical lines on the right half. Trails stay half float.
Curl of a noise potential: the velocity has no divergence, so particles circulate in eddies instead of draining into sinks.
Trails at half the drawing buffer, faded by e^(−trail·dt) before the points are added: the fade is frame-rate independent and the target is a quarter of the pixels.
Respawn from the particle's own seed and the time, not its position: positions are correlated, so hashing them clumped the newborns into dotted patches.

Replaces: Particles / flow field (React Bits Pro) · GPGPU particle backgrounds. See the migration table.

Particles

Backgrounds

A field of drifting dots that part around the cursor, on a canvas that draws only while on screen in a visible tab.

every browseralwayspointer

Fluid Field

Pro

Draws smoke that follows the cursor.

every browserpointeralways

Hyperspeed.

hold to jump

Hyperspeed

Pro

Draws a jump to light speed: streaks of light rush out of a vanishing point, longer and brighter toward the edge, in one colour with a hot head in a second tone.

every browseralwayspointerclick

Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown