Skip to the object
Tactile UI

Chladni Plate

A black plate on a shaker, strewn with sand, with a frequency knob. Turn it onto a resonance and the plate sings: the sand walks off the parts that move and gathers on the lines that stand still. Bow it along an edge, lay a finger on it, tap it: it answers where you touch it.

What it is for

A control that answers with a picture: tuning an audio product, a hero that rewards playing it, a loading state that settles into a figure, a signature drawn from a pair of numbers.

Installnpx shadcn add https://tactileui.dev/r/chladni.jsonWith a Pass: how

Controls

The plate rings at each of its modes and the sand draws that mode’s figure; between them it shivers, more the nearer a mode. Page keys on the knob jump to the next resonance the drive can find.

The shaker drives the plate at its centre, which moves only some of its modes. Off, the plate rings down and the sand stays where it lies; a bow along an edge still plays it.

Finish

Auto follows the page: the case, knob, keys and display are drawn from the page’s finish (a printed case on Paper, a lit display on Phosphor); without the kit’s tokens, aluminium on a light page and graphite on a dark one. On a light finish the plate is that finish’s own light metal, porcelain or stock and the sand dark; on a dark one it is anodised with pale sand, lit on Phosphor and Night. Pinned finishes keep the black plate.

The plate’s bevel and the driver cap catch it; the grains’ shadows fall away from it.

Plays the drive and a quieter octave, its loudness following the plate’s energy: it swells as a bow is drawn and dies as the plate rings down. Off by default; never under reduced motion.

This stage only

When the preview first comes into view it turns the knob through three figures by itself, once.

Everything you set here is what the Code and Prompt tabs give you.

Seats open in 11 days. Want one email that morning?

Datasheet

Mechanism
Plate modes, Drive point, Bowed edge, Finger damping, Damped resonance, Plate energy ring down, Sand on nodal lines, Tap arcs, Grain density imagedata, Log scale knob, Lock lamp, Css shimmer, Sleeping loop
Stack
Vanilla ES modules, Canvas 2D, CSS
Needs
Nothing, no dependencies
States
16 documented
Version
0.1.0
Licence
With a Pass

States

  1. StrewnSand evenly over the black plate; the display gives the frequency.
  2. On a resonanceThe display names the mode and its lamp is green; the sand hops off the moving parts and drifts onto the nodal lines, and the figure draws itself in a second or two.
  3. Nearing oneThe lamp is amber; the plate rings, and the sand shivers, more the nearer the knob is to a mode. Landing on it snaps the sand into the figure.
  4. BowedA press at an edge drawn along it is a bow: a stick and horsehair lie beside the edge and a lit mark shows where it touches. Where it touches picks the mode that answers; how fast it goes sets how hard the plate rings.
  5. Ringing downThe bow lifts, or the drive is switched off: the plate's energy falls over about 1.6 s, the sand keeps walking, then rests and the loop sleeps.
  6. FingeredA finger held on the plate damps what moves under it, and a soft shadow shows where. The figure reorganises round it; moving the finger changes which figure wins.
  7. TappedA short press throws the sand near it outward on small arcs, brighter and larger while airborne, and it falls back under whatever energy is left.
  8. PouringAlt-drag, or a Pour stroke, drops a pinch of sand; on a resonance it runs to the lines.
  9. SingingWhile the plate rings a faint shimmer follows the figure: the parts moving up and those moving down alternate. A CSS animation; it stops as the plate rings down.
  10. Drive offThe lamp on the Drive key goes out; the plate rings down and the sand stays where it lies. A bow still plays it.
  11. ToneOptional: a sine at the drive and a quieter octave, following the plate's energy. Off by default.
  12. AluminiumA bead-blasted case, a turned knob, a reflective LCD.
  13. GraphiteA soft-touch case, a dark knob, a vacuum-fluorescent display.
  14. Read-onlyA display of a figure: the knob, keys and plate do nothing.
  15. Off screen or hiddenPaused, and the tone and the shimmer stop.
  16. Reduced motionThe figure appears at once, also for a bow or a finger; no arcs, no ring-down, no shimmer, no tone.

Notes

The knob is a real slider in hertz on a log scale, spoken with the bow, the finger and the figure it rings in; each resonance is a detent and a lock lamp goes amber, then green; arrows fine-tune, Page keys jump to the next resonance. Bow the plate along an edge and it plays where the bow touches, and rings on after; hold a finger on it and the modes that move there give way; tap it and the sand jumps. Drive is a toggle, Damp a toggle, Bow and Strew keys, B bows.

Original. The plate's motion is its modes summed through their resonances (131 modes, every (n, m) to 12 the range holds, a pair ψ± for n ≠ m) on a 96 × 96 grid, computed when the frequency, the drive point or the finger changes; a shaker at the centre moves only the even ones, a bow anywhere on an edge moves nearly all. Q 28. The plate's energy is pumped by the drive and rings down (τ 1.6 s); the sand's kick is E^1.3; 12,000 grains counted into one ImageData a frame at the plate's CSS size. The plate itself is baked once per size.

How the Chladni Plate works

Anatomy

Plate modes, Drive point, Bowed edge, Finger damping, Damped resonance, Plate energy ring down, Sand on nodal lines, Tap arcs, Grain density imagedata, Log scale knob, Lock lamp, Css shimmer, Sleeping loop

Usage notes

A control that answers with a picture: tuning an audio product, a hero that rewards playing it, a loading state that settles into a figure, a signature drawn from a pair of numbers. The knob is a real slider in hertz on a log scale, spoken with the bow, the finger and the figure it rings in; each resonance is a detent and a lock lamp goes amber, then green; arrows fine-tune, Page keys jump to the next resonance. Bow the plate along an edge and it plays where the bow touches, and rings on after; hold a finger on it and the modes that move there give way; tap it and the sand jumps. Drive is a toggle, Damp a toggle, Bow and Strew keys, B bows.

Options

OptionTypeDescription
frequencynumberThe plate rings at each of its modes and the sand draws that mode’s figure; between them it shivers, more the nearer a mode. Page keys on the knob jump to the next resonance the drive can find.
drivebooleanThe shaker drives the plate at its centre, which moves only some of its modes. Off, the plate rings down and the sand stays where it lies; a bow along an edge still plays it.
grainsnumberGrains of sand
finishenumAuto follows the page: the case, knob, keys and display are drawn from the page’s finish (a printed case on Paper, a lit display on Phosphor); without the kit’s tokens, aluminium on a light page and graphite on a dark one. On a light finish the plate is that finish’s own light metal, porcelain or stock and the sand dark; on a dark one it is anodised with pale sand, lit on Phosphor and Night. Pinned finishes keep the black plate.
lightnumberThe plate’s bevel and the driver cap catch it; the grains’ shadows fall away from it.
soundbooleanPlays the drive and a quieter octave, its loudness following the plate’s energy: it swells as a bow is drawn and dies as the plate rings down. Off by default; never under reduced motion.
readonlybooleanRead-only
labeltextAccessible name

Methods

  • frequency
  • mode
  • energy
  • bowed
  • update
  • setFrequency
  • strew
  • bow
  • stopBow
  • damp
  • tap
  • setPour
  • glide
  • stopGlide
  • destroy

How it works

Original. The plate itself is baked once per size.