Blur Vignette

# Brok UI: Blur Vignette (`blur-vignette`)

A frame that keeps wrapped content sharp in the centre and progressively backdrop-blurs only the edges (Apple Vision Pro style), with configurable blur, inset, fade length and radius.

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

## Install

```bash
php artisan ui:add blur-vignette
```

## Usage

```blade
<x-ui.blur-vignette blur="14px" transition="48px" class="w-full max-w-sm rounded-xl">
    <div class="grid h-56 grid-cols-6 gap-px bg-border">
        @foreach (range(1, 30) as $cell)
            <div class="flex items-center justify-center bg-card text-xs font-medium text-muted-foreground">{{ $cell }}</div>
        @endforeach
    </div>
</x-ui.blur-vignette>
```

## Props

- `blur` (string, default `20px`) — Maximum backdrop-blur strength applied at the very edge.
- `inset` (string, default `0px`) — Distance from the frame's edge where the blur effect starts.
- `transition` (string, default `60px`) — Length of the fade from sharp center to full edge blur.
- `radius` (string, default `0.75rem`) — Corner radius of the frame and its blur mask.

## Use when

- Use when image or video selection, preview, or media-based comparison is part of the task.
- Softening the edges of a photo, video, or hero image so it blends into the surrounding surface, Apple Vision Pro style.
- Wanting the center of the content to stay perfectly sharp while only the frame's edges progressively blur.

## Avoid when

- Do not require media-heavy interaction when a simpler text or list solution would be faster.
- The whole image should be uniformly blurred; apply a plain backdrop-blur or filter instead, or use scroll-fade when content only needs to fade out at a scrolling edge.
- The content must always render pixel-sharp end to end, such as a document preview; skip the vignette.

## Anti-patterns

- Requiring media-heavy interaction when text is faster

## Rules

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

@props([
    'blur' => '20px',
    'inset' => '0px',
    'transition' => '60px',
    'radius' => '0.75rem',
])

@php
    // Blur Vignette — an Apple-Vision-Pro-style frame that keeps the centre of
    // its content sharp and progressively backdrop-blurs only the rim. The
    // overlay sits ABOVE the content (so its backdrop-filter blurs what is
    // behind it) and is masked with four edge-band gradients (union) so the
    // blur is painted at the edges and fades to nothing toward the centre.
    //
    // - `blur`       : edge blur radius (any CSS length).
    // - `inset`      : pull the vignette frame inward from the bounds.
    // - `transition` : how far the blur fades from each edge toward the centre.
    // - `radius`     : corner radius (kept in sync with the wrapped content).
    //
    // The mask uses the `black`/`transparent` keywords (an alpha mask, not a
    // theme colour) so it never hardcodes a palette value. The overlay is
    // decorative: aria-hidden + pointer-events-none.
@endphp

<div
    data-slot="blur-vignette"
    style="--bv-blur: {{ $blur }}; --bv-inset: {{ $inset }}; --bv-len: {{ $transition }}; --bv-radius: {{ $radius }};"
    {{ $attributes->merge(['class' => 'relative overflow-hidden']) }}
>
    <div class="relative">{{ $slot }}</div>
    <div data-slot="blur-vignette-overlay" aria-hidden="true" class="pointer-events-none absolute inset-0"></div>
</div>