Dot Matrix Loader

Loaders

A matrix of dots choreographed purely by per-dot animation-delay math — seven variants: diagonal wave, orbit beam, boustrophedon snake, radial pulse, cascading rain, scanline sweep, and outward spiral. Accessible busy status; holds at mid-opacity under reduced-motion.

Inspired by dot-matrix by Shawn (@zzzzshawn) — independently built, not affiliated. Attribution policy

spiral

snake

rain

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/dot-matrix-loader.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/dot-matrix-loader.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex items-end gap-10">
    <div className="flex flex-col items-center gap-3">
      <DotMatrixLoader variant="spiral" color="#8b5cf6" dotSize={7} gap={7} speed={2.4} />
      <span className="text-[10px] uppercase tracking-[0.2em] text-zinc-500">spiral</span>
    </div>
    <div className="flex flex-col items-center gap-3">
      <DotMatrixLoader variant="snake" color="#22d3ee" dotSize={7} gap={7} speed={2.8} />
      <span className="text-[10px] uppercase tracking-[0.2em] text-zinc-500">snake</span>
    </div>
    <div className="flex flex-col items-center gap-3">
      <DotMatrixLoader variant="rain" color="#ec4899" dotSize={7} gap={7} speed={2} />
      <span className="text-[10px] uppercase tracking-[0.2em] text-zinc-500">rain</span>
    </div>
  </div>

Props

DotMatrixLoaderProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
cols	number	7	Grid columns.
rows	number	7	Grid rows.
dotSize	number	6	Dot diameter (px).
gap	number	6	Gap between dots (px).
color	string	"currentColor"	Dot colour.
speed	number	1.6	Seconds for one animation cycle.
label	string	"Loading"	Accessible status label.
variant	DotMatrixVariant	"wave"	Which choreography the dots follow. Defaults to the original `"wave"`.