Matrix Grid

A canvas dot grid that reveals from an origin and rides four wave shapes — ripple, diagonal S-curve, breathing pulse, and cursor-tracked ripple. Flicker, hover/click/instant triggers, FPS cap, ResizeObserver + IntersectionObserver baked in.

Matrix grid

Build lazily.

Reveal sweeps at 0°, riding a ripple wave.

Customize

Trigger

Animate

Color 1

Color 2

Reveal angle0°

Coverage100%

Dot size3px

Gap4px

Speed1.00x

Animate cycle3.0s

Animate intensity10px

FPS cap60

Flicker

Loop animate

Usage

import { MatrixGrid } from "@/components/lazy-ui/matrix-grid";

export function Demo() {
  return (
    <div className="relative h-[420px] w-full overflow-hidden rounded-2xl bg-black">
      <MatrixGrid
        className="absolute inset-0"
        colors={["#d4d4d4", "#ffffff"]}
        dotSize={3}
        gap={4}
        revealAngle={0}
        coverage={1}
        trigger="instant"
        animate={{ name: "ripple", duration: 3, intensity: 10, loop: true }}
      />
    </div>
  );
}