sh4dcnv2 · atlas
← libraries

@dotmatrix

Dotmatrix is a focused shadcn registry of dot-matrix-style loading animations for React. Components are organized in a single Next.js app with loaders available in three geometric shapes — square, circular, and triangle — each with polished motion. Install via npx shadcn add from the public registry or copy-paste from the docs site. The project also exposes a public/r/registry.json for tooling discovery. Free and open source. Use for: adding a retro, high-contrast dot-matrix loading indicator to any React/Next.js app where a visually distinctive spinner is preferred over a generic spinner or skeleton.

60 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/registry.json
pnpm pnpm dlx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/registry.json
bun bunx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/registry.json
fetch registry curl -s https://dotmatrix.zzzzshawn.cloud/r/registry.json

Components

60 total
Neon Drift ui

Same ripple family as the icon, with a wave that sweeps from the top-right toward the bottom-left.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-1.json
Pulse Ladder ui

Clockwise snake route: starts bottom-left up column 1, jumps to column 3 down, then column 2 up, and continues the same cycle to the right.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-2.json
Core Spiral ui

A 4-dot tail spirals clockwise from the outer border toward the center of the 5x5 grid.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-3.json
Twin Orbit ui

Outer ring snake moves clockwise, middle ring snake moves anticlockwise, and the center dot stays inactive.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-4.json
Prism Sweep ui

Snake-style trail that traverses the 5x5 grid on alternating diagonals.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-5.json
Flux Columns ui

Five simultaneous snakes: columns 1/3/5 move up while columns 2/4 move down.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-6.json
Block Drop ui

Tetromino-like frames drop and stack in a 5x5 matrix, then flash a row-clear beat.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-7.json
Strobe Stack ui

Each column stacks upward on a stagger (Tetris-style), the full grid blinks twice, then columns drain downward with the same stagger.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-8.json
Glyph Pulse ui

Two synced 2×3 cells (Unicode dot order) step through clear motifs: rails, full grid, three rows, checker, horseshoes, and alternating columns.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-9.json
CRT Glide ui

A CRT-style horizontal scanline moves down the matrix; swept rows leave a soft phosphor trail with a slight column-wise warp.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-10.json
Echo Ring ui

Concentric diamond ripple with a soft secondary echo pulse per ring.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-11.json
Origin Wave ui

Ripple starts at cell (2,2) and expands outward in concentric rings.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-12.json
Core Rotor ui

Single fan blade rotating around a center hub for a clean, readable loop.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-13.json
Prism Bloom ui

A symmetric kaleidoscope bloom cycling through clean radial motifs.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-14.json
Helix Glow ui

Two mirrored strands with periodic bridges pulse like a compact DNA helix.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-15.json
Helix Core ui

A narrower helix variant that stays in the center band while preserving strand/rung rhythm.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-16.json
Half Helix ui

Single-strand helix variant that shows one side of the DNA wave.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-17.json
Sound Bars ui

Equalizer-style vertical bars that pulse like live music levels.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-18.json
Infinity Run ui

Dual counter-rotating heads trace a figure-eight with a soft crossover pulse at center.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-19.json
Mobius Run ui

A bright head and tail run around the outer ring; a dimmer second train stays half a lap behind, with inner corner flashes for the twist.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-20.json
Halo Drift ui

A circular-masked half-helix that travels diagonally from top-left to bottom-right with a bright strand and soft adjacent trail.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-1.json
Tri Orbit ui

Three luminous heads orbit the circular ring at equal offsets, creating a triad chase that never overlaps into the old snake rhythm.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-2.json
Plasma Veil ui

A plasma-like diagonal sweep and pulsing core weave through the circular mask for a distinctly different motion signature.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-3.json
Radar Arc ui

A rotating radar arm scans the circular grid with a bright beam front, soft wake, and faint perimeter ring echo.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-4.json
Nova Wheel ui

Four rotating pinwheel blades spin through the circular matrix with a glowing center and soft trailing halo.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-5.json
Phase Orb ui

An off-center orbiting energy point traces a phase-shifted loop, creating a drifting orbital glow inside the circular matrix.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-6.json
Gate Shift ui

A scanning gate flips between vertical and horizontal sweeps, producing a crisp alternating shutter rhythm in the circular grid.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-7.json
Heart Pulse ui

Pulse bursts from the center with a dual-beat cadence, sending soft concentric pressure waves across the circular matrix.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-8.json
Star Compass ui

A cardinal beacon pattern: N/E/S/W sectors pulse in sequence with a dim opposite echo, creating a clear directional rhythm in the circular mask.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-9.json
Binary Bloom ui

Binary-style opacity tiers pulse in modular steps so only a few cells peak at once while others stay low, producing a crisp coded bloom.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-10.json
Lunar Breathe ui

A rotating crescent moon silhouette: bright lunar body, soft rim, and faint directional halo moving around the circular mask.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-11.json
Arc Beacon ui

A stepped 8-direction beacon beam sweeps around the circle with a dim opposite echo and diagonal spoke accents.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-12.json
Twin Helix ui

A circular-masked twin-helix: mirrored side strands weave inward and outward with intermittent interior bridge pulses.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-13.json
Rung Shift ui

A shifting DNA ladder where a bright horizontal rung steps row-by-row while side anchors sway and leave soft ghost echoes.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-14.json
Glyph Cluster ui

Braille-inspired grouped dot motifs cycle through rails, bridges, and cross forms inside the circular mask with crisp tiered opacity.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-15.json
Rail Scan ui

A braille rail scanline sweeps row-by-row between left and right cells, with near-column accents and soft trail falloff.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-16.json
Checker Shift ui

Braille-biased checker phases alternate in stepped shifts, keeping rails pronounced while the center cross supports readability.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-17.json
Pulse Pair ui

Mirrored braille dot pairs pulse from top and bottom toward the center, with a connective center-column accent.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-18.json
Orbit Cell ui

A bright braille cell head orbits the inner ring with a dim tail while rail columns remain softly active.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-19.json
Glyph Cycle ui

Distinct braille-like glyphs cycle in sequence with previous-frame ghosting for a crisp readable symbol transition.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-circular-20.json
Core Spokes ui

A triangle-masked matrix where three spoke lines originate at the center and travel outward to each triangle edge.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-1.json
Altitude Wave ui

A soft altitude wave travels between apex and base while the center column remains gently present for shape readability.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-2.json
Corner Bounce ui

A single head bounces between triangle corners along the perimeter path with a short fading tail.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-3.json
Vertex Chase ui

Three staggered heads chase around the triangle perimeter, leaving short fading tails while all dots stay fixed in place.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-4.json
Row Sweep ui

A reflected scanline sweeps from apex to base and back, animating only opacity bands across triangle rows.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-5.json
Braille Beat ui

Triangle-masked braille dots fill down the left rail, then the right, then blink full and empty.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-6.json
Oblique Weave ui

Diagonal harmonics keyed on row + col: bright bands glide along oblique lines through the triangle with a subtle second harmonic for texture.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-7.json
Wing Metronome ui

The lower triangle splits into left and right wings that trade emphasis on a pendulum beat; apex and center pulse brightest when both sides meet in the middle.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-8.json
Corona Tier ui

Eight-connected distance rings from the heart cell: a bright corona sweeps outward through discrete tiers then back, so depth reads as concentric energy shells.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-9.json
Column Rake ui

A stepped head and tail snake the mask in strict column order (bottom to top per column, columns left to right), unlike perimeter chases or diagonal waves.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-10.json
Shelf Descent ui

Cosine bands keyed on Manhattan distance from the apex (not the center): energy reads as horizontal tiers dropping through the triangle.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-11.json
Skew Drift ui

Traveling harmonics on `row - col` so bright ridges move along NE–SW obliques, orthogonal in feel to diagonal loaders that use `row + col`.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-12.json
Serpent Zip ui

A stepped snake follows row-wise serpentine order (base left→right, then alternating row directions) with a long tail — zigzag motion, not a column path.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-13.json
Pillar Sweep ui

A smooth vertical beam sweeps grid columns 0→6; only triangle-masked dots respond so the silhouette lights one vertical slice at a time.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-14.json
Tripod Handoff ui

Brightness hands off smoothly among the three silhouette vertices (apex, left base, right base) with Manhattan falloff — a corner-to-corner orbit, not a mod-3 …

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-15.json
Updraft ui

A V-shaped thermal ridge moves through row-and-column space: brightness peaks along an inverted V so the front climbs the two lower flanks toward the apex, not…

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-16.json
Infinity Trace ui

A stepped head and tail follow a single 10-cell path: left base up to the apex, down the right rim, then through (4,4) → center → (4,2) for a crossing loop.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-17.json
Hollow Shell ui

The heart cell stays locked dim while every other triangle dot breathes together in phase — a hollow, ring-like pulse.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-18.json
Pivot Ray ui

A Gaussian wedge of brightness rotates around the heart cell using each dot’s polar angle — a clear pivoting searchlight, not a cosine-product moiré field.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-19.json
Twin Perimeter ui

Two stepped heads chase the outer perimeter path half a lap apart, each with its own tail; the heart cell stays quietly dim off the loop.

npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-triangle-20.json