← All components
Atmospheres / background
Glyph Matrix
A quiet field of shifting symbols for agent traces, technical surfaces and ambient intelligence.
Open in studio ↗PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Adapted from Magic UI’s MIT-licensed Glyph Matrix. Original alpha distributions, random mutations, font treatment and bottom fade are retained.
- Import GlyphMatrix.tsx for the background or Demo.tsx for the agent trace scene. Advance trace is a local simulation, not an AI service.
- The canvas is decorative and hidden from assistive technology. Keep meaningful text in separate HTML. Pause, hidden pages, offscreen state and reduced motion stop ongoing frames; replay regenerates the field.
- Cell size is bounded to 8–64px, interval to 16–2000ms, glyph vocabulary to 256 code points and cell count to 20,000. Canvas dimensions cap at 2048 CSS pixels per side with DPR capped at 2.
- No Tailwind, font download or animation dependency is required.
React 19.2Modern browsers
Magic UI · MIT. See bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
glyphs | string | '01·•+*/\<>=' | Glyph vocabulary; empty input becomes a space. |
color | string | '#6B7280' | Any browser-supported CSS color; the gallery uses sage. |
mutationRate | number | 0.04 | Fraction of cells changed per tick; zero removes ongoing frames. |
style | CSSProperties | undefined | Set explicit dimensions in a parent; canvas fills its host. |
paused | boolean | false | Stop decorative motion while keeping content usable. |
replayToken | number | 0 | Change to reset decorative motion without remounting primitive children. |