# Circuit — Animated Background for React

> PCB-style data flow: orthogonal right-angle copper traces route between solder-pad nodes while glowing data packets stream along them, flaring each pad they reach into a hot bloom over a faint idle glow. Cool electric-aqua default, colors knob. Canvas 2D with a cached etch layer, seeded, offscreen-paused, reduced-motion-safe.

- Page: https://crucibleui.com/components/backgrounds/circuit
- Category: [backgrounds](https://crucibleui.com/backgrounds)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: canvas

## Install

```bash
npx shadcn@latest add @crucible/circuit
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/circuit`.

Backgrounds render `absolute inset-0 -z-10`. Their parent must be a stacking context — wrap in `relative isolate` and put your content in a `relative z-10` child, or the background disappears behind an opaque ancestor.

## Props (`CircuitProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors?` | `[string, string]` | `["#3ee6d0", "#2c6a73"]` | Two tones `[pulse, trace]`. `pulse` is the bright accent that glowing data packets and freshly-lit solder pads burn with; `trace` is the muted idle color of the etched routes and dormant pads. Defaults to an electric-aqua pulse over cool teal-steel traces on cool near-black. Pass a warm pair for a copper board, or two whites for a mono schematic. |
| `speed?` | `number` | `1` | Data-flow speed multiplier. 1 = default, 2 = twice as fast. |
| `intensity?` | `number` | `1` | Overall glow / brightness of pulses and lit pads, 0–2. |
| `density?` | `number` | `1` | Trace + pad density (higher packs the board tighter). Clamped 0.5–1.8. |
| `dpr?` | `number` | `2` | devicePixelRatio ceiling. Clamped 1–2. |
| `paused?` | `boolean` | `false` | Freeze the board at a static, softly-lit frame (no travelling pulses). |

Also accepts: `React.ComponentPropsWithoutRef<"div">`.

## Usage example

`DemoScene` is a site-only preview harness, not part of the component — replace it with your own layout.

```tsx
import { Circuit } from "@/components/crucible/circuit";
import { DemoScene } from "@/components/registry/demo-scene";

export default function CircuitDemo() {
  return (
    <DemoScene
      background={<Circuit />}
      headline="Wired for what's next"
      subhead="Data pulses race the traces of a living circuit board behind your content."
    />
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. Pauses offscreen and on hidden tabs, clamps device pixel ratio, and tears down its GL/canvas context on unmount.