Circuit Lines Background: React + Tailwind Component

Light pulses flowing along a circuit-board trace diagram — a decorative background with a technical feel.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/circuit-lines-background.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Pulse colorcolor

Pulse countpulseCount

Trace densitydensity

Flow speedspeed

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<CircuitLinesBackground/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/circuit-lines-background.en.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 to pointer-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

Circuit Lines Background