Lazy-uiLazy UI
Star0

Spectrum Tide

A transparent WebGL crest — simplex noise drives a height field, smoothstep-banded and premultiplied so only the wave itself is opaque; a three-stop color ramp sweeps across it. Floats over any backdrop. Pauses when off-screen.

Lazy-ui
Transparent canvas, premultiplied alpha

A crest that
floats on color.

A single noise octave drives a height field; only the band near the crest is opaque. No fill layer underneath — the tide sits directly on whatever backdrop you give it.

Customize

Palette
Amplitude1.00
Blend0.60
Speed1.00x

Usage

import { SpectrumTide } from "@/components/lazy-ui/spectrum-tide";

export function Demo() {
  return (
    <SpectrumTide
      colors={["#e89119", "#2d1eeb", "#ff148c"]}
      amplitude={1}
      blend={0.6}
      speed={1}
      className="min-h-[520px] rounded-2xl bg-black"
    >
      <main className="relative z-10 flex h-full items-center justify-center px-6">
        <h1 className="text-center text-5xl font-light tracking-tight text-white">
          Waves, colored.
        </h1>
      </main>
    </SpectrumTide>
  );
}