Circle Cipher

A cursor-following glyph trail — speed-gated brush lights cells on a Canvas2D grid, characters fade as the signal decays.

circle-cipher

Move your cursor

0px

Customize

Edit props; preview updates instantly.

Customize

Cell size (px)

12px

Spread (px)

142px

Persistence

1.8

Opacity

100%

Color

Charset

Props

Props accepted by CircleCipher.

Prop	Type	Default	Description
characters	string	"✶✤↣⌧✷*.;:"	Glyph charset. Each lit cell picks one at random and keeps it for that cell's lifetime.
size	number	24	Cell size in pixels. Smaller values produce a denser grid.
color	string	"#00ff00"	CSS color used to draw the glyphs.
spread	number	80	Brush radius around the cursor, in pixels.
persistence	number	2	Trail half-life — higher values make glyphs linger longer.
enableFade	boolean	true	Fade each glyph by its current trail strength. When false, every lit glyph draws at full alpha.
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/circle-cipher.json

Usage

Import the component and drop it into a render.

demo.tsx9 lines

import { CircleCipher } from "@/components/lazy-ui/circle-cipher";

export function Demo() {
  return (
    <div className="relative h-96 w-full overflow-hidden bg-black">
      <CircleCipher color="#00ff00" />
    </div>
  );
}