Orbit Cipher

A radial cipher with four effect modes — ripple, spiral, vortex, and pulse — anchored to a configurable center with falloff.

orbit-cipher

Background

Build lazily.

Four effect modes, configurable center, falloff, and two-tone palette.

0px

Customize

Edit props; preview updates instantly.

Customize

Effect

Columns

Rows

Speed

1.00x

Wave frequency

1.0

Wave power

4.0

Arms

Falloff

1.5

Base alpha

Color cycle

1.0

Opacity

100%

Color 1

Color 2

Charset

Props

Props accepted by OrbitCipher.

Prop	Type	Default	Description
effect	"ripple" \| "spiral" \| "vortex" \| "pulse"	"spiral"	Radial pattern mode. `ripple` = concentric rings, `spiral` = arms twisting outward, `vortex` = arms with quadratic radial twist, `pulse` = radial pulses modulated by angular petals.
characters	string	"0123456789ABCDEF"	Glyph charset. Each cell picks one deterministically.
columns	number	36	Cells across the canvas. Cell width = canvasWidth / columns.
rows	number	22	Cells down the canvas.
speed	number	1	Overall animation speed multiplier.
waveFrequency	number	1	Spatial frequency of the radial wave — higher = more bands.
wavePower	number	4	Wave peak sharpness. Higher = thinner, brighter ridges.
spiralArms	number	3	Number of arms in `spiral`, `vortex`, and `pulse` modes.
falloff	number	1.5	Radial darkening exponent — higher concentrates brightness at the center.
baseAlpha	number	0.05	Baseline alpha so the grid is faintly visible everywhere, not only on ridges.
colorSpeed	number	1	Speed of the two-tone color cycle.
glyphChurn	number	0.5	How fast each cell cycles its glyph. Zero locks the charset to its initial pick.
color1	string	"#7c3aed"	Primary tone in the two-tone cycle.
color2	string	"#22d3ee"	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.
fontScale	number	0.9	Font size as a fraction of the cell width.
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/orbit-cipher.json

Usage

Import the component and drop it into a render.

demo.tsx9 lines

import { OrbitCipher } from "@/components/lazy-ui/orbit-cipher";

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