Patterns

# Brok UI: Circuit Board (`circuit-board`)

A decorative animated PCB background layer — right-angle traces and nodes themed via a semantic token, with bright pulses travelling along the traces. Fills a relative parent. Reduced-motion users get a static circuit board.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add circuit-board
```

## Usage

```blade
<div class="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
    <div class="relative h-56 overflow-hidden rounded-lg border border-border bg-card">
        <x-ui.circuit-board color="foreground" />
    </div>
    <div class="relative h-56 overflow-hidden rounded-lg bg-foreground">
        <x-ui.circuit-board color="ring" density="lg" :speed="2.5" />
    </div>
</div>
```

## Props

- `color` (string, default `primary`) — Semantic colour token driving currentColor (primary, accent, foreground, muted, ring, chart-1, chart-2).
- `speed` (int, default `3`) — Seconds per pulse loop, or a raw CSS time string.
- `glow` (bool, default `true`) — Adds a drop-shadow glow to the pulses and pads when true.
- `density` (string, default `md`) — sm, md or lg — how many of the routed traces animate with a pulse.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Adding a tech/developer-product background motif (PCB traces and nodes) behind a hero or section.
- Wanting a decorative background whose colour tracks a single semantic token via currentColor.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- Wanting a plain repeating pattern with no circuitry motif; use dot-pattern or grid-pattern instead.

## Anti-patterns

- Heavy effects in forms or task-dense workflows
- Motion that interferes with reading or focus

## Rules

- Use the `<brok:circuit-board>` tag (or `<x-ui.circuit-board>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/circuit-board
- Registry JSON (files, props, contract): https://brokui.dev/r/open/circuit-board.json

@props([
    'color' => 'primary',
    'speed' => 3,
    'glow' => true,
    'density' => 'md',
])

@php
    // Decorative animated PCB layer. Colour is driven entirely by `currentColor`,
    // fed from a `text-*` semantic token, so the whole board re-themes for
    // light/dark and inherited foreground. All motion is gated behind
    // `motion-safe:` — reduced-motion users keep the full static board (traces +
    // nodes) and simply lose the travelling pulses.
    $colorClass = match ($color) {
        'primary' => 'text-primary',
        'accent' => 'text-accent',
        'foreground' => 'text-foreground',
        'muted' => 'text-muted-foreground',
        'ring' => 'text-ring',
        'chart-1' => 'text-chart-1',
        'chart-2' => 'text-chart-2',
        default => 'text-primary',
    };

    // `speed`: accept a number (append `s`) or a raw CSS time string.
    $speed = is_numeric($speed) ? $speed.'s' : $speed;

    // `density` picks how many of the trace presets render. Every preset is both
    // a static (dim) trace and a candidate pulse path; lower density just draws
    // fewer of them. Traces are authored as right-angle polylines on a 400×300
    // board.
    $traces = [
        // Left bank → centre chip (45° elbows, like a routed PCB).
        ['d' => 'M0 60 H70 L90 80 H150 V110 H170', 'delay' => '0s'],
        ['d' => 'M0 110 H60 L80 130 H170', 'delay' => '0.7s'],
        ['d' => 'M0 160 H50 L70 180 H120 V150 H170', 'delay' => '1.4s'],
        ['d' => 'M30 300 V250 L50 230 H120 V170 H170', 'delay' => '2.1s'],
        // Right bank → centre chip.
        ['d' => 'M400 50 H320 L300 70 H260 V110 H230', 'delay' => '0.4s'],
        ['d' => 'M400 130 H330 L310 150 H230', 'delay' => '1.1s'],
        ['d' => 'M400 200 H340 L320 180 H280 V170 H230', 'delay' => '1.8s'],
        ['d' => 'M370 300 V260 L350 240 H280 V190 H230', 'delay' => '2.5s'],
        // Top and bottom feeds.
        ['d' => 'M120 0 V30 L140 50 V110 H170', 'delay' => '0.9s'],
        ['d' => 'M280 0 V40 L260 60 V110 H230', 'delay' => '1.6s'],
        ['d' => 'M180 300 V250 L200 230 V190', 'delay' => '2.3s'],
        ['d' => 'M220 300 V260 H240 V190', 'delay' => '0.2s'],
        // Bus lines along the edges.
        ['d' => 'M0 240 H40 L60 260 H140 V300', 'delay' => '1.3s'],
        ['d' => 'M400 260 H360 L340 280 H260 V300', 'delay' => '2.8s'],
    ];

    // Pads: a ring at every trace end that meets the board edge or the chip,
    // and solder dots at the elbows.
    $nodesSolid = [
        ['cx' => 90, 'cy' => 80], ['cx' => 80, 'cy' => 130], ['cx' => 70, 'cy' => 180], ['cx' => 50, 'cy' => 230],
        ['cx' => 300, 'cy' => 70], ['cx' => 310, 'cy' => 150], ['cx' => 320, 'cy' => 180], ['cx' => 350, 'cy' => 240],
        ['cx' => 140, 'cy' => 50], ['cx' => 260, 'cy' => 60], ['cx' => 200, 'cy' => 230], ['cx' => 60, 'cy' => 260], ['cx' => 340, 'cy' => 280],
    ];
    $nodesHollow = [
        ['cx' => 150, 'cy' => 110], ['cx' => 120, 'cy' => 170], ['cx' => 260, 'cy' => 110], ['cx' => 280, 'cy' => 170],
        ['cx' => 120, 'cy' => 30], ['cx' => 280, 'cy' => 40], ['cx' => 30, 'cy' => 250], ['cx' => 370, 'cy' => 260],
        ['cx' => 140, 'cy' => 260], ['cx' => 260, 'cy' => 280],
    ];

    $count = match ($density) {
        'sm' => 5,
        'lg' => 14,
        default => 9, // md
    };
    $activeTraces = array_slice($traces, 0, $count);

    $glowStyle = $glow ? 'filter: drop-shadow(0 0 4px currentColor);' : '';
    $gridId = substr(md5(spl_object_id($attributes).$density), 0, 6);
@endphp

<div
    data-slot="circuit-board"
    aria-hidden="true"
    style="--speed:{{ $speed }};"
    {{ $attributes->merge(['class' => 'pointer-events-none absolute inset-0 overflow-hidden '.$colorClass]) }}
>
    <svg
        class="h-full w-full"
        preserveAspectRatio="xMidYMid slice"
        viewBox="0 0 400 300"
        fill="none"
    >
        {{-- Static layer: a faint pad grid, dim traces, a chip and its pins.
             This is the full reduced-motion view. --}}
        <defs>
            <pattern id="ui-circuit-grid-{{ $gridId }}" width="20" height="20" patternUnits="userSpaceOnUse">
                <circle cx="10" cy="10" r="0.8" fill="currentColor" />
            </pattern>
        </defs>
        <rect width="400" height="300" fill="url(#ui-circuit-grid-{{ $gridId }})" opacity="0.18" />

        <g stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.3">
            @foreach ($traces as $trace)
                <path d="{{ $trace['d'] }}" />
            @endforeach
        </g>

        {{-- The chip: a body with pins on all four sides. --}}
        <g stroke="currentColor" stroke-width="1.5" opacity="0.5">
            <rect x="170" y="110" width="60" height="80" rx="4" fill="none" />
            <rect x="182" y="122" width="36" height="56" rx="2" fill="currentColor" opacity="0.15" />
            @foreach ([110, 130, 150, 170] as $py)
                <line x1="164" y1="{{ $py }}" x2="170" y2="{{ $py }}" /><line x1="230" y1="{{ $py }}" x2="236" y2="{{ $py }}" />
            @endforeach
            @foreach ([180, 200, 220] as $px)
                <line x1="{{ $px }}" y1="104" x2="{{ $px }}" y2="110" /><line x1="{{ $px }}" y1="190" x2="{{ $px }}" y2="196" />
            @endforeach
        </g>

        <g fill="currentColor" opacity="0.45" style="{{ $glowStyle }}">
            @foreach ($nodesSolid as $node)
                <circle cx="{{ $node['cx'] }}" cy="{{ $node['cy'] }}" r="3" />
            @endforeach
        </g>

        <g fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4">
            @foreach ($nodesHollow as $node)
                <circle cx="{{ $node['cx'] }}" cy="{{ $node['cy'] }}" r="3.5" />
            @endforeach
        </g>

        {{-- Pulse layer: bright short dashes travelling along select traces. Each
             path uses pathLength="100" so a single dashoffset keyframe works for
             any real length; staggered animation-delay desynchronises them. --}}
        <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="{{ $glowStyle }}">
            @foreach ($activeTraces as $trace)
                <path
                    d="{{ $trace['d'] }}"
                    pathLength="100"
                    stroke-dasharray="8 92"
                    stroke-dashoffset="108"
                    class="motion-safe:animate-[ui-circuit-pulse_var(--speed)_linear_infinite]"
                    style="animation-delay:{{ $trace['delay'] }};"
                />
            @endforeach
        </g>
    </svg>
</div>