gamma logo

1

Aurora Glass

PreviousNext

A shimmering glass tile background with ripple layers, bevel shading, and chromatic spread.

Installation

pnpm dlx shadcn@latest add @gammaui/aurora-glass

The AuroraGlass component renders an animated field of rounded glass tiles. Broad directional ripple bands sweep continuously across the entire tile lattice, and each tile's bevel normal warps the sample point near its edges — giving a refraction-like effect as highlights flow from tile to tile. It accepts children, so you can layer any content above the animation.

Props

PropTypeDefaultDescription
widthstring | number"100%"Container width
heightstring | number"100%"Container height
classNamestring""Additional CSS classes
childrenReactNodeundefinedContent rendered above the effect
speednumber1Animation speed multiplier (0–3)
tileDensitynumber4Number of tiles across the shorter side (1–16)
rippleLayersnumber6Stacked ripple layers (1–8)
warpStrengthnumber0.33Per-tile inverse-distance refraction warp (0–0.6)
bandSharpnessnumber3Highlight peak sharpness (0.5–10)
chromaticSpreadnumber0Per-channel RGB separation (0–1)
colorAstring"#1E00FF"Gradient deep color stop
colorBstring"#D765E6"Gradient bright color stop
backgroundColorstring"#FFFFFF"Fill color for gaps between tiles and dark areas
opacitynumber1Master alpha (0–1)
dprnumber1.5Max device pixel ratio (1–3)

Example Variants

Fullscreen Background

<div className="fixed inset-0">
  <AuroraGlass colorA="#1E00FF" colorB="#D765E6" tileDensity={6} />
</div>

Dark Mode Hero with Content

<AuroraGlass
  height="400px"
  colorA="#001eff"
  colorB="#00bcff"
  backgroundColor="#000"
  tileDensity={5}
  rippleLayers={8}
>
  <div className="flex h-full items-center justify-center">
    <h1 className="text-4xl font-bold text-white">Hello World</h1>
  </div>
</AuroraGlass>

Chromatic Aberration Effect

<AuroraGlass
  colorA="#ff0080"
  colorB="#7928ca"
  chromaticSpread={0.6}
  bandSharpness={5}
  tileDensity={8}
/>

Features

  • ⚡ High-performance rendering — GPU-accelerated animation with no external dependencies.
  • 🪟 Glass Bevel Shading — Per-tile surface normals derived from a domed height field, lit by a virtual studio light.
  • 🌊 Continuous Ripple Field — Highlight bands flow across tile boundaries rather than animating per-tile.
  • 🌈 Chromatic Spread — Optional per-channel RGB offset for a prismatic aberration look.
  • 📏 Responsive — Adapts to container size via ResizeObserver.
  • 🧩 Composable — Accepts children rendered above the canvas layer.

Tips

  • Place the component inside a container with an explicit height (e.g. h-[400px]) — it fills available space automatically.
  • Increase tileDensity for a finer tile grid, or lower it for large bold tiles.
  • Set chromaticSpread above 0.3 combined with a high bandSharpness for a vivid neon look.
  • Use opacity to blend the effect over a solid background color.