Arch Current

A canvas of dotted Bézier paths that sweep in from both edges and gather at a low point near the bottom of the frame, with beads of ink travelling along them. Click anywhere to send a shockwave through the beads. Guides use the theme's muted tone and beads its primary ink over the theme background, so it follows light, dark and the palette picker. 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 arch-current

Manual

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

Usage

import { ArchCurrent } from "@/components/ui/arch-current";

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

Props