Glow & border effects

# Brok UI: Border Glow (`border-glow`)

A rotating colored border animation. `variant="glow"` (default) is a soft, wide glow; `variant="shine"` is a thin, bright shine streak that sweeps crisply around the border.

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

## Install

```bash
php artisan ui:add border-glow
```

## Usage

```blade
<x-ui.border-glow>
    <div class="w-64 p-6">
        <h3 class="text-base font-semibold text-foreground">Border Glow</h3>
        <p class="mt-1 text-sm text-muted-foreground">A soft rotating glow sweeps around the border.</p>
    </div>
</x-ui.border-glow>
```

## Props

- `variant` (glow|shine, default `glow`) — glow is a soft, wide rotating glow; shine is a thin, bright sweeping streak.
- `color` (mixed|null, default `null`) — Colour token: primary, secondary, foreground, or accent; defaults to primary for glow and foreground for shine.
- `duration` (mixed|null, default `null`) — Seconds for one full rotation; defaults to 6 for glow and 8 for shine.
- `radius` (mixed|null, default `null`) — Corner radius CSS value; defaults to var(--radius-lg).
- `borderWidth` (mixed|null, default `null`) — Border thickness CSS value; defaults to 2px for glow and 1px for shine.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Wrapping a card, panel, or call-to-action in a rotating colored border to draw attention without changing its background.
- Wanting either a soft wide glow (variant="glow") or a thin, crisp sweeping shine (variant="shine") around the same wrapped content.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- Needing a static, non-animated border; use ordinary border utilities on the child instead.
- Highlighting a cursor-following light on a card's surface; use spotlight instead.

## Anti-patterns

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

## Rules

- Use the `<brok:border-glow>` tag (or `<x-ui.border-glow>`) 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/border-glow
- Registry JSON (files, props, contract): https://brokui.dev/r/open/border-glow.json

@props([
    // glow (default): a soft, wide rotating colored glow. shine: a thin,
    // bright shine streak that sweeps crisply around the border.
    'variant' => 'glow',
    'color' => null,
    'duration' => null,
    'radius' => null,
    'borderWidth' => null,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);

    // A conic-gradient layer spins inside an overflow-hidden rounded box; an
    // inner bg-card panel covers the centre so only a glowing/shining border
    // remains. Animation is motion-safe only, so reduced-motion users get a
    // static (still themed) border. `glow` and `shine` share this outline —
    // they only differ in the conic-gradient arc width and defaults — so
    // `shine` is a variant prop here rather than a separate component
    // (see docs/adr/002-compositions-and-variants.md).
    $variant = in_array($variant, ['glow', 'shine'], true) ? $variant : 'glow';

    $defaults = $variant === 'shine'
        ? ['color' => 'foreground', 'duration' => 8, 'borderWidth' => '1px']
        : ['color' => 'primary', 'duration' => 6, 'borderWidth' => '2px'];

    $color = $color ?? $defaults['color'];
    $duration = $duration ?? $defaults['duration'];
    $borderWidth = $borderWidth ?? $defaults['borderWidth'];

    $glowColor = match ($color) {
        'primary' => 'text-primary',
        'secondary' => 'text-secondary',
        'foreground' => 'text-foreground',
        'accent' => 'text-accent',
        default => 'text-primary',
    };

    $dur = is_numeric($duration) ? $duration.'s' : $duration;
    $r = $radius ?? 'var(--radius-lg)';

    // Fixed, fully-static class strings per branch — a variable spliced into
    // an arbitrary animate-[…] class is invisible to the Tailwind JIT scanner.
    $animateClass = $variant === 'shine'
        ? 'motion-safe:animate-[ui-shine-border-spin_var(--dur)_linear_infinite]'
        : 'motion-safe:animate-[ui-border-glow-spin_var(--dur)_linear_infinite]';
    $gradientClass = $variant === 'shine'
        ? '[background:conic-gradient(from_0deg,transparent_0%,currentColor_6%,transparent_12%,transparent_100%)]'
        : '[background:conic-gradient(from_0deg,transparent_0%,currentColor_25%,transparent_50%,currentColor_75%,transparent_100%)]';
    $wrapperClass = 'relative inline-block overflow-hidden rounded-[var(--r)]'.($variant === 'shine' ? ' bg-border' : '').' p-[var(--bw)]';

    // shine-border composes this as <x-ui.border-glow variant="shine"
    // data-slot="shine-border">; the browser keeps only the first of two
    // identical attributes, so read the override and print exactly one.
    $slotName = (string) ($attributes->get('data-slot') ?: 'border-glow');
@endphp

<div
    data-slot="{{ $slotName }}"
    data-variant="{{ $variant }}"
    style="--dur:{{ $dur }}; --bw:{{ $borderWidth }}; --r:{{ $r }};"
    {{ $attributes->except('data-slot')->merge(['class' => $wrapperClass]) }}
>
    <div
        aria-hidden="true"
        class="absolute inset-[-100%] {{ $glowColor }} {{ $animateClass }} {{ $gradientClass }}"
    ></div>
    <div class="relative rounded-[calc(var(--r)-var(--bw))] bg-card">{{ $slot }}</div>
</div>