Ink Bloom
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/caustic-poolCaustic Pool
WebGL view down into a tiled swimming pool. Caustics come from the curvature of the moving water itself, split into color at their edges, so pointer ripples and dropped stones focus rings of light on the mosaic. Sunlit by day, lamplit at night. 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.
tile
number
Default
40Edge of one floor tile, in CSS px.
lane
boolean
Default
truePaint a dark lane stripe across the floor.
depth
number
Default
1Water depth: deeper water focuses the light into tighter, brighter caustics.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme (sunlit by day, lamplit at night), or force one.
speed
number
Default
1How fast the water moves. 0 holds it still.
interactive
boolean
Default
trueMoving the pointer trails ripples and a press drops a stone.
| Prop | Type | Default | Description |
|---|---|---|---|
| tile | number | 40 | Edge of one floor tile, in CSS px. |
| lane | boolean | true | Paint a dark lane stripe across the floor. |
| depth | number | 1 | Water depth: deeper water focuses the light into tighter, brighter caustics. |
| mode | "auto" | "light" | "dark" | "auto" | Follow the page theme (sunlit by day, lamplit at night), or force one. |
| speed | number | 1 | How fast the water moves. 0 holds it still. |
| interactive | boolean | true | Moving the pointer trails ripples and a press drops a stone. |
