Moiré Screens
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/chladni-plateChladni 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.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
finish
ChladniFinish
Default
"aluminium"Finish in light mode.
darkFinish
ChladniFinish
Default
"anodised"Finish in dark mode.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme, or force one.
hold
number
Default
7Seconds each tone holds before the plate moves to the next. 0 holds the first one.
grain
number
Default
2.6Size of one grain of sand, in CSS px.
density
number
Default
1Size of the plate's pattern: below 1 is coarser, above 1 finer.
speed
number
Default
1Time scale. 0 holds everything still.
interactive
boolean
Default
trueThe pointer scatters sand, and a press changes the tone.
| 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. |
