Glow & border effects

# Brok UI: Glow (`glow`)

A decorative, positioned radial-gradient backdrop — the soft brand bloom behind heroes and CTAs, with top/center/bottom/above/below placements.

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

## Install

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

## Usage

```blade
<div class="relative isolate flex min-h-64 w-full max-w-md items-center justify-center overflow-hidden rounded-xl border border-border bg-background p-10">
    <x-ui.glow variant="center" />
    <p class="relative z-10 text-center text-foreground">Brand glow backdrop</p>
</div>
```

## Props

- `variant` (top|center|bottom|above|below, default `top`) — Placement: top, center, bottom, above, or below.
- `color` (string, default `ring`) — Token colour: primary, accent, foreground, ring, or chart-1 through chart-5.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Adding a soft, positioned radial-gradient bloom behind a hero, CTA, or section header for brand ambiance.
- Needing top, center, bottom, above, or below placement options within a relative isolate parent.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- Wanting an animated or rotating glow around a border; use border-glow instead.
- Wanting a cursor-following highlight on a 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:glow>` tag (or `<x-ui.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/glow
- Registry JSON (files, props, contract): https://brokui.dev/r/open/glow.json

@props([
    'variant' => 'top',
    // primary | accent | foreground | ring | chart-1 … chart-5. `ring` by
    // default: in the neutral palette `primary` is near black and a black
    // bloom reads as a shadow, not a glow.
    'color' => 'ring',
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    // Glow — a decorative, positioned radial-gradient backdrop (the soft brand
    // bloom behind heroes and CTAs). Drop it inside a `relative isolate` parent;
    // it paints two layered radial gradients with `currentColor` (themed by a
    // `text-*` token, never a raw colour) so it adapts to light and dark. Purely
    // ornamental: aria-hidden and pointer-events-none.
    $colorClass = match ($color) {
        'primary' => 'text-primary',
        'accent' => 'text-accent',
        'foreground' => 'text-foreground',
        'ring' => 'text-ring',
        'chart-1' => 'text-chart-1',
        'chart-2' => 'text-chart-2',
        'chart-3' => 'text-chart-3',
        'chart-4' => 'text-chart-4',
        'chart-5' => 'text-chart-5',
        default => 'text-ring',
    };

    // Anchor + offset per position. Horizontal centring is mirror-symmetric, so
    // `left-1/2` stays correct under dir="rtl".
    $position = match ($variant) {
        'top' => 'left-1/2 top-0 -translate-x-1/2 -translate-y-1/3',
        'center' => 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
        'bottom' => 'left-1/2 bottom-0 -translate-x-1/2 translate-y-1/3',
        'above' => 'left-1/2 top-0 -translate-x-1/2 -translate-y-2/3',
        'below' => 'left-1/2 bottom-0 -translate-x-1/2 translate-y-2/3',
        default => 'left-1/2 top-0 -translate-x-1/2 -translate-y-1/3',
    };
@endphp

<div
    data-slot="glow"
    data-variant="{{ $variant }}"
    aria-hidden="true"
    {{ $attributes->merge(['class' => "pointer-events-none absolute z-0 {$position} {$colorClass}"]) }}
>
    {{-- Wide, soft brand bloom --}}
    <div
        class="h-[40rem] w-[70rem] max-w-[180vw] opacity-30 blur-2xl"
        style="background: radial-gradient(ellipse at center, currentColor 0%, transparent 60%);"
    ></div>
    {{-- Tighter, brighter core for depth --}}
    <div
        class="absolute left-1/2 top-1/2 h-[22rem] w-[42rem] max-w-[140vw] -translate-x-1/2 -translate-y-1/2 opacity-40 blur-3xl"
        style="background: radial-gradient(ellipse at center, currentColor 0%, transparent 55%);"
    ></div>
</div>