Matrix Image

Component

About

An animated image component that renders any image as a glowing LED dot-matrix display with a Matrix-style digital reveal.

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

Code

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

Usage.tsx

"use client";

import MatrixImage from "@/components/ui/matrix-image";

const settings = {
  src: "https://cdn.21st.dev/assets/stock/photo/1015.jpg",
  rows: 40,
  cols: 40,
  size: 8,
  gap: 2,
  brightness: 1.1,
  invert: false,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-black">
      <MatrixImage
        src={s.src}
        rows={s.rows}
        cols={s.cols}
        size={s.size}
        gap={s.gap}
        brightness={s.brightness}
        invert={s.invert}
        palette={{ on: "#22c55e", off: "#0a0f0a" }}
        ariaLabel="matrix image"
      />
    </div>
  );
}