Circuit Background

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface CircuitBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
7  animated?: boolean;
8  opacity?: number;
9}
10 
11export function CircuitBackground({
12  children,
13  className,
14  animated = true,
15  opacity = 0.15,
16  ...props
17}: CircuitBackgroundProps) {
18  return (
19    <div className={cn("relative overflow-hidden", className)} {...props}>
20      {/* Circuit SVG pattern */}
21      <svg
22        aria-hidden="true"
23        className={cn(
24          "pointer-events-none absolute inset-0 h-full w-full",
25          animated && "animate-circuit"
26        )}
27        style={{ opacity }}
28        xmlns="http://www.w3.org/2000/svg"
29      >
30        <defs>
31          <pattern
32            id="circuit-pattern"
33            x="0"
34            y="0"
35            width="100"
36            height="100"
37            patternUnits="userSpaceOnUse"
38          >
39            {/* Horizontal lines */}
40            <path
41              d="M0 50 H30 M70 50 H100"
42              stroke="currentColor"
43              strokeWidth="1"
44              fill="none"
45              className="text-primary"
46            />
47            {/* Vertical lines */}
48            <path
49              d="M50 0 V30 M50 70 V100"
50              stroke="currentColor"
51              strokeWidth="1"
52              fill="none"
53              className="text-primary"
54            />
55            {/* Center node */}
56            <circle
57              cx="50"
58              cy="50"
59              r="4"
60              fill="none"
61              stroke="currentColor"
62              strokeWidth="1"
63              className="text-primary"
64            />
65            {/* Corner nodes */}
66            <circle
67              cx="0"
68              cy="0"
69              r="2"
70              fill="currentColor"
71              className="text-primary"
72            />
73            <circle
74              cx="100"
75              cy="0"
76              r="2"
77              fill="currentColor"
78              className="text-primary"
79            />
80            <circle
81              cx="0"
82              cy="100"
83              r="2"
84              fill="currentColor"
85              className="text-primary"
86            />
87            <circle
88              cx="100"
89              cy="100"
90              r="2"
91              fill="currentColor"
92              className="text-primary"
93            />
94            {/* Diagonal connectors */}
95            <path
96              d="M30 50 L50 30 M50 70 L70 50"
97// … truncated