Skip to content

Vitrum

A component library cast in glass. Thirty React components rendered in a refractive material — installed with one command, themed with custom properties, accessible by construction.

The center stays at rest

Refraction lives in a bevel band around each surface's rim. Content behind the middle of a pane stays legible — the bend is at the edges, where glass actually bends light.

Fields are wells, chrome is glass

Things you read float as glass above the page. Things you type into are recessed wells sunk beneath it. The two never compete for the same depth.

Light is a dependency

Glass over a void is invisible. Vitrum ships the light too — the aurora field — and every demo renders over it.

Degradation is a design target

Three engines render every surface: refraction where the compositor allows it, a tuned frost everywhere else, and solid surfaces when the system asks for reduced transparency. Each is styled on purpose.

How it is built

Every component is a thin layer over a single primitive — the glass surface. One element, two pseudo-layers: a backdrop layer that bends and frosts what lies behind it, and a specular ring that catches the light. Behavior comes from battle-tested headless primitives; the optics are pure CSS driven by custom properties, so every knob is themable per instance.