Circuit Background

A premium HTML5 Canvas-based background animation. Technical circuit lines grow, branch off, and fade, while pointer hover and clicks trigger smooth, natural water ripples that respond to current theme modes.

Installation

CLI

npx @modus-ui/cli add circuit-background

Manual

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

Usage

import { CircuitBackground } from "@/components/ui/circuit-background";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative min-h-screen">
      <CircuitBackground />
      <main className="relative z-10">{children}</main>
    </div>
  );
}

Props