Foundation
Glass
Physics-based glass surface system. Five density levels control opacity, edge highlights, graduated shadows, and internal diffusion. Inputs are carved into the surface. The reactive prop adds cursor-tracking proximity glow.
All Effects
Every glass effect combination in one grid.
Glass
glass color="primary"
Glass + Raised
glass raised
Glass + Glow
glass glow
Glass + Colored
glass colored color="secondary"
Glass + Reactive
glass reactive color="accent"
Everything
glass colored glow reactive
Solid vs Glass
Same card, one solid and one glass. Glass adds translucent surface, edge highlights, and graduated shadow.
Solid Card
Default opaque surface
Glass Card
Translucent with auto-blur
Neutral vs Colored
Without color prop, glass is neutral gray. With color prop, glass tints to the theme color. The colored prop adds gradient orbs that follow the component color.
Neutral
glass (no color)
Primary
glass color="primary"
Primary + Colored
glass color="primary" colored
Accent
glass color="accent"
Accent + Colored
glass color="accent" colored
Secondary + Colored
glass color="secondary" colored
Theme Gradient
glass color="gradient"
Theme + Colored
glass color="gradient" colored
Tint Strength
The tint prop controls how saturated the glass color is. Subtle for backgrounds, vivid for emphasis.
Subtle
tint="subtle" (35%)
Medium
tint="medium" (65%)
Vivid (default)
no tint (100%)
Depth Stacking
Card-in-card with controls at each level. Inputs carve in, buttons rise above. Inner card inherits theme color.
Outer card (depth 0, theme)
Inner card (depth 1, inherits theme)
Reactive Glow
Hover your mouse over each card. A radial glow follows the pointer across the surface and catches the border.
Primary Reactive
Hover me
Secondary Thick
Hover me
Accent + Glow
Hover me
Density Levels
Five levels from ultra-thin to ultra-thick. Higher density = stronger surface tint, deeper shadow, and internal diffusion at thick+.
ultra-thin
thin
normal
thick
ultra-thick