Browse components
Letter Glitch
A full grid of monospace glyphs that keep swapping characters and colors, framed by a soft vignette. Canvas 2D.
Installation
npx shadcn@latest add @glint-ui/letter-glitchFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/letter-glitch.json
Usage
import { LetterGlitch } from "@/components/ui/letter-glitch";
<div className="relative h-96">
<LetterGlitch colors={["#1f3b2f", "#4ade80", "#38bdf8"]} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#1f3b2f","#4ade80","#38bdf8","#a78bfa"] | Palette the glyphs flicker between (hex). |
| background | string | "#05070a" | Background and vignette color. |
| speed | number | 1 | Glitch rate multiplier. |
| fontSize | number | 16 | Glyph size in px. |
| characters | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*<>[]{}/\\=+?;:" | Characters to pick from. |
| smooth | boolean | true | Fade colors instead of snapping. |
| vignette | boolean | true | Darken the edges. |
| className | string | — | Extra classes for the root element. |