Iron Filings

A field of fine filings in alternating ink and accent. It renders a CSS grid of simple <span> elements and uses a single window event listener to calculate the geometric angle (using Math.acos()) from each line to your mouse, applying the rotation via CSS custom properties.

Installation

CLI

npx @modus-ui/cli add iron-filings

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/iron-filings.tsx.
3. Paste the code.

Usage

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

export default function Example() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background">
      <IronFilings
        rows={9}
        columns={9}
        lineColor="hsl(var(--primary))"
        lineWidth="2px"
        lineHeight="40px"
      />
    </div>
  );
}

Props