DotMatrixWave

Field of dots breathing in a drifting noise wave, colored by currentColor.

DotMatrixWave generalizes the RegionSelect dot-map aesthetic into a background surface: a grid of dots whose size and brightness ride a drifting value-noise field, so broad swells roll across the grid instead of dots blinking in unison. It reads currentColor at mount (the same contract as NeonLoader and AnimatedWash), so a text-primary ancestor or the theme drives it with zero props. Pass a colors array instead for a left-to-right gradient fade; the neonFade preset is sampled from the neon.com green-to-blue type treatment. Edit the gradient stop by stop:

Install

npx shadcn@latest add https://ui.neon.com/r/dot-matrix-wave.json

Usage

import { DotMatrixWave } from "@/components/neon-ui/dot-matrix-wave";

<section className="relative isolate overflow-hidden bg-black text-primary">
  <DotMatrixWave className="absolute inset-0" />
  // Or the neon.com green-to-blue fade:
  <DotMatrixWave colors={["#68e2a0", "#63cfc6", "#63bbf3"]} />
  <div className="relative">{content}</div>
</section>;

Props