Horizon Cipher

A retro perspective grid of glyphs receding to a horizon — scrolling rows, traveling wave ridge, and a two-tone color cycle.

horizon-cipher

Background

Build lazily.

Drop Horizon Cipher behind any hero, dashboard, or landing page.

0px

Customize

Edit props; preview updates instantly.

Customize

Columns

Depth rows

Font scale

0.90

Scroll speed

1.0

Wave speed

1.0

Wave power

6.0

Wave count

3.0

Wobble

1.4

Base alpha

Color cycle

1.0

Opacity

100%

Color 1

Color 2

Charset

Props

Props accepted by HorizonCipher.

Prop	Type	Default	Description
characters	string	"0123456789ABCDEF"	Glyph charset. Each cell picks one deterministically; picks shuffle on each integer scroll step.
columns	number	32	Number of columns across the canvas at the near row. Cell width auto-derives from `canvasWidth / columns`, so more columns means a denser grid (not a wider one).
depthRows	number	22	Number of depth rows from the near edge up to the horizon.
vanishY	number	0.35	Vanishing-point Y, normalized to canvas height. 0 = top edge, 0.5 = middle, ~0.35 puts the horizon a third of the way down.
curve	number	2	Perspective curvature exponent. Higher values compress more rows near the horizon.
farScale	number	0.25	Cell scale at the horizon relative to the near row. Smaller values give a stronger depth illusion.
fontScale	number	0.9	Font size as a fraction of the cell width. Lower = airier glyphs with visible gaps; higher = packed.
scrollSpeed	number	1	How fast rows advance toward the camera.
waveSpeed	number	1	Speed of the wave ridge that lights cells across columns.
wavePower	number	6	Wave peak sharpness. Higher = thinner, brighter ridges; lower = soft glow over the whole grid.
waveFrequency	number	3	How many ridge crests fit across the grid horizontally.
waveAmplitude	number	1.4	Lateral wobble amplitude — how much each ridge curves with row depth.
baseAlpha	number	0.07	Baseline alpha applied to every glyph so the perspective grid is faintly visible at rest.
colorSpeed	number	1	Speed of the color cycle between `color1` and `color2`.
color1	string	"#290596"	Primary tone in the two-tone cycle.
color2	string	"#93229D"	Secondary tone in the two-tone cycle.
background	string	"#000000"	Background fill drawn each frame beneath the glyphs.
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/horizon-cipher.json

Usage

Import the component and drop it into a render.

demo.tsx9 lines

import { HorizonCipher } from "@/components/lazy-ui/horizon-cipher";

export function Demo() {
  return (
    <div className="relative h-96 w-full overflow-hidden">
      <HorizonCipher />
    </div>
  );
}