Magnetic Field Lines React component
A field of iron filings that line up around a magnet you move: hundreds of short strokes swing round to follow a real dipole field, curving into the classic loops, glowing warm on the north side and cool on the south, and a click flips the poles.
About the Magnetic Field Lines component
Magnetic Field Lines is a background of iron filings that respond to a magnet — your pointer. Hundreds of short strokes swing round to follow a real magnetic field, curving into the loops you'd see on a school bench, warm on the north side, cool on the south, and fading out with distance.
The magnet turns to point the way you move it, the filings swing rather than snap, and a click flips the poles so the whole field turns around. With no pointer, the magnet sits in the middle and slowly rotates.
When to use it
Use it for physics, energy and hardware brands, developer tools with a 'pull' or 'attraction' story, science education sites, or as a calm but alive hero background.
It's busy edge to edge, so set content in one corner or on a solid panel.
Installation
Add the Magnetic Field Lines component to your project with the shadcn CLI. It lands in components/magnetic-field-lines.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/magnetic-field-linesOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<MagneticFieldLines /> accepts 6 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| spacing Distance between filings, in px. | number | 22 |
| length Length of each filing, in px. | number | 13 |
| colors Colours for the north and south sides of the field. | [string, string] | ["#ff5a5f", "#4d8dff"] |
| dim Colour of filings far from the magnet. | string | "#3a3d44" |
| background Background behind the filings. | string | "#0b0c0f" |
| reach How far the magnet's pull reaches, as a share of the shorter side. | number | 0.9 |
- spacing
Distance between filings, in px.
numberDefault: 22 - length
Length of each filing, in px.
numberDefault: 13 - colors
Colours for the north and south sides of the field.
[string, string]Default: ["#ff5a5f", "#4d8dff"] - dim
Colour of filings far from the magnet.
stringDefault: "#3a3d44" - background
Background behind the filings.
stringDefault: "#0b0c0f" - reach
How far the magnet's pull reaches, as a share of the shorter side.
numberDefault: 0.9
npm dependencies
Installed for you by the shadcn CLI.
Magnetic Field Lines FAQ
- Is it a real magnetic field?
- It's the field of a 2D magnetic dipole, the same maths as a bar magnet seen from above, so the filings form the familiar loops between the poles.
- Can I change the colours?
- colors sets the north and south sides, dim the filings far from the magnet and background the colour behind.
- How dense is the grid?
- spacing is the gap between filings and length their length, in pixels. reach sets how far the field carries.
- What about phones and reduced motion?
- A finger moves the magnet and a tap flips it. With reduced motion turned on the filings jump to the field without swinging.
