# Bubble Wrap

> A sheet of bubbles that pop. Pure fidget.

Every bubble pops with a squash and a puff, and the sheet can be refilled. For loading waits, empty states, 404 pages and celebrations.

- Family: Originals
- Plan: Free. Free to install, no account.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/bubble-wrap/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui add bubble-wrap
```

It installs to `components/galactrex/bubble-wrap.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { BubbleWrap } from "@/components/galactrex/bubble-wrap";

<BubbleWrap columns={10} rows={3} onComplete={unlock} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `columns, rows` | `number` | `8, 4` | Bubbles across and down. |
| `size` | `number` | `34` | Bubble diameter in px. |
| `onPop` | `(popped: number, total: number) => void` | — | After each pop. |
| `onComplete` | `() => void` | — | When every bubble is popped. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Waiting room.** While a long task runs.
- **Reward.** `onComplete` unlocks something.

## Accessibility

- Each bubble is a toggle button; the group says how many are left.

## Motion

- Squash keyframes and an expanding ring per pop.
- Reduced motion: bubbles empty without the squash.