Circuit Lines Background
Light pulses flowing along a circuit-board trace diagram — a decorative background with a technical feel.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
A deterministic algorithm generates circuit-board-style SVG traces (horizontal and vertical polylines with solder-point nodes), and several light pulses flow along those paths via a stroke-dashoffset animation with a soft glow — a good fit as a decorative background for a technical product hero, a dashboard, or a feature section.
npx shadcn@latest add "https://webberui.com/r/circuit-lines-background.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<CircuitLinesBackground />
Installation
npx shadcn@latest add "https://webberui.com/r/circuit-lines-background.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/circuit-lines-background.
Usage
import { CircuitLinesBackground } from "@/components/ui/circuit-lines-background";
<CircuitLinesBackground
color="#22d3ee"
pulseCount={7}
className="rounded-2xl bg-neutral-950"
>
<div className="px-8 py-16 text-center text-neutral-50">
<h2 className="text-3xl font-semibold">Real-time data pipeline</h2>
</div>
</CircuitLinesBackground>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "#22d3ee" | Color of the light pulses and the node highlights |
lineColor | string | "rgba(148, 163, 184, 0.3)" | Color of the underlying traces and nodes; a low-contrast semi-transparent color is recommended |
pulseCount | number | 6 | Number of light pulses flowing along the traces at once |
density | number | 14 | Number of circuit traces — higher makes the circuit denser |
speed | number | 1 | Pulse flow speed multiplier — higher is faster |
children | React.ReactNode | — | Content layered above the circuit background |
className | string | — | Custom className merged into the outer container |
Accessibility
- The background SVG is marked
aria-hidden="true"and set topointer-events-none, so it interferes with neither assistive technology nor mouse interaction - When the user has "reduce motion" enabled at the system level, the pulses stop flowing and become static light segments at fixed positions, preserving the circuit texture
- Both the trace and pulse parameters are generated deterministically from an index seed, so SSR and client output agree and no hydration error occurs
- This is a purely decorative background component; the real content is rendered above the background through
children, so the semantic structure is unaffected