Fogged Glass
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/reeded-glassReeded Glass
WebGL fluted glass panel over drifting colored lights and plant stems. Each reed is a lens that squeezes, flips and splits what stands behind it into color, with groove shadows, a highlight down every reed and adjustable frosting. Set the reed width and angle; one light follows the pointer. 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.
colors
[string, string, string, string]
Default
LIGHTFour light colors behind the glass (any CSS colors). The first one follows the pointer.
darkColors
[string, string, string, string]
Default
DARKThe same lights in dark mode.
reed
number
Default
30Width of one reed, in CSS px.
angle
number
Default
0Reed direction in degrees: 0 runs them top to bottom.
frost
number
Default
0.35Frosting, 0 (clear) to 1 (sandblasted).
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme, or force one.
speed
number
Default
1How fast the lights drift. 0 holds them still.
interactive
boolean
Default
trueThe first light follows the pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | LIGHT | Four light colors behind the glass (any CSS colors). The first one follows the pointer. |
| darkColors | [string, string, string, string] | DARK | The same lights in dark mode. |
| reed | number | 30 | Width of one reed, in CSS px. |
| angle | number | 0 | Reed direction in degrees: 0 runs them top to bottom. |
| frost | number | 0.35 | Frosting, 0 (clear) to 1 (sandblasted). |
| mode | "auto" | "light" | "dark" | "auto" | Follow the page theme, or force one. |
| speed | number | 1 | How fast the lights drift. 0 holds them still. |
| interactive | boolean | true | The first light follows the pointer. |
