Backgrounds

Magnetic particle ring

A drifting field of tiny specks that the pointer catches and reorganises into a rippling ring, releasing them again as it moves on.

Field telemetry

260 specks holding a 90px band

Move the pointer to drag the ring across the field.

Using Magnetic particle ring

A drifting field of tiny specks that the pointer catches and reorganises into a rippling ring, releasing them again as it moves on.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: count, ringRadius, magnetRadius, wave, autoDrift, accent

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

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.

1947Cursor fluid trailBackgroundsA dark field where dragging the pointer smears colored fluid across it, and the smear keeps curling and thinning out after the pointer stops.

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.

1700Gradient slat spotlightBackgroundsVertical slats hide a colour gradient until a soft spotlight tracks the pointer across them and lights each slat it touches.

1718Liquid metal driftBackgroundsRim lit blobs of heavy liquid form, stretch and merge across a black field, bulging toward the pointer like iron filings toward a magnet.

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.