Circuit Background for React

Q: How do I make it calmer or busier?

density is the share of loose buses drawn, from 0 (the chips and their buses alone) to 1 (every bus); count and speed set the traffic.

Q: Can I change the colours?

Yes: traceColor and pulseColor take any CSS colour, and --circuit-pad-color sets the pads and vias. By default the board is green-grey, with copper pads and brighter teal signals on a dark theme.

A printed circuit board behind your content: chips fan out into buses of parallel traces with 45° jogs, and short signals race along them. For React with Base UI, when a developer tool, hardware or infrastructure page should look wired into the network.

A printed circuit board seen from above: chips fan their pads out into buses of parallel traces that run straight, jog at 45° and end on vias, over a fainter layer of traces inside the board, while short signals race along the straight runs and light the via they reach. In light mode it's pale green-grey copper on paper; in dark mode a deep solder mask with copper pads and teal signals. The board is a routed table drawn once, at render, as masked layers that fade toward the edges, and each signal is a small streak moved by CSS keyframes, so nothing repaints and no script runs.

Use it behind developer-tool, hardware or infrastructure heroes. For lights racing along a full grid, use Laser Grid; for lights threading a seeded maze, Labyrinth; for a lattice without motion, Grid Pattern.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Circuit } from "@/components/ui/circuit";

Circuit is a container: give it a size and put your content inside. The board sits behind the content and the box clips it.

<Circuit className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Infrastructure, wired in</h1>
</Circuit>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<Circuit className="fixed inset-0 -z-10" />

Demos

Quiet board

A calmer board in a card: density={0.25} draws only a quarter of the loose buses (the chips and their buses always stay), count={6} sends fewer signals and speed={0.7} slows them down.

PreviewCode

Green PCB

The classic look: a card that stays dark in both themes, on a green solder mask (bg-[oklch(0.2_0.04_158)]), with traceColor in a brighter green, gold signals through pulseColor and every bus drawn (density={0.9}). The pads keep their copper on a dark theme; set --circuit-pad-color to change them.

PreviewCode

Accessibility

The board is decorative: it's hidden from screen readers and lets every click through to your content. With reduced motion the signals stop where they are, a still board with a few lit traces. Nothing flashes: each signal is a few pixels wide, fades in and out, and its via glows up over a few tenths of a second. The traces show at under half your trace colour and the inner layer fainter still, so text on top keeps its contrast; keep that text in your foreground colour.

FAQ

How is the board made?

It's routed once, offline, the way a PCB is: buses of parallel traces leave the chips' pads or start at vias, run straight, jog at 45° and end on a via as soon as they would touch another trace. The result ships with the component as a compact table, and the page draws it as one repeating tile 1152×768 wide, with a turned copy of it as the layer inside the board, so it doesn't visibly repeat.

What does seed change?

Each whole number shifts the board under the box, keeps a different share of its loose buses and sends the signals along other traces. The same seed always draws the same board, on the server and in the browser.

How do I make it calmer or busier?

density is the share of loose buses drawn, from 0 (the chips and their buses alone) to 1 (every bus); count and speed set the traffic.

Why does a small card show fewer signals?

The signals ride the board's own straight runs, on its middle 1152×768. count is about how many ride that area; a smaller box shows the ones that fall inside it.

Can I change the colours?

Yes: traceColor and pulseColor take any CSS colour, and --circuit-pad-color sets the pads and vias. By default the board is green-grey, with copper pads and brighter teal signals on a dark theme.

Does it run any script?

No: the board is a few still masked layers drawn once, and the signals are CSS animations on a few dozen small elements that only change translate and opacity. Offscreen, it isn't painted.