Ink Bloom
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/fogged-glassFogged Glass
WebGL window fogged with condensation over out-of-focus lights: a garden by day, a rainy city at night. Beads speckle the glass, each a tiny lens showing the world flipped and sharp; drops run down in fits and starts and leave clear trails. The pointer wipes the glass like a fingertip, and the fog creeps back over the stroke.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
scene
FoggedScene
Default
"garden"Scene in light mode.
darkScene
FoggedScene
Default
"city"Scene in dark mode.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme, or force one.
fog
number
Default
0.85How thick the condensation is, 0 (a light mist) to 1 (opaque).
refog
number
Default
6Seconds a wiped stroke takes to fog back over.
drips
number
Default
6How many drops run down the glass, 0 to 10.
speed
number
Default
1Time scale. 0 holds the drops still.
interactive
boolean
Default
trueDragging or moving the pointer wipes the glass clear.
| Prop | Type | Default | Description |
|---|---|---|---|
| scene | FoggedScene | "garden" | Scene in light mode. |
| darkScene | FoggedScene | "city" | Scene in dark mode. |
| mode | "auto" | "light" | "dark" | "auto" | Follow the page theme, or force one. |
| fog | number | 0.85 | How thick the condensation is, 0 (a light mist) to 1 (opaque). |
| refog | number | 6 | Seconds a wiped stroke takes to fog back over. |
| drips | number | 6 | How many drops run down the glass, 0 to 10. |
| speed | number | 1 | Time scale. 0 holds the drops still. |
| interactive | boolean | true | Dragging or moving the pointer wipes the glass clear. |
