Showroom · Make-of

How Magnetar was made

A black liquid-metal blob with no geometry at all — every spike you see is one fragment shader answering the question “how far is the surface from here?”

What it demonstrates

That a full 3D object can live in a page with zero meshes, zero models, and zero 3D libraries. The blob is a signed-distance function — a formula that returns the distance to the surface from any point in space — and a raymarcher walks each pixel's ray toward it. The pointer feeds a “magnet direction” into that formula, so the spike field grows and leans toward your cursor the way real ferrofluid follows a magnet. Press and hold, and the piece plays its second act: the field overcharges, the crown stretches and necks, and droplets pinch off to hang trembling along the field axis until you let go — then fall home and merge without a seam. The page also keeps its physics honest: a visible card explains that this is a shaped simulation that evokes the Rosensweig instability, not a magnetics solver.

Techniques, honestly named

• Raymarched signed-distance blob — one WebGL fragment shader on a fullscreen triangle; up to 100 march steps per ray, with a Lipschitz safety factor so the sharp spikes never get skipped over.
• Spikes as a displacement field — the blob is a unit sphere whose radius is displaced by a lattice of sin × sin peaks on the magnet-facing cap, plus one dominant “crown” peak pulled straight toward the magnet. Field strength scales the whole term.
• The pointer is the magnet — the magnet direction eases toward your cursor with inertia and relaxes back to a slow idle orbit when you stop moving; a quick click (or tap of Enter on the focused canvas) fires a decaying pulse envelope, and keeping either held begins the overcharge.
• Overcharge and fission — holding ramps a charge term that stretches the crown into a teardrop and sets the whole field trembling; at full charge five droplets pinch off and perch along the field axis, biggest first, tapering like a pinch-off stream. They are spheres blended into the same distance field with a smooth-minimum, which is why they neck off and re-merge like liquid instead of popping in and out — the same leap an overdriven pool makes for a real magnet.
• Black-chrome shading — near-black base, a tight cold specular, a procedural studio (overhead softbox + violet side sheet) sampled by reflection vector, and a strong fresnel rim so the silhouette reads against the dark stage.
• Software-GPU detection — if the WebGL renderer string reports a software rasteriser, the page switches to throttled still frames at a higher render scale instead of pretending it can hold 60 fps.
• Respectful plumbing — render scale 0.62× with devicePixelRatio capped at 1.5 (a raymarcher's cost is per-pixel); the loop stops when the tab hides or the canvas scrolls away; context loss swaps in a CSS fallback poster and recovery rebuilds the program; prefers-reduced-motion gets a calm still frame.

Recreate it