Wave Cipher

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

wave-cipher

Background

Build lazily.

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

0px

Customize

Edit props; preview updates instantly.

Customize

Columns

Band width

60%

Cell size (px)

16px

Speed

0.80x

Crest power

2.0

Glyph churn

0.6

Opacity

100%

Color

Charset

Props

Props accepted by WaveCipher.

Prop	Type	Default	Description
columns	number	3	Number of vertical column bands. Each band gets its own phase-offset wave.
invertColumns	boolean	false	Move bright bands from column centers to column edges — produces thin rivers of glyphs between dark columns.
bandWidth	number	0.6	Width of the bright band inside each column, in 0..1 of the column half-width. Wider = thicker glyph river; especially visible with `invertColumns`.
characters	string	"0123456789ABCDEF"	Glyph charset. Each cell picks one deterministically and the index cycles slowly with `glyphChurn`.
color	string	"#d4d4d4"	CSS color used to draw the glyphs.
speed	number	0.8	Wave travel speed. Higher values pull crests through columns faster.
size	number	16	Cell size in pixels. Smaller values produce a denser glyph grid.
noisePower	number	2	Exponent applied to wave peaks. Higher = sharper, darker valleys; lower = soft glow.
glyphChurn	number	0.6	How fast each cell cycles its glyph. Zero locks the charset to its initial pick.
opacity	number	1	Multiplier applied to the final draw alpha.
className	string	—	Extra class names merged onto the root container.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/wave-cipher.json

Usage

Import the component and drop it into a render.

demo.tsx9 lines

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>
  );
}