Ink Bloom
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/sea-glintSea Glint
WebGL sea horizon at golden hour, moonlit after dark. Eighteen wave trains roll at deep-water speeds, and each hands its slope to a roughness lobe once a pixel can't resolve it, so the glitter sparkles up close and calms into a streak at the hazy horizon. The sun follows the pointer; stirring freshens the wind. Pauses off-screen; still frame for reduced motion.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
hour
SeaHour
Default
"golden"Light in light mode.
darkHour
SeaHour
Default
"moon"Light in dark mode.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme, or force one.
horizon
number
Default
0.34Where the horizon sits, as a fraction of the height from the bottom.
sun
number
Default
0.68Where the sun sits across the sky, 0 (left) to 1 (right), when the pointer is away.
wind
number
Default
0.5Wind on the water, 0 (glassy) to 1 (choppy). Moving the pointer freshens it.
speed
number
Default
1Time scale. 0 holds the sea still.
interactive
boolean
Default
trueThe sun follows the pointer across the sky.
| Prop | Type | Default | Description |
|---|---|---|---|
| hour | SeaHour | "golden" | Light in light mode. |
| darkHour | SeaHour | "moon" | Light in dark mode. |
| mode | "auto" | "light" | "dark" | "auto" | Follow the page theme, or force one. |
| horizon | number | 0.34 | Where the horizon sits, as a fraction of the height from the bottom. |
| sun | number | 0.68 | Where the sun sits across the sky, 0 (left) to 1 (right), when the pointer is away. |
| wind | number | 0.5 | Wind on the water, 0 (glassy) to 1 (choppy). Moving the pointer freshens it. |
| speed | number | 1 | Time scale. 0 holds the sea still. |
| interactive | boolean | true | The sun follows the pointer across the sky. |
