Ripple Surface

A field of soft concentric rings shaded by a directional light — WebGL sin-ridge height field with four travel modes (outward, inward, breathe, drift), tanh-smoothed ridges, a faded core that kills the seam at the origin, and eight palettes from pearl to obsidian. Pauses when off-screen.

Lazy-ui

Ripple

Build quietly.

Concentric rings carved by a single directional light — tanh-smoothed ridges and a faded core keep the surface clean from edge to edge.

Customize

Palette

Effect

Show content

Rings4

Sharpness0.30

Depth1.25

Speed1.15

Light130°

Center glow0.62

Vignette0.30

Origin X0.50

Origin Y0.50

Usage

import { RippleSurface } from "@/components/lazy-ui/ripple-surface";

<RippleSurface
  palette="pearl"
  effect="drift"
  showContent={true}
  rings={4}
  sharpness={0.3}
  depth={1.25}
  speed={1.15}
  lightAngle={130}
  centerGlow={0.62}
  vignette={0.3}
  originX={0.5}
  originY={0.5}
/>