Chladni Plate

One Shot - 

Build "Chladni Plate": a square metal plate covered in sand. Slide the pitch and, at each resonance, the sand leaps off the parts that move and gathers on the lines that stand still, drawing a perfect geometric figure. Make it the most beautiful Chladni plate on the web, and accurate enough that a physicist would nod along.

Write it as an acoustics physicist and a top creative technologist. Every number must be correct; say on screen what is simplified. ONE object, ONE gesture: polish beats features.

## Technical rules

- ONE self-contained HTML file. three.js ES modules from jsDelivr via an import map, pinned (e.g. `https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js`), and Inter from Google Fonts with a system fallback. No other network calls, images or audio files.
- It runs in a sandboxed iframe that can be 0×0 at load: size from a ResizeObserver, never throw on a zero size, no alert(). Wrap localStorage (colourway, mute) in try/catch.
- Fill the window from a 360px phone to a large desktop; mouse, touch and keyboard.
- 60 fps on a laptop, smooth on a mid-range phone: devicePixelRatio capped at 2, about 120,000 grains on desktop and 40,000 on a phone (fewer if frames drop), paused when hidden, prefers-reduced-motion respected.
- No placeholders, TODOs or console errors.

## The plate

A 24 cm square steel plate, 1 mm thick, bolted at its centre to a vibration driver, seen from straight above through a long lens like a product photo. Make it a real object: a crisp bevelled edge catching the light, faint brushed grain, a centre hex bolt, a soft shadow beneath.

- Modes (the classic free-plate approximation, x and y from 0 to L): w = cos(mπx/L)·cos(nπy/L) + cos(nπx/L)·cos(mπy/L). A centre driver only excites modes that move at the centre: even m ≤ n, not both zero.
- Frequencies (bending waves): f = (π/2L²)·√(D/ρh)·(m² + n²), D = Eh³/12(1 − ν²); steel E = 200 GPa, ρ = 7850 kg/m³, ν = 0.3. The first figure is at 167 Hz; eighteen lie below 6 kHz.
- At drive frequency f, sum the normalised modes, each weighted by w(centre)/(f_mn² − f² + i·f·f_mn/Q), Q ≈ 50. Evaluate the magnitude on a grid and sample it per grain.
- Sand is thrown only where the plate's acceleration, (2πf)² × displacement, beats gravity. Set the drive so a resonance puts most of the plate well above 1 g, while between resonances the sand barely stirs.

## The sand: the most important part

Each grain is a tiny, crisp, antialiased speck, like salt in a macro photograph: varied in size and brightness, lit on one side, with a soft contact shadow. Never blobs, glowing dots or smooth gradients. Draw them all in one call (points with a small custom shader).

- Grains HOP, never glide: random hops, longer where the plate shakes harder, nudged slightly down the amplitude gradient. Below 1 g they rest. That alone gathers sand on the still lines; it is the real mechanism.
- A flying grain lifts and its shadow separates, so shaking regions shimmer like a boiling haze while finished lines are dense and razor sharp.
- A figure forms in one to three seconds. When the pitch changes, the old lines dissolve and the sand streams into the new figure: the money shot.
- Grains that hop off the edge fall away. Tap or drag the plate to pour sand; SPRINKLE lays a fresh, even layer; CLEAR brushes it off. No grain collisions; dense lines just pile up brighter.

## The gesture: the frequency strip

A full-width log-scale strip along the bottom, 100 Hz to 6 kHz, with the plate's response drawn above it as one thin line peaking at each resonance, and a playhead in the accent colour. Drag to tune; release near a peak and it eases onto it. ◂ ▸ jump between resonances. Readouts in tabular numbers: FREQUENCY, NOTE (e.g. C6 +12¢), MODE (m, n), PLATE MOVES (peak ± µm), ACCELERATION (g).

## Colourways

A colourway sets the plate, sand, background and light. Show eight as swatch chips, plus a COLOUR slider that scrubs smoothly through them, morphing everything as you drag. Each must look like a product photo, with strong contrast between sand and plate:

1. CHALK: matte black plate, off-white sand. Default in dark mode.
2. INK: warm white enamel (#F4F3EE), black sand, like an engraving. Default in light mode.
3. BRASS: polished brass, white salt that glints.
4. STEEL: brushed stainless, black volcanic sand, pale grey background.
5. COBALT: deep blue enamel, white sand.
6. GOLD: black plate, gold dust that glints as it hops.
7. RAINBOW: black plate, sand in #FF5A1F, #FFC21A, #3DDC84, #19B5FE, #6C5CE7, #FF4FA3 and #F5F5F5, poured in bands so the colours travel and meet in the lines.
8. UV: lime, magenta and cyan fluorescent grains with a soft glow on violet-black, as under a blacklight.

## Look and feel

Gallery-minimal: square corners, hairline borders, tiny uppercase Inter labels with wide tracking, and one accent of signal orange (#FF5A1F) for the playhead and the current resonance. Black on white or white on black to suit the colourway. A small CHLADNI PLATE wordmark top left; a one-line caption narrates. On a phone, controls sit in a compact panel under the plate.

## WAVE view

A toggle tilts the camera to about 35° and shows the plate heaving in its current shape, exaggerated and slowed (show both factors, e.g. "5,000× taller, 1,000× slower"). The sand sits still on the lines while everything around it rises and falls, which is why it gathered there.

## Sound

Off until the user taps SOUND ON. A pure tone at the drive frequency, swelling at each resonance, limited and tamed above 2 kHz so it never pierces. Under it, the dry sizzle of landing sand (filtered noise and tiny clicks), fading as the figure settles.

## Facts ("?" panel)

A how-to line, then:
- Chladni made these figures in 1787 by bowing metal plates with a violin bow.
- After his 1808 demonstrations in Paris, Napoleon approved a 3,000-franc prize for the maths. Sophie Germain won it in 1816, the first woman to win the Academy's grand prize in mathematics.
- Walther Ritz invented a method in 1909 to calculate this very plate; its descendants run engineering software today.
- At 1,000 Hz, a quarter of a micrometre of movement throws sand into the air.
- Twice as many lines needs about four times the pitch.
- Very fine powder does the opposite and heaps up where the plate moves most, carried by air currents (Faraday, 1831).

## Tour and first impression

TAKE THE TOUR: 60 seconds made for screen recording. It climbs through about eight resonances from simple to intricate, holding each while it forms and gliding between them so lines dissolve and re-form. It changes colourway every stop or two and dips into WAVE once, with a caption per step. Any interaction stops it.

On load, the plate is already sprinkled and tuned to a beautiful resonance, and the sand starts leaping into its figure within the first second. Caption: "Sand gathers where the plate stands still." Buttons: TAKE THE TOUR and SOUND ON.

Keys: arrows tune (Shift for bigger steps), [ ] jump between resonances, and S, X, C, V, M, T for sprinkle, clear, colourway, view, mute and tour.

## Do NOT add

Anything not on this page: no other plate shapes, microphone, music, recording or share buttons, free-orbit camera, water, smoke or other particles, full-screen bloom, decorative gradients or glass panels, or pre-drawn figures. Every pattern comes from the maths.

## Output

Think through the architecture briefly, then write the complete file from `<!doctype html>` to `</html>`. If you can run a browser, check every colourway at 360px and desktop width, a 0×0 frame and reduced motion, and fix what you see. If you must trade scope, protect in this order: the sand; the frequency strip; the colourways; sound; WAVE; the tour.