Glyph Matrix

An animated grid of subtly shifting glyphs with fade effect and theme support.

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/glyph-matrix

npx layro-cli add @magicuidesign/glyph-matrix

npx layro-cli add @magicuidesign/glyph-matrix

bunx layro-cli add @magicuidesign/glyph-matrix

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useEffect, useRef } from "react"

import { cn } from "@/lib/utils"

interface GlyphMatrixProps extends React.HTMLAttributes<HTMLCanvasElement> {
  /** Characters to randomly pick from */
  glyphs?: string
  /** Cell size in px (also font size) */
  cellSize?: number
  /** Probability (0-1) a cell mutates each tick */
  mutationRate?: number
  /** Tick interval in ms */