A procedurally routed circuit board with 45-degree traces, pads and chip packages. Pulses of light travel along the traces and flash the pad they arrive at.
Compute that runs where your users are
npx shadcn@latest add https://hyperblur.dev/r/bg-circuit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-circuit.tsx.
import { BgCircuit } from "@/components/hyperblur/bg-circuit"
<div className="relative h-96"><BgCircuit><h1>Edge compute</h1></BgCircuit></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#1d2636" | Color of traces, pads and chips. Hex color. |
| accent | string | "#2f7bff" | Color of the traveling pulses. Hex color. |
| background | string | "#05070b" | Board color. Hex color. |
| pitch | number | 22 | Routing grid size in pixels. |
| pulses | number | 1 | Number of pulses relative to the number of traces. |
| chips | boolean | true | Places chip packages with traces leaving their pins. |
| speed | number | 1 | Pulse speed. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |