Magnetic Field Background for React

Magnetic Field draws short iron filings lined up along the field of four poles on a ring, north and south in turn, with field lines traced out of each pole and arcing to its neighbours. The ring is an oval stretched to the box, so a wide banner, a tall phone hero and a card are all filled with curving structure, and the filings are spread evenly, as many per area at any size. Filings are darker where the field is strong, so the poles stand out. The pointer is a fifth pole: move it over the box and every filing turns to follow.

The field stays still until the pointer moves, so it costs nothing at rest; set speed to turn the ring slowly. It suits science, hardware and developer-tool pages. For streaks that ride a flow, use Vortex, which spirals into a calm eye, or Wind; for contour lines with the same textbook feel, Topography. It's a small canvas that redraws only when something changes and draws the field once with reduced motion.

Installation

Usage

import { MagneticField } from "@/components/ui/magnetic-field";

<MagneticField className="min-h-[480px]">
  <h1 className="text-5xl font-semibold">Ship faster</h1>
</MagneticField>

Magnetic Field is a container: give it a size, put your content inside, and the field sits behind it. For a background behind the whole page, pass className="fixed inset-0 -z-10" and no children.

Demos

Filings only

fieldLines={false} leaves only the filings; 3,600 of them per 1440×900 at filingLength={9} give the classic photo of iron filings on paper.

Orbit

speed={1} turns the ring of poles once in about two and a half minutes, so the field slowly reshapes on its own, and polarity="south" makes the pointer a south pole, which the filings point toward.

Accessibility

The canvas is decoration: it's hidden from assistive tech and never takes the pointer, so your content is read and clicked as usual. With reduced motion it draws the field once and ignores the pointer, and the poles hold still whatever speed says. The filings are low contrast, and the darkest ones sit at the poles on the ring, away from the centre, where the fields cancel and the filings are faintest, so a centred headline in text-foreground stays readable. Nothing flashes: the field changes only as fast as the pointer moves.

FAQ

API Reference