Gradient Bars

# Brok UI: Gradient Bars (`gradient-bars`)

A decorative equalizer-style row of gradient bars that pulse on a staggered loop, ideal as an animated hero backdrop; renders as a static wave under reduced motion.

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

## Install

```bash
php artisan ui:add gradient-bars
```

## Usage

```blade
<div class="relative mx-auto h-40 w-full max-w-2xl overflow-hidden rounded-lg border bg-card">
    <x-ui.gradient-bars :count="24" color="primary" class="absolute inset-0 opacity-70" />
    <div class="absolute inset-0 flex items-center justify-center">
        <h3 class="text-lg font-semibold text-foreground">Now Playing</h3>
    </div>
</div>
```

## Props

- `count` (int, default `15`) — Number of bars rendered.
- `color` (string, default `primary`) — Bar colour: primary, success, warning, or destructive.
- `height` (string, default `100%`) — CSS height of the bar row.
- `speed` (int, default `2`) — Seconds for one pulse cycle.
- `gap` (string, default `0.25rem`) — CSS gap between bars.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Adding a decorative, animated equalizer-style backdrop behind a hero or audio-themed section.
- Wanting bar count, colour, height, speed, and gap to stay configurable while the wave shape stays intentional even under reduced motion.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- Needing a functional audio visualizer tied to real audio data; this component's bars are decorative and fixed, not driven by input.
- Needing a loading indicator; use bars-loader instead, since this component has no status semantics.

## Anti-patterns

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

## Rules

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

@props([
    'count' => 15,
    'color' => 'primary',
    'height' => '100%',
    'speed' => 2,
    'gap' => '0.25rem',
])

@php
    $count = max(1, (int) $count);

    $colorClass = match ($color) {
        'success' => 'text-success',
        'warning' => 'text-warning',
        'destructive' => 'text-destructive',
        default => 'text-primary',
    };

    // Deterministic static heights so reduced-motion / no-JS renders still look
    // intentional (a gentle wave rather than a flat row). Range ~40%..100%.
    $wave = [0.55, 0.75, 0.9, 1.0, 0.85, 0.6, 0.45, 0.65, 0.85, 1.0, 0.8, 0.6, 0.5, 0.7, 0.95];
@endphp

<div
    data-slot="gradient-bars"
    aria-hidden="true"
    {{ $attributes->merge(['class' => 'flex w-full items-end ' . $colorClass]) }}
    style="height: {{ $height }}; gap: {{ $gap }}; --speed: {{ $speed }}s;"
>
    @for ($i = 0; $i < $count; $i++)
        @php
            $staticScale = $wave[$i % count($wave)];
            $delay = ($i % 5) * 0.15;
        @endphp
        <div
            data-slot="gradient-bars-bar"
            class="h-full min-w-[2px] flex-1 rounded-t-sm [background:linear-gradient(to_top,currentColor,transparent)] motion-safe:animate-[ui-gradient-bars_var(--speed)_ease-in-out_infinite]"
            style="--i: {{ $i }}; transform-origin: bottom; transform: scaleY({{ $staticScale }}); animation-delay: {{ $delay }}s;"
        ></div>
    @endfor
</div>