module/glass-engine

Glass Engine

Adaptive material system for translucent surfaces.

Manages blur radius, tint, edge highlights, and stacking order so glass panels remain legible across runtimes, wallpapers, and motion states.

State Logic

Reactive surfaces this module exposes to the runtime.

blurnumber(px)

8 → 40. Auto-tuned to background luminance.

tintcolor-token

Bound to accentRuntime. Never set manually.

stackenum

base | floating | modal | system. Strict z-ordering.

activeboolean

Active glass raises tint opacity and edge glow.

Visual Variants

Allowed rendering modes. No ad-hoc styles outside this set.

glass.panel

Default container. Most surfaces.

glass.rail

Vertical sidebars and activity rails.

glass.sheet

Bottom sheets, transaction confirms.

glass.chrome

Window chrome, traffic-light strip.

glass.whisper

AI capsules. Minimum blur, max legibility.

Motion Tokens

Deterministic timing curves. No custom easing per component.

tokenvalueuse
glass.morph480ms cubic-bezier(.2,.8,.2,1)Blur and tint transitions.
glass.lift180ms ease-outHover raise on floating glass.
glass.fade240ms ease-outStack reordering.

Isolation Rules

Hard boundaries enforced at the module edge.

01

Glass cannot stack more than three deep. Beyond that, collapse to solid.

02

No glass inside glass.whisper. Whispers are leaf surfaces.

03

Tint is owned by the active runtime, not the component author.

04

Reduced-motion disables glass.morph and falls back to instant.

// end module /glass-engine