# Bar Ripple

> Bars ripple in a travelling wave under a headline figure, for revenue, usage and growth sections.

- Collection: Illustrations
- Tier: pro
- Docs: https://geturui.com/docs/bar-ripple
- Install: `npx shadcn@latest add @geturui-pro/bar-ripple`
- Dependencies: motion

## Variants

### Revenue

Gradient revenue bars ripple under a headline figure with the latest bar lit up.

Install: `npx shadcn@latest add @geturui-pro/bar-ripple-revenue`

```tsx
import { BarRippleRevenue } from "@/components/illustrations/bar-ripple/revenue";

export function RevenueIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <BarRippleRevenue value="$128k" delta="+9.1%" className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| value | `string` | "$48.2k" | Headline figure shown above the bars. |
| delta | `string` | "+12.4%" | Change label shown next to the figure. |
| speed | `number` | 1 | Speed multiplier for the loop (three seconds per wave at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Usage

Stacked usage bars roll beneath a plan limit while a meter tracks the share used.

Install: `npx shadcn@latest add @geturui-pro/bar-ripple-usage`

```tsx
import { BarRippleUsage } from "@/components/illustrations/bar-ripple/usage";

export function UsageIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <BarRippleUsage used={0.64} className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| used | `number` | 0.78 | Share of the plan used, 0 to 1; drives the meter and its colour. |
| speed | `number` | 1 | Speed multiplier for the loop (three seconds per wave at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

## Accessibility

- Rendered as a single SVG with role="img" and an aria-label you can override with `title`; nothing inside is focusable.
- Under prefers-reduced-motion the scene renders one meaningful still frame: no loops, no timers.
- Colours come from the GetUrUI tokens only, so the scene follows light and dark themes automatically.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.