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
Matrix grid

Build lazily.

Reveal sweeps at 0°, riding a ripple wave.

0px

Customize

Edit props; preview updates instantly.

Customize
Trigger
Animate
Color 1
Color 2
Reveal angle
0°
Coverage
100%
Dot size
3px
Gap
4px
Speed
1.00x
Animate cycle
3.0s
Animate intensity
10px
FPS cap
60

Props

Props accepted by MatrixGrid.

PropTypeDefaultDescription
colorsstring[]["#d4d4d4"]Pool of CSS colors sampled randomly per dot. Pass 1 for a flat field, 2+ for a salt-and-pepper mix.
dotSizenumber3Side length of each dot in CSS pixels.
gapnumber3Empty space between dots, in CSS pixels.
coveragenumber1Fraction (0..1) of the canvas covered by dots, measured along `revealAngle`. `coverage=0.5` + `revealAngle=180` fills only the lower half. Edge softens automatically.
revealAnglenumber0Direction the reveal sweep originates from, in degrees clockwise from the top. 0 = top, 90 = right, 180 = bottom, 270 = left. Each dot fades in inside its own small window along the sweep, eased out so the front feels smooth.
trigger"instant" | "mount" | "hover" | "click""instant"When the reveal animation runs. `mount` plays once on load; `hover`/`click` toggle and play in reverse on release.
speednumber1Reveal speed multiplier — higher values shorten the cubic ease-in.
flickerbooleanfalseSoft per-dot opacity oscillation between 60% and 100% of base alpha.
animateMatrixAnimateConfig | undefinedundefinedOptional animate effect. `ripple` travels concentric rings from center; `diagonal` sweeps a Gaussian band along the canvas diagonal; `sparkle` twinkles each dot on its own clock (continuous, ignores `loop` and `delay`). Wave amplitudes ease in and out per cycle so nothing pops.
fpsnumber60Render frame-rate cap. Lower this for very large grids or to save battery on idle pages.
classNamestring—Extra class names merged onto the root container.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/matrix-grid.json

Usage

Import the component and drop it into a render.

demo.tsx18 lines
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>
  );
}

Credits

once-ui MatrixFxOriginal concept — reveal-from-origin dot canvas with ripple/wave displacement. This rewrite slims the render to a single path, swaps a paramsRef for prop-driven restarts, and adds the cursor + pulse shapes.