Getting Started
Templates
Components
Special Effects
Animations
Text Animations
Backgrounds
import { GlyphMatrix } from "@/registry/magicui/glyph-matrix"<div className="border-border bg-background h-[400px] w-full overflow-hidden rounded-lg border">
<GlyphMatrix />
</div>| Prop | Type | Default | Description |
|---|---|---|---|
glyphs | string | "01·•+*/\\<>=" | Characters to randomly pick from. |
cellSize | number | 14 | Cell size in pixels and font size. |
mutationRate | number | 0.04 | Probability a cell mutates each tick. |
interval | number | 90 | Tick interval in milliseconds. |
className | string | - | Classes applied to the canvas element. |
fadeBottom | number | 0.6 | Fade strength toward the bottom of the grid. |
color | string | "#6B7280" | Glyph color (any CSS color). |
The component draws with the color prop, which accepts any CSS color (hex, rgb(), hsl(), oklch(), ...) and is normalized through canvas before drawing. For light/dark support, drive color from the consumer — e.g. with next-themes as shown in the demo above.