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";

<MatrixGrid
  trigger="instant"
  animateName="ripple"
  color1="#d4d4d4"
  color2="#ffffff"
  revealAngle={0}
  coverage={1}
  dotSize={3}
  gap={4}
  speed={1}
  animateDuration={3}
  animateIntensity={10}
  fps={60}
  flicker={false}
  animateLoop={true}
/>