# Chladni Plate

> WebGL sand on a metal plate bowed into one tone after another. Grains bounce loose, scatter and gather on the nodal lines of each new mode, every grain drawn with its own shadow. Graphite on bead-blasted aluminium by day, salt on black anodised metal at night, with brass and cobalt finishes. The pointer brushes the sand aside and a click changes the tone.

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

![Chladni Plate preview](https://www.assembli.design/thumbnails/chladni-plate-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `finish` | `ChladniFinish` | `"aluminium"` | Finish in light mode. |
| `darkFinish` | `ChladniFinish` | `"anodised"` | Finish in dark mode. |
| `mode` | `"auto" \| "light" \| "dark"` | `"auto"` | Follow the page theme, or force one. |
| `hold` | `number` | `7` | Seconds each tone holds before the plate moves to the next. 0 holds the first one. |
| `grain` | `number` | `2.6` | Size of one grain of sand, in CSS px. |
| `density` | `number` | `1` | Size of the plate's pattern: below 1 is coarser, above 1 finer. |
| `speed` | `number` | `1` | Time scale. 0 holds everything still. |
| `interactive` | `boolean` | `true` | The pointer scatters sand, and a press changes the tone. |

## 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/chladni-plate/chladni-plate.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/chladni-plate
```

Registry item JSON: https://www.assembli.design/r/chladni-plate.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.