Fogged Glass
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/window-lightWindow Light
WebGL sunlight falling through a window and a tree onto a plaster wall. Mullion shadows soften with distance, leaves at two depths flutter in a gusting breeze, penumbras run warm and the light rakes across the plaster. Five hours from morning to moonlight; pointer movement stirs the wind. 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.
hour
WindowHour
Default
"afternoon"Light in light mode.
darkHour
WindowHour
Default
"moon"Light in dark mode.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme, or force one.
wind
number
Default
0.5Breeze strength, 0 (still air) to 1 (gusty). Moving the pointer stirs it too.
foliage
number
Default
0.7How much tree stands outside the window, 0 to 1.
panes
[number, number]
Default
[3, 2]Window panes across and down.
speed
number
Default
1Time scale. 0 holds the leaves still.
interactive
boolean
Default
truePointer movement gusts the breeze.
| Prop | Type | Default | Description |
|---|---|---|---|
| hour | WindowHour | "afternoon" | Light in light mode. |
| darkHour | WindowHour | "moon" | Light in dark mode. |
| mode | "auto" | "light" | "dark" | "auto" | Follow the page theme, or force one. |
| wind | number | 0.5 | Breeze strength, 0 (still air) to 1 (gusty). Moving the pointer stirs it too. |
| foliage | number | 0.7 | How much tree stands outside the window, 0 to 1. |
| panes | [number, number] | [3, 2] | Window panes across and down. |
| speed | number | 1 | Time scale. 0 holds the leaves still. |
| interactive | boolean | true | Pointer movement gusts the breeze. |
