Playground

Touchthematerial.

Adjust blur, tint, elevation, radius, glow, density, and motion. A real surface re-renders live against the same primitives the library ships. Copy the snippet straight into a Next.js app.

Card

A real surface, live.

This card is one AuraSurface instance, controlled by the rail. Every change re-renders against the same primitive.

blur 20pxCyanradius lg
tsx
<OptimizedGlass
  blur={20}
  tint="cyan"
  elevation={3}
  radius="lg"
  glow
  density="regular"
  motion
>
  {children}
</OptimizedGlass>