Dot Matrix

Dot Matrix is a shadcn-registry loader collection: 55+ React/Tailwind dot-matrix loading components that install as local source code rather than as a runtime package.

What It Is

Dot Matrix is a React component library of dot-matrix loaders built with TypeScript, Tailwind CSS, and shadcn registry conventions. The public site positions it as "55+ free and open-source loaders" where the install flow is npx shadcn@latest add @dotmatrix/dotm-square-3; the installed loader becomes local application code that can be renamed, restyled, and retimed. Source: Dot Matrix site and usage docs, 2026-07-03

The reviewed local video thumbnail shows the same product surface: a black docs/gallery page with the headline "Dot matrix loaders for every app," a npx shadcn@latest add @dotmatrix/dotm-square-3 command, and a grid of loader cards. Shawn's launch post adds the v1.5.0 deltas: 10 hex loaders, a playground for tuning loaders using DialKit, plus bloom and halo effects. Source: X/@zzzzshawn and local artifact review, 2026-07-03

Routing

Use Dot Matrix when a product wants source-owned animated loaders with a dot-matrix aesthetic and already has shadcn/Tailwind infrastructure. It belongs next to Frontend and Design Skills and Spinners Collection, but it is not the default loading system: dense product UI should still use skeletons, inline status text, and compact typographic spinners unless the loader itself is part of the brand moment.

It is also a concrete Source-Code Registry Pattern example. The registry entry lives under @dotmatrix, resolves items through https://dotmatrix.zzzzshawn.cloud/r/{name}.json, and includes an @dotmatrix/all bulk install route. There is no public npm package for individual loader items; npm search only shows @dotmatrix/core@0.1.0, while the registry and GitHub repo are the source authorities. Source: Dot Matrix registry JSON, npm registry, 2026-07-03

Source Snapshot

Current source snapshot checked 2026-07-03:

• Site: https://dotmatrix.zzzzshawn.cloud/, marked @dotmatrix - v1.5.0.
• Registry: https://dotmatrix.zzzzshawn.cloud/r/registry.json.
• Repo: zzzzshawn/matrix, HEAD e30b80a9c5e6fe388ecbbbac15abfd14f24d0dd3, default branch main.
• GitHub API: 472 stars, 24 forks, no SPDX license assertion.
• Tags: no public Git tags returned by git ls-remote.
• npm: no @dotmatrix/dotm-square-3 package; @dotmatrix/core@0.1.0 exists as a shared primitive package.

---

Timeline

• 2026-05-03 | Shawn announced Dot Matrix v1.5.0: 10 new hex loaders, a playground using DialKit, and bloom/halo effects. Source: X/@zzzzshawn, 2026-05-03
• 2026-07-03 | Deep-reviewed the bookmark, local thumbnail, primary site, registry JSON, GitHub repo, and npm surface; promoted Dot Matrix into a dedicated tool page and linked it to the loading-state design system. Source: raw/x-bookmarks/enriched/2050856370136867144.json