Interfaces that feel hand-polished by light.
AuraGlass is the React design system for premium glassmorphism — physically accurate refraction, backdrop-aware contrast, and 356 components that adapt to environment, motion, and intent.
A glass primitive, not a CSS preset.
Every component shares a single material model — so blur, refraction, contrast, and motion stay coherent from a toast to a full-page modal.
LiquidGlass material
Physically accurate Snell's law refraction with tunable IOR bands from 1.33 to 1.52, plus thickness controls. WebGL where available, CSS everywhere else.
Contrast Guard
Backdrop-aware tinting samples real-time luminance and lifts text to WCAG AA — even across unpredictable imagery.
Quality tiers
Ultra · High · Balanced · Efficient profiles decide shader cost, particle density, and sampling budgets per device.
Motion responsiveness
Device tilt, micro-interactions, and ripple physics that connect touch to light. Spring-driven, reduced-motion safe.
SSR-deterministic
SeededRandom and safe DOM helpers render identical markup on server and client. No hydration mismatches.
Everything is glass.
Nothing feels heavy.
From inputs and toasts to full ecosystem simulators — drop in, theme by persona, ship.
Synced to ledger
4,820 records reconciled in 1.2s
Contrast lifted
Backdrop luminance changed - text re-tinted to AAA
One install. Zero theming.
AuraGlass ships with sensible defaults, SSR helpers, and tree-shakeable exports. Opt into LiquidGlass when you need refraction.
npm install aura-glassMake the next thing feel true.
Crafted in the open. Trusted in production at studios that don't accept rough edges.