A wall of monospaced characters that keep flickering into new glyphs and colors, with short glitch bursts along a row. Letters brighten around the pointer.
Reconnecting to node 12
attempt 3 of 5 · 00:14
npx shadcn@latest add https://hyperblur.dev/r/bg-glitch-letters.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-glitch-letters.tsx.
import { BgGlitchLetters } from "@/components/hyperblur/bg-glitch-letters"
<div className="relative h-96"><BgGlitchLetters /><h1 className="relative">...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| characters | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*+=<>/" | Glyphs to pick from. |
| colors | string[] | ["#ededed", "#2f7bff", "#7fb3ff", "#ff5c8a"] | The first color is used for most letters, the others for occasional highlights. |
| fontSize | number | 15 | Font size in pixels. Sets the grid cell size. |
| fontFamily | string | "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" | Font stack used to draw the letters. |
| rate | number | 1 | How often letters change. |
| radius | number | 120 | Radius in pixels of the bright area around the pointer. |
| dim | number | 0.2 | Opacity of letters at rest, from 0 to 1. |
| seed | number | 9 | Seed for the letter sequence. |