Circuit
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.
canvaspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/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 all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.