Varun Chaudhary

Ferrofluid

Component

Ferrofluid previewPreview
About

Interactive canvas ferrofluid: a glossy magnetic puddle that grows spikes toward your cursor, pulses on click / Enter, and idles with an orbiting magnet. Reads shadcn theme tokens (background, foreground, chart colors) so it adapts to light and dark mode.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ferrofluid to your project and fits it to your theme.

Code

How Ferrofluid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Ferrofluid } from "@/components/ui/ferrofluid";

const settings = {
  spikes: 28,
  size: 0.2,
  strength: 1,
  autoplay: true,
  pulseOnClick: true,
  title: "Ferrofluid",
  hint: "Move your cursor near it · click to pulse",
};

export default function FerrofluidDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="relative flex h-[640px] w-full flex-col items-center justify-start overflow-hidden bg-background pt-12">
      <div className="absolute inset-0">
        <Ferrofluid
          spikes={s.spikes}
          size={s.size}
          strength={s.strength}
          autoplay={s.autoplay}
          pulseOnClick={s.pulseOnClick}
        />
      </div>
      <div className="pointer-events-none relative z-10 px-4 text-center">
        <h1 className="bg-gradient-to-b from-foreground to-foreground/40 bg-clip-text text-5xl font-semibold tracking-tight text-transparent md:text-7xl">
          {s.title}
        </h1>
        <p className="mt-3 text-sm text-muted-foreground">{s.hint}</p>
      </div>
    </div>
  );
}

More by Varun Chaudhary

View all
  • Services Stack

    Services Stack

    124
  • Social Preview

    Social Preview