Skip to content
Fieldbook
Menu
Sign in
EN

Backgrounds

Drifting particle field

Drifting particle field: A slowly tumbling cloud of small round points, each drifting on its own path, with the whole cloud leaning away from the pointer.

Using Drifting particle field

Drifting particle field uses the full page preview frame with a dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
colorcolor#9BE15DNo additional limit in the metadata.
countnumber200From 40 to 600; step 20
spreadnumber10From 4 to 20; step 1
speednumber0.1From 0.02 to 0.5; step 0.02
baseSizenumber100From 30 to 240; step 10
parallaxbooleantrueNo additional limit in the metadata.
Which frameworks are available for Drifting particle field?

Drifting particle field is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Drifting particle field depend on?

The React metadata lists these npm dependencies beyond React: clsx.

What accessibility details are visible in Drifting particle field?

The React source for Drifting particle field includes: attributes and handlers (aria-hidden). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Drifting particle field handle reduced motion?

Drifting particle field reads the motion preference in its React source through matchMedia(prefers-reduced-motion). Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Particle Field component, a Fieldbook UI component in Backgrounds.
2000Particle FieldBackgroundsA canvas field of soft floating dots that drift on their own and lean toward the pointer with a gentle magnetic pull, easing back once it moves away.
Still of the Drifting glass shards component, a Fieldbook UI component in Backgrounds.
1686Drifting glass shardsBackgroundsA slow current of translucent slivers that flash as they tumble, scattering from the cursor and gathering back when the pointer holds still.
Still of the Magnetic particle ring component, a Fieldbook UI component in Backgrounds.
1720Magnetic particle ringBackgroundsA drifting field of tiny specks that the pointer catches and reorganises into a rippling ring, releasing them again as it moves on.
Still of the Particle drift component, a Fieldbook UI component in Backgrounds.
1536Particle driftBackgroundsA canvas field of slow drifting particles that wrap at the edges, and link with faint lines and ease away where the pointer passes.
Still of the Aurora veil component, a Fieldbook UI component in Backgrounds.
1526Aurora veilBackgroundsA full-bleed background of three drifting ribbons of light that add up where they cross, over a dark ground, with a caption layer that stays readable.
Still of the Contour Field component, a Fieldbook UI component in Backgrounds.
2130Contour FieldBackgroundsA full-bleed animated backdrop of nested elevation contours that swell and merge, with the pointer raising a soft bump in the terrain.