Moiré Screens
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/marbled-paperMarbled Paper
WebGL Turkish stone marbling floating in its bath: Voronoi stones of concentric ink drops, combed into waves and slowly swirled, with veins at the seams, pigment granulation and paper fibres. Dragging the pointer pulls a stylus through the ink, which relaxes back over a few seconds. Six ink sets or your own five colors. Pauses off-screen and holds a still frame for reduced motion.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
palette
MarblePalette | Inks
Default
"ebru"Inks in light mode: a preset, or five colors (size first).
darkPalette
MarblePalette | Inks
Default
"nocturne"Inks in dark mode.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme, or force one.
scale
number
Default
1Size of the stones: below 1 is finer, above 1 bolder.
speed
number
Default
1How fast the bath drifts. 0 holds it still.
interactive
boolean
Default
trueDragging the pointer combs the ink like a stylus.
| Prop | Type | Default | Description |
|---|---|---|---|
| palette | MarblePalette | Inks | "ebru" | Inks in light mode: a preset, or five colors (size first). |
| darkPalette | MarblePalette | Inks | "nocturne" | Inks in dark mode. |
| mode | "auto" | "light" | "dark" | "auto" | Follow the page theme, or force one. |
| scale | number | 1 | Size of the stones: below 1 is finer, above 1 bolder. |
| speed | number | 1 | How fast the bath drifts. 0 holds it still. |
| interactive | boolean | true | Dragging the pointer combs the ink like a stylus. |
