Sea Glint
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/ink-bloomInk Bloom
WebGL ink dropped into a clear tank. Each drop sinks as a curling vortex ring with a stem back to where it fell, then slows and tears into wisps in the water's slow turbulence. By day the inks absorb the light behind them; at night milk and pigments glow against black. Drops arrive on their own; a click adds one and the pointer stirs the water.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
palette
InkPalette | Inks
Default
"sumi"Water and inks in light mode: a preset, or four colors (water first).
darkPalette
InkPalette | Inks
Default
"milk"Water and inks in dark mode.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme, or force one.
every
number
Default
5Seconds between drops. 0 drops nothing on its own.
scale
number
Default
1Size of a bloom: below 1 is smaller, above 1 bigger.
speed
number
Default
1Time scale. 0 holds the ink still.
interactive
boolean
Default
trueA press drops ink at the pointer, and moving it stirs the water.
| Prop | Type | Default | Description |
|---|---|---|---|
| palette | InkPalette | Inks | "sumi" | Water and inks in light mode: a preset, or four colors (water first). |
| darkPalette | InkPalette | Inks | "milk" | Water and inks in dark mode. |
| mode | "auto" | "light" | "dark" | "auto" | Follow the page theme, or force one. |
| every | number | 5 | Seconds between drops. 0 drops nothing on its own. |
| scale | number | 1 | Size of a bloom: below 1 is smaller, above 1 bigger. |
| speed | number | 1 | Time scale. 0 holds the ink still. |
| interactive | boolean | true | A press drops ink at the pointer, and moving it stirs the water. |
