AuraGlassby AuraOne5.0.2
Get started
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
24
Tint strength55%
55
Border opacity18%
18
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°
6
Spring stiffness140
140
Tokens

Readthesource.Copythevalue.

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

--ag-color-accent
var(--ag-color-accent)
--ag-color-border
var(--ag-color-border)
--ag-color-canvas
var(--ag-color-canvas)
--ag-color-danger
var(--ag-color-danger)
--ag-color-focus-inner
var(--ag-color-focus-inner)
--ag-color-focus-outer
var(--ag-color-focus-outer)
--ag-color-info
var(--ag-color-info)
--ag-color-on-accent
var(--ag-color-on-accent)
--ag-color-on-surface
var(--ag-color-on-surface)
--ag-color-on-surface-muted
var(--ag-color-on-surface-muted)
--ag-color-specular
var(--ag-color-specular)
--ag-color-success
var(--ag-color-success)
--ag-color-warning
var(--ag-color-warning)
--ag-light-angle
var(--ag-light-angle)
--ag-on-surface
var(--ag-on-surface)
--ag-on-surface-muted
var(--ag-on-surface-muted)
--ag-scrim-clear
var(--ag-scrim-clear)
--ag-scrim-media
var(--ag-scrim-media)
--ag-specular
var(--ag-specular)
--ag-surface-fill
var(--ag-surface-fill)
--ag-surface-radius
var(--ag-surface-radius)
--ag-surface-rim
var(--ag-surface-rim)
--ag-surface-shadow
var(--ag-surface-shadow)

import { tokens } 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 rate
60fpsSmooth
Paint cost
48unitsModerate
Composited layers
14Normal
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