Chladni Plate
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/moire-screensMoiré Screens
WebGL op-art from two printed transparencies laid one over the other. Concentric rings (or straight rules) beat into broad moiré fans that swim as the top sheet drifts or follows the pointer, every rule box-filtered over the pixel so only the designed interference shows. By day the rules print in graphite, riso or tomato ink; at night they glow on black and cancel where they cross.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
palette
MoireInk | Inks
Default
"graphite"Paper and inks in light mode: a preset, or three colors (paper first).
darkPalette
MoireInk | Inks
Default
"phosphor"Ground and inks in dark mode.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme, or force one.
pattern
"rings" | "lines"
Default
"rings"What's printed on the screens: concentric rings, or straight rules.
pitch
number
Default
7Distance between lines, in CSS px.
ink
number
Default
0.85Strength of the ink, 0 to 1.
speed
number
Default
1Time scale. 0 holds the screens still.
interactive
boolean
Default
trueThe top screen follows the pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
| palette | MoireInk | Inks | "graphite" | Paper and inks in light mode: a preset, or three colors (paper first). |
| darkPalette | MoireInk | Inks | "phosphor" | Ground and inks in dark mode. |
| mode | "auto" | "light" | "dark" | "auto" | Follow the page theme, or force one. |
| pattern | "rings" | "lines" | "rings" | What's printed on the screens: concentric rings, or straight rules. |
| pitch | number | 7 | Distance between lines, in CSS px. |
| ink | number | 0.85 | Strength of the ink, 0 to 1. |
| speed | number | 1 | Time scale. 0 holds the screens still. |
| interactive | boolean | true | The top screen follows the pointer. |
