Node Weave

Hollow knots drift across a 2D canvas on the page's own background, threaded together by hairlines whenever they come close; every sixth knot is a solid hub in the primary colour with a breathing ring, and its threads take on that colour. Colours come from the active theme, so the weave is ink on paper in light mode and follows the palette in dark mode. It fills its positioned parent, pauses when off screen and renders a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add node-weave

Manual

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

Usage

import { NodeWeave } from "@/components/ui/node-weave";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <NodeWeave />
      <div className="relative z-10 p-8">
        <h1>Content over the background</h1>
      </div>
    </div>
  );
}

Props