Beschreibung
Dotmatrix ist eine quelloffene Sammlung von mehr als 55 Ladeanimationen im Dot-Matrix-Stil für React, TypeScript und Tailwind CSS, verteilt über eine eigene shadcn-Registry. Ein einzelner Loader lässt sich mit der shadcn-CLI installieren (npx shadcn@latest add @dotmatrix/dotm-<name>), wahlweise auch das gesamte Paket auf einmal (@dotmatrix/all). Nach der Installation liegt der Code lokal im eigenen Projekt und lässt sich wie selbst geschriebener Code umbenennen, umstylen und im Timing anpassen. Eine Playground-Ansicht auf der Website erlaubt es, Punktgröße, Geschwindigkeit, Farbpreset, Muster, Punktform, Bloom und Deckkraft live einzustellen und die passenden Props direkt zu übernehmen.
Der Funktionsumfang bleibt bewusst schmal: Dotmatrix liefert ausschließlich Loader, keine Cards, Heroes oder Formulare, und ersetzt damit kein vollständiges Design-System. Voraussetzung ist eine bestehende React-Anwendung mit konfiguriertem Tailwind CSS und einer vorhandenen components.json für die shadcn-CLI, dazu passende Pfad-Aliase im Projekt. Wer Loader-Snippets aus der Galerie kopiert statt per CLI zu installieren, richtet zuvor einmalig die gemeinsamen Laufzeit-Dateien ein (dotmatrix-core.tsx, dotmatrix-hooks.ts, dotmatrix-loader.css) und importiert deren CSS global. Die Standard-Farbpaletten der Loader sind auf Neon- und Akzentfarben ausgelegt und müssen für den eigenen Markenauftritt umgestellt werden, ebenso fehlt ein Reduced-Motion-Fallback ab Werk.
Gegenüber einem einfachen Standard-Spinner aus shadcn oder Tailwind lohnt sich Dotmatrix dort, wo eine Ladeanimation Teil der Markenwirkung sein soll, etwa bei Buttons, Route-Übergängen oder als Alternative zu einem Skeleton-Zustand. Für einen Lade-Indikator, der nur wenige hundert Millisekunden sichtbar ist, oder in Projekten mit engem Bundle-Budget beziehungsweise einer sehr zurückgenommenen visuellen Sprache ist der Aufwand einer zusätzlichen Registry-Abhängigkeit dagegen selten gerechtfertigt.
