Falling columns of glyphs on three depth planes, with bright flickering heads, long fading tails and a slow scan line that lifts the glyphs it crosses. Choose hex, binary, block or symbol glyphs, or pass your own.
0 threats in 2.1M events
Run a full scan
npx shadcn@latest add https://hyperblur.dev/r/bg-glyph-rain.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-glyph-rain.tsx.
import { BgGlyphRain } from "@/components/hyperblur/bg-glyph-rain"
<div className="relative h-96"><BgGlyphRain variant="binary"><h1>Zero trust</h1></BgGlyphRain></div>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "hex" | "binary" | "blocks" | "symbols" | "hex" | Built-in glyph set. |
| chars | string | Custom glyph set. Overrides variant when set. | |
| color | string | "#2f7bff" | Color of the tails. Hex color. |
| accent | string | "#e6f0ff" | Color of the leading glyph in each column. Hex color. |
| background | string | "#04060b" | Screen color. Hex color. |
| fontSize | number | 14 | Glyph size of the nearest plane in pixels. |
| density | number | 1 | Share of columns that carry a stream. |
| speed | number | 1 | Fall speed. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |