Surface study no. 04
A studio for identities that move. We cast brands in liquid metal, then let them settle into something you can hold.
A Canvas 2D field of iron filings that swing along the curved lines between two drifting magnetic poles. The cursor takes over the lead pole, spring physics pull the filings toward it, and a click or tap sends a radial shockwave through the grid; left alone the field pulses on its own. Ink and paper colors, spacing, filing length and weight, contrast, stiffness, pole strength, the second pole, shockwave, pulse interval and speed are all props. The filing count adapts to the device, it pauses offscreen and settles into one still frame for reduced motion.
The import and the props worth knowing about, in one place.
import { MagneticField } from "@/components/beste/component/magnetic-field";
// As a layer behind content
<section className="relative min-h-[40rem]">
<MagneticField className="absolute inset-0" />
<div className="relative">...</div>
</section>
<MagneticField
className="min-h-[32rem]"
inkColor="var(--primary)" // any CSS color, tokens included
spacing={18} // denser grid, in pixels
length={0.8} // longer needles, 0 to 1
secondPole={false} // one pole only: a radial field
pulseInterval={0} // no pulses on its own
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
inkColor | string | — | Color of the filings. Any CSS color, tokens included. |
paperColor | string | — | Color of the surface behind them. |
spacing | number | — | Distance between filings, in CSS pixels. |
length | number | — | Length of each filing, 0 (short ticks) to 1 (long needles). |
weight | number | — | Stroke weight, 0 (hairline) to 1 (heavy). |
contrast | number | — | Difference between faint filings far from the poles and strong ones near them, 0 to 1. |
stiffness | number | — | How quickly filings swing into line with the field, 0 (lazy) to 1 (snappy). |
poleStrength | number | — | How hard the lead pole pulls the filings toward it, 0 to 1. |
secondPole | boolean | — | A second, opposite pole drifting on its own, which curves the field lines between the two. |
shockwave | number | — | Strength of the shockwave a click or tap sends through the grid, 0 to 1. |
pulseInterval | number | — | Seconds between the pulses the field sends on its own while idle; 0 turns them off. |
speed | number | — | Speed of the poles' drift, 1 is the default pace. |
interactive | boolean | — | The lead pole follows the cursor and clicks send shockwaves. |
paused | boolean | — | Freeze the field where it is. |
className | string | — | |
children | ReactNode | — |