Glyph Matrix

Backgrounds 71

About

An animated canvas grid of subtly shifting monospace glyphs with a bottom fade, used as a theme-aware decorative background texture.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glyph Matrix to your project and fits it to your theme.

Code

How Glyph Matrix is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { GlyphMatrix } from "@/components/ui/glyph-matrix";
import { useTheme } from "next-themes";
import * as React from "react";

export default function GlyphMatrixDemo() {
  const { resolvedTheme } = useTheme();
  const [color, setColor] = React.useState("#6B7280");

  React.useEffect(() => {
    if (!resolvedTheme) return;
    setColor(resolvedTheme === "dark" ? "#ffffff" : "#000000");
  }, [resolvedTheme]);

  return (
    <div className="border-border bg-background relative h-[400px] w-full overflow-hidden rounded-lg border">
      <GlyphMatrix
        glyphs="01.+*/<>="
        cellSize={14}
        mutationRate={0.04}
        interval={90}
        fadeBottom={0.6}
        color={color}
      />
    </div>
  );
}