Drift Lines

A canvas of particles tracing a 3D simplex-noise current, each leaving a fading stroke and parting gently around the pointer. The strokes are five inks on the theme's primary hue laid over the theme background, so it reads as pen work on paper in light mode and as light trails in dark mode, following the palette picker. It fills its positioned parent, pauses when off screen and renders a settled frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add drift-lines

Manual

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

Usage

import { DriftLines } from "@/components/ui/drift-lines";

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

Props