Components / Backgrounds / Magnetic Field
Magnetic Field
Iron filings on a surface, aligning to a magnet under the cursor. Pointing every filing at the pointer gives a starburst; a bar magnet is a dipole, B ∝ (3(m·r̂)r̂ − m)/r³, which has two lobes and the loops between them that everyone recognises from the school experiment. Filings only rotate — and since a filing has no north end, its angle is a director, eased modulo π.
Usage
import MagneticField from '@/components/magnetic-field'
<MagneticField cell={22} tilt={0} color="#e8e4dc" />Installation
npx shadcn@latest add https://morphiq.prathampatel.design/r/magnetic-field.jsonModel
B ∝ (3(m·r̂)r̂ − m) / r³a dipole: twice as strong along its axis as across it at the same distance
Props
| Property | Type | Default | Description |
|---|---|---|---|
cell | number | 22 | Filing spacing, px. |
length | number | 11 | Filing length, px. |
thickness | number | 1.6 | Filing stroke width, px. |
moment | number | 1 | Dipole strength. The gripped patch grows as its cube root, as a stronger magnet's would. |
tilt | number | 0 | Dipole axis, in radians. 0 lies along x. |
falloff | number | 2.2 | How fast alignment gives way to the resting angle with distance. |
rest | number | 0 | Angle a filing holds when the magnet is far away, in radians. |
smoothing | number | 0.22 | Share of its remaining turn a filing closes per 60 fps frame, 0..1. Applied in real elapsed time, so the feel is the same at any refresh rate. |
depth | number | 10 | How far under the paper the magnet sits, px. Keeps the field finite under the cursor. |
color | string | '#e8e4dc' | Filing colour. |
background | string | 'transparent' | Background behind the filings. |
children | ReactNode | — | Rendered above the filings as real content. A control inside that takes keyboard focus draws the magnet to it. |