# Circuit Traces

> A circuit board around a clear centre: traces fan out from every side, and pulses of light race along them at scattered times.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-23 · Live demo: https://motionkitui.com/components/circuit-traces

## When to use it

Hardware, AI chips, infrastructure, developer tools and security heroes: anything about power, compute or connections.

## How it works

The board is laid out once, by rule rather than by hand: traces leave each side of the central chip in evenly spaced lanes, run straight, bend 45° away from the middle and run on to the edge. Inner lanes bend later and shift less, so neighbours fan out without ever crossing. A hash removes a few lanes and scatters the timing. Each pulse is the same path drawn again with pathLength set to 1 and a short dash, so animating the dash offset slides the light along any shape. A blur filter makes it glow, and the pad flashes as it leaves.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/circuit-traces` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | `"#5FAEB4"` | Colour of the pulses and pads. |
| `direction` | `"out" \| "in"` | `"out"` | Pulses run out from the centre or in towards it. |
| `duration` | `number` | `3.2` | Average seconds per pulse. |
| `chip` | `boolean` | `true` | A faint outline round the clear centre. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The board is hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, the traces and pads show without any pulses.
- **Colour contrast: Pass.** The centre is kept clear of traces, so ivory text there measures 16.5:1.