Ferrofluid
ProInstallation
ProRequires a Planes Pro license.
npx shadcn add @useplanes/ferrofluid
Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.
Unlock with Planes Pro
$99 once · 99 Pro components · lifetime updates.
<div className="relative h-[560px] bg-black">
<Ferrofluid strength={0.7} />
<h1 className="absolute inset-x-0 top-1/4 text-center text-white">
Your headline
</h1>
</div>Use cases
Hero background
The pool stays low, so a headline sits on near-black above it and the visitor discovers the magnet by moving.
Product reveal
Pulse on click to bristle the surface when a CTA is pressed.
404 or waiting page
Something to play with while nothing else is happening.
