Skip to content
Fieldbook
Menu
Sign in
EN

Backgrounds

Particle drift

Particle drift: A canvas field of slow drifting particles that wrap at the edges, and link with faint lines and ease away where the pointer passes.

Using Particle drift

Particle drift uses the wide 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
countnumber200From 40 to 300; step 10
colorcolor#38BDF8No additional limit in the metadata.
connectDistancenumber130From 40 to 200; step 5
Which frameworks are available for Particle drift?

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

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

What accessibility details are visible in Particle drift?

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

Particle drift 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 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 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 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 Gradient slat spotlight component, a Fieldbook UI component in Backgrounds.
1700Gradient slat spotlightBackgroundsVertical slats hide a colour gradient until a soft spotlight tracks the pointer across them and lights each slat it touches.
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 Sweep scope component, a Fieldbook UI component in Backgrounds.
2249Sweep scopeBackgroundsA round scope where rings pulse outward from the middle, spokes cut it into sectors and a lobe of light sweeps around the center.