Skip to content
Fieldbook
Menu
Sign in
EN

Backgrounds

Particle Field

Particle Field: A 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.

Using Particle Field

Particle Field uses the wide preview frame with a light/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
densitynumber80From 20 to 200; step 10
dotColorcolor#38BDF8No additional limit in the metadata.
driftSpeednumber1From 0.2 to 3; step 0.2
pullStrengthnumber40From 0 to 100; step 10
Which frameworks are available for Particle Field?

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 Particle Field depend on?

The React metadata lists no additional npm dependencies beyond React.

What accessibility details are visible in Particle Field?

The React source for 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 Particle Field handle reduced motion?

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 Drifting particle field component, a Fieldbook UI component in Backgrounds.
1952Drifting particle fieldBackgroundsA slowly tumbling cloud of small round points, each drifting on its own path, with the whole cloud leaning away from the pointer.
Still of the Bulging dot field component, a Fieldbook UI component in Backgrounds.
1671Bulging dot fieldBackgroundsA fine grid of dots that swells outward under the cursor like fabric pushed from behind, springing back with one soft overshoot the moment the pointer moves on.
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.