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";

export function Demo() {
  return (
    <RippleSurface
      palette="graphite"
      effect="drift"
      rings={4}
      sharpness={0.3}
      depth={1.25}
      speed={1.15}
      lightAngle={130}
      centerGlow={0.62}
      vignette={0.3}
      className="min-h-[520px] rounded-2xl"
    >
      <main className="relative z-10 flex h-full items-center justify-center px-6">
        <h1
          className="text-5xl tracking-tight text-white"
          style={{ fontFamily: "'Instrument Serif', serif" }}
        >
          Build <span className="italic">quietly.</span>
        </h1>
      </main>
    </RippleSurface>
  );
}