Glyph Matrix

An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.

import { createSignal, onCleanup, onMount } from 'solid-js'

import { GlyphMatrix } from '@/registry/magicui/glyph-matrix'

export function GlyphMatrixDemo() {
  // Start neutral so the first frame is visible in both themes, then adopt
  // the resolved theme color once it's known.
  const [color, setColor] = createSignal('#6B7280')

  onMount(() => {
    const root = document.documentElement
    const update = () => {
      const theme = root.dataset.theme
      if (!theme)
        return
      setColor(theme === 'dark' ? '#ffffff' : '#000000')
    }
    update()

    const observer = new MutationObserver(update)
    observer.observe(root, {
      attributes: true,
      attributeFilter: ['data-theme'],
    })

    onCleanup(() => observer.disconnect())
  })

  return (
    <div class="
      relative h-100 w-full overflow-hidden rounded-lg border border-border
      bg-background
    "
    >
      <GlyphMatrix
        glyphs="01·•+*/\\<>="
        cellSize={14}
        mutationRate={0.04}
        interval={90}
        fadeBottom={0.6}
        color={color()}
      />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @magicui-solid/glyph-matrix

bunx shadcn@latest add @magicui-solid/glyph-matrix

yarn dlx shadcn@latest add @magicui-solid/glyph-matrix

npx shadcn@latest add @magicui-solid/glyph-matrix

Usage

import { GlyphMatrix } from "@/components/magicui/glyph-matrix"

<div className="border-border bg-background h-[400px] w-full overflow-hidden rounded-lg border">
  <GlyphMatrix />
</div>

Props

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.
`class`	`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).

Notes

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.

Original:

magicui.design/docs/components/glyph-matrix