Iron Filings

Backgrounds 10

About

Thousands of iron filings that line up along a real bar-magnet field. The cursor carries the magnet; click to drop more and watch their field lines merge. Canvas 2D, pauses off-screen, respects reduced motion, keyboard: Enter drops a magnet, Escape clears.

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

Code

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

Usage.tsx

import { IronFilings } from "@/components/ui/iron-filings"

export default function IronFilingsDemo() {
  return (
    <IronFilings className="flex h-full min-h-[560px] w-full items-center justify-center bg-background text-foreground">
      <div className="pointer-events-none relative select-none px-6 text-center">
        <div aria-hidden className="absolute inset-[-30%] -z-10 bg-[radial-gradient(closest-side,var(--color-background)_45%,transparent)]" />
        <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">Field study</p>
        <h1 className="text-5xl font-semibold tracking-tight sm:text-7xl">
          Some ideas
          <br />
          <span className="italic">pull.</span>
        </h1>
        <p className="mx-auto mt-5 max-w-md text-sm text-muted-foreground sm:text-base">
          Move to carry the magnet. Click to drop one and watch the field lines meet.
        </p>
      </div>
    </IronFilings>
  )
}