Wave Cipher

A glyph-filled background — vertical column bands with traveling wave crests, churning glyphs from a configurable charset.

Background

Build lazily.

Drop Wave Cipher behind any hero, dashboard, or auth screen.

Customize

Columns3

Band width60%

Cell size (px)16px

Speed0.80x

Crest power2.0

Glyph churn0.6

Opacity100%

Color

Charset

Invert columns

Usage

import { WaveCipher } from "@/components/lazy-ui/wave-cipher";

export function Demo() {
  return (
    <div className="relative h-96 w-full overflow-hidden bg-black">
      <WaveCipher columns={3} invertColumns />
    </div>
  );
}