Playground

Touchthematerial.

Adjust blur, tint, elevation, radius, glow, density, and motion. The surface updates live. Copy the snippet — drop it 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
Snippet
Copied to clipboard
<OptimizedGlass
  blur={20}
  tint="cyan"
  elevation={3}
  radius="lg"
  glow
  density="regular"
  motion
>
  {children}
</OptimizedGlass>