Chladni Plate
chladni-plateVisualizersThe nodal figure sand draws on a driven plate.
$ pnpm dlx shadcn@latest add @pluginui/core-chladni-plateInstall
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-chladni-plate.jsonUsage
Connect the documented props to your application or host.
import { ChladniPlate } from "@/components/ui/chladni-plate"
<ChladniPlate frequencies={heldNotes} variant="particles" height={260} />About Chladni Plate
Drive a metal plate at a frequency and sand collects along the nodal lines, where the plate is not moving. This draws that figure for any set of frequencies, either as particles settling onto the nodes over a few seconds or as a standing wave rendered directly as a field on a square or circular plate. The display is parameter-driven and does not touch audio: feed it held notes, an analyser's peak bin or a slider. All physics lives in the chladni-formulas library, whose pure functions have unit tests for their numerics. This component only renders the result.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| frequencies | number[] | [440] | The frequencies driving the plate, in Hz. Each maps to a mode pair and the patterns superpose. |
| modes | { m: number; n: number } | — | Mode numbers directly, bypassing the frequency mapping. Wins over frequencies when set. |
| variant | "particles" | "field" | "particles" | Sand finding the nodes over time, or the standing wave drawn as a heatmap. |
| plateShape | "square" | "circular" | "square" | Circular masks the pattern to the inscribed disc and outlines it. |
| particleCount | number | 2000 | How many particles to simulate. Only read by the particle variant. |
| vibrationStrength | number | 0.02 | Random-walk scale. Higher settles faster but blurs the lines. |
| resolution | number | 80 | Field sampling grid per axis. Only read by the field variant. |
| a / b | number | 1 / 1 | Amplitude coefficients of the mode and its transpose. |
| color | string | — | Particle / nodal-line colour. Defaults to the --uikit-accent token. |
| size / height | number | string | "100%" / 260 | The canvas box. The plate is inscribed square and centred inside it. |
| paused | boolean | false | Stop the animation and hold the current pattern. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.