Letter Glitch
Pro
A full-area grid of flickering glyphs that settle into a readable word under the pointer.
Break the code
Move your pointer over the grid
Customize
Vignette
50ms
16px
Installation
Letter Glitch is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy letter-glitch.tsx into components/ui and run npm install motion.
Usage
import { LetterGlitch } from "@/components/ui/letter-glitch";
<section className="relative h-[600px] bg-ink-950">
<LetterGlitch reveal="PRESS START" vignette="center" />
</section>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#ff784f", "#ffc24a", "#3d3631", "#857c71"] | Hex colors the glyphs flicker between. |
| glitchSpeed | number | 50 | Milliseconds between glitch updates. Lower is faster. |
| fontSize | number | 16 | Glyph size in pixels. |
| vignette | "center" | "outer" | "none" | "center" | Darken the middle (for text on top), the edges, or nothing. |
| charset | string | A–Z, 0–9 and symbols | Characters the grid picks from. |
| reveal | string | "MEKAI GAMES" | Word that appears under the pointer as the glyphs settle. Empty turns it off. |
| revealColor | string | "#f4ede3" | Color of the revealed word. |
| className | string | — | Extra classes for the wrapper. It fills its nearest positioned parent. |
Dependencies: motion