Get everything for $99, lifetime

Components

Ferrofluid

Pro

Installation

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 · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { Ferrofluid } from "@/components/ui/Ferrofluid";

<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

    Bristle the surface under a CTA as the pointer approaches it.

  • 404 or waiting page

    Something to play with while nothing else is happening.