Letter Glitch

A highly-optimized canvas component that renders a dense grid of randomly fluctuating letters, smoothly transitioning between specified colors. Includes built-in center and edge vignette effects.

Live Preview

System Active

A purely canvas-rendered procedural glitch matrix.

Installation

CLI

npx @modus-ui/cli add letter-glitch

Manual

Copy the code from the component tab.
Create a file at components/ui/letter-glitch.tsx.
Paste the code.

Usage

tsx

import { LetterGlitch } from "@/components/ui/letter-glitch";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full">
      <LetterGlitch
        glitchSpeed={50}
        centerVignette={true}
        outerVignette={true}
        smooth={true}
        glitchColors={["hsl(var(--primary))", "hsl(var(--primary))", "hsl(var(--primary))"]}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`glitchColors`	`string[]`	`["hsl(var(--primary))", "hsl(var(--primary))", "hsl(var(--primary))"]`	Colours the letters cycle through.
`glitchSpeed`	`number`	`50`	Milliseconds between glitch updates.
`centerVignette`	`boolean`	`true`	Darkens the centre with a radial vignette.
`outerVignette`	`boolean`	`true`	Darkens the edges with a radial vignette.
`smooth`	`boolean`	`true`	Fades between colours instead of switching instantly.
`lightMode`	`boolean`	`false`	Uses light-theme vignettes.
`backgroundColor`	`string`	-	Canvas background colour.
`characters`	`string`	`"ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$&*()-_+=/[]{};:<>.,0123456789"`	Characters the grid is drawn from.