Wire Ledger

Points drift and bounce inside the frame and are joined by fine ink hairlines whenever they come within reach of each other, drawn from the theme's foreground and primary on the page ground. It fills its positioned parent, re-reads the theme when the mode or palette changes, pauses when off screen and stays still when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add wire-ledger

Manual

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

Usage

import { WireLedger } from "@/components/ui/wire-ledger";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <WireLedger />
    </div>
  );
}

Props