# Caustic Pool

> WebGL view down into a tiled swimming pool. Caustics come from the curvature of the moving water itself, split into color at their edges, so pointer ripples and dropped stones focus rings of light on the mosaic. Sunlit by day, lamplit at night. Pauses off-screen and holds a still frame for reduced motion.

- Slug: `caustic-pool`
- Category: [Backgrounds](https://www.assembli.design/category/backgrounds.md)
- Type: block
- Tags: webgl, shader, water, caustics, pool, pointer
- npm dependencies: motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/caustic-pool
- Page: https://www.assembli.design/components/caustic-pool

![Caustic Pool preview](https://www.assembli.design/thumbnails/caustic-pool-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tile` | `number` | `40` | Edge of one floor tile, in CSS px. |
| `lane` | `boolean` | `true` | Paint a dark lane stripe across the floor. |
| `depth` | `number` | `1` | Water depth: deeper water focuses the light into tighter, brighter caustics. |
| `mode` | `"auto" \| "light" \| "dark"` | `"auto"` | Follow the page theme (sunlit by day, lamplit at night), or force one. |
| `speed` | `number` | `1` | How fast the water moves. 0 holds it still. |
| `interactive` | `boolean` | `true` | Moving the pointer trails ripples and a press drops a stone. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/caustic-pool/caustic-pool.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/caustic-pool
```

Registry item JSON: https://www.assembli.design/r/caustic-pool.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.