Patterns

# Brok UI: Noise (`noise`)

A static film-grain overlay rendered from an SVG fractal-noise turbulence, with configurable opacity and blend mode.

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

## Install

```bash
php artisan ui:add noise
```

## Usage

```blade
<div class="relative h-40 w-full max-w-sm overflow-hidden rounded-lg bg-primary">
    <x-ui.noise />
</div>
```

## Props

- `opacity` (string, default `0.15`) — Opacity of the grain layer.
- `blend` (string, default `overlay`) — CSS mix-blend-mode used to composite the grain (overlay, multiply or soft-light).

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Adding a subtle film-grain texture over a flat colour or gradient surface to break up banding.
- Wanting a static, zero-JS texture layer that costs nothing to animate because it never animates.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- Wanting a repeating dot or line motif instead of grain; 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:noise>` tag (or `<x-ui.noise>`) 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/noise
- Registry JSON (files, props, contract): https://brokui.dev/r/open/noise.json

@props([
    'opacity' => '0.15',
    'blend' => 'overlay',
])

@php
    // A static film-grain overlay. The grain is an inline SVG that paints an
    // feTurbulence fractalNoise across a full-bleed rect — no raster asset and no
    // animation (it is decorative: aria-hidden, pointer-events-none). The SVG is
    // URL-encoded so it lives safely inside a data: URI. `mix-blend-mode` lets the
    // grain interact with whatever sits beneath it; opacity keeps it subtle.
    $blend = in_array($blend, ['overlay', 'multiply', 'soft-light'], true) ? $blend : 'overlay';

    $svg = '<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">'
        .'<filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter>'
        .'<rect width="100%" height="100%" filter="url(#n)"/></svg>';

    $dataUri = 'data:image/svg+xml,'.rawurlencode($svg);
@endphp

<div
    data-slot="noise"
    aria-hidden="true"
    style="background-image: url(&quot;{{ $dataUri }}&quot;); mix-blend-mode: {{ $blend }}; opacity: {{ $opacity }};"
    {{ $attributes->merge(['class' => 'pointer-events-none absolute inset-0']) }}
></div>