AuraGlassby AuraOne3.0.7
npmGitHubExplore
Systems

Amaterial,notabackground.

Six systems make AuraGlass feel like glass. Every panel below is a live demo wired to the same tokens and components you ship.

Materials

Glassthatbehaveslikeamaterial.

Move the sliders. Watch a real OptimizedGlass surface change blur, tint, and border weight in real time. Same tokens. Same physics.

Live surface

Material parameters

Blur, tint, and border respond to the sliders. The surface itself is a real OptimizedGlass.

Backdrop blur24px
Tint strength55%
Border opacity18%
Motion

Springphysics,neverlinear.

Tilt strength and spring stiffness wired straight into a real TiltSurface. Reduced motion turns it off — no opt-in required.

Tilt surface

Spring physics

Move the cursor across this card. The angle and snap come from a real spring, not a CSS transition.

Tilt strength6°
Spring stiffness140
Tokens

Readthesource.Copythevalue.

A live table reading auraTokens from the package. Every value is a single click away from your clipboard.

global.background-base#0f172a
global.background-surfacergba(15, 23, 42, 0.85)
global.background-glassrgba(255, 255, 255, 0.08)
global.border-strongrgba(255, 255, 255, 0.35)
global.border-softrgba(255, 255, 255, 0.18)
global.text-primary#f8fafc
global.text-secondaryrgba(248, 250, 252, 0.7)
global.text-tertiaryrgba(248, 250, 252, 0.5)
global.accent#6366f1
semantic.primary#6366f1
semantic.success#22c55e
semantic.warning#f59e0b
semantic.danger#ef4444
semantic.info#0ea5e9
semantic.neutral#64748b
personas.light.background#f8fafc
personas.light.foreground#0f172a
personas.light.muted#e2e8f0
personas.light.muted-foreground#475569
personas.light.highlightrgba(99, 102, 241, 0.12)
personas.light.glass-surfacergba(255, 255, 255, 0.6)
personas.light.glass-borderrgba(15, 23, 42, 0.12)
personas.light.glass-shadow0 8px 32px rgba(15, 23, 42, 0.12)
personas.dark.background#020617
personas.dark.foreground#e2e8f0
personas.dark.muted#1e293b
personas.dark.muted-foreground#94a3b8
personas.dark.highlightrgba(99, 102, 241, 0.2)
personas.dark.glass-surfacergba(15, 23, 42, 0.65)
personas.dark.glass-borderrgba(148, 163, 184, 0.22)
personas.dark.glass-shadow0 12px 40px rgba(15, 23, 42, 0.45)

import { auraTokens } from 'aura-glass/tokens'

Accessibility

Focusringscomestandard.

Tab through real GlassButton, GlassInput, and GlassTabs. Watch the rings land where users expect them.

Visible 2px outline at 2px offset. Cyan against the surface, never lower than 3:1.

Press Tab to walk the controls. Then Shift+Tab back.
Read the accessibility pass
Performance

Aframebudgetyoucansee.

Live FPS counter and paint-cost view. Toggle blur, glow, and tilt to feel the cost — and the savings.

Layer01
Layer02
Layer03
Layer04
Layer05
Layer06
Layer07
Layer08
Layer09
Layer10
Layer11
Layer12
Frame rate60fps
Paint cost48units
Composited layers14
Personas

Onesurface.Manyvoices.

Swap the persona. The same OptimizedGlass re-tints from token values. Identity without a rewrite.

Default persona

One material. New voice.

The tint, border, and accent come from token values. The component stays the same.

Open the persona switcher