A circuit board around a clear centre: traces fan out from every side, and pulses of light race along them at scattered times.
Powered up
Customize
Usage
import { CircuitTraces } from "@/components/motionkit/circuit-traces";
<CircuitTraces className="h-[32rem] rounded-3xl">
<h1>Your hero</h1>
</CircuitTraces>Motion
The exact curves this component runs, plotted with Motion's own maths.
Pulse
Runs on its own
Hardware, AI chips, infrastructure, developer tools and security heroes: anything about power, compute or connections.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/circuit-traces. It saves the file to components/motionkit and installs its dependencies.
Circuit Traces is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the traces and pads show without any pulses.
Contour Lines
Topographic lines that slowly shift like terrain, with a vignette for your content.
Constellation
Drifting stars join into constellations as they pass close, and reach out to the cursor with lines of light.
Radar Sweep
A radar scope with range rings and a turning beam, where contacts flare as the beam passes over them, then fade.
Powered up
Customize
Usage
import { CircuitTraces } from "@/components/motionkit/circuit-traces";
<CircuitTraces className="h-[32rem] rounded-3xl">
<h1>Your hero</h1>
</CircuitTraces>Motion
The exact curves this component runs, plotted with Motion's own maths.
Pulse
Runs on its own
The live preview is free to explore. Plus unlocks the source for Circuit Traces and every other premium component.