Matrix Dot Loader

Sixteen dots light up column by column, left to right.

Loading preview

Installation

npx shadcn@latest add @loomui/matrix-dot-loader

Usage

import { MatrixDotLoader } from "@/components/ui/matrix-dot-loader"

<MatrixDotLoader active={isLoading} />

How it works

Each dot's delay is just its column index, so all four dots in a column pulse together and the wave reads as a clean left-to-right sweep instead of sixteen hand-picked timings.

MVP scope

This ships one pattern: column by column, left to right. A pattern prop that switches the delay formula to row or to (row + col) for a diagonal wave is the natural next step, without touching the animation itself.

Props

Prop	Type	Default	Description
`active`	`boolean`	`false`	Runs the wave. Off holds all dots dim.
`duration`	`number`	`1200`	Milliseconds the wave takes to cross once.
`className`	`string`	-	Merged onto the grid.

Any other <div> prop is forwarded.