@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.
Install this registry
npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/registry.json pnpm dlx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/registry.json bunx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/registry.json curl -s https://dotmatrix.zzzzshawn.cloud/r/registry.json Components
60 totalSame 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 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 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 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 Snake-style trail that traverses the 5x5 grid on alternating diagonals.
npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-5.json 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 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 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 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 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 Concentric diamond ripple with a soft secondary echo pulse per ring.
npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-11.json 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 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 A symmetric kaleidoscope bloom cycling through clean radial motifs.
npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-14.json 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 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 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 Equalizer-style vertical bars that pulse like live music levels.
npx shadcn@latest add https://dotmatrix.zzzzshawn.cloud/r/dotm-square-18.json 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 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 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 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 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 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 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 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 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 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 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-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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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