DOT MATRIX : 55+ loaders en matrice de points pour React, installables via le registre shadcn
https://dotmatrix.zzzzshawn.cloud
📌 DOT MATRIX est une bibliothèque de composants React qui propose plus de 55 indicateurs de chargement en matrice de points — des primitives expressives installables via le registre shadcn, copiées en code local et entièrement personnalisables.
Chaque loader est un composant React isolé, construit en TypeScript avec Tailwind CSS. L’installation se fait en une commande : npx shadcn@latest add @dotmatrix/. Le code source est copié directement dans le projet — pas de dépendance externe, pas de package noir. On possède le code, on le modifie, on l’adapte.
Les loaders couvrent un large spectre visuel : spirales, hélices, orbites, grilles animées, balayages, pulsations, arcs, couronnes, vortex. Les noms évoquent des mouvements — Neon Drift, Core Spiral, Twin Orbit, Prism Sweep, Echo Ring, Infinity Run, Radar Arc, Phase Orb, Liquid Vortex — et chaque animation est conçue pour rester lisible même en petite taille.
- 📦 55+ loaders open source, gratuits
- ⚛️ React + TypeScript + Tailwind CSS
- 📥 Installation via
npx shadcn@latest add @dotmatrix/ - 📝 Code copié localement, sans dépendance externe
- 🎨 Entièrement personnalisable (couleurs, taille, vitesse)
- 🎮 Playground interactif pour prévisualiser chaque loader
- 🔗 Compatible shadcn/ui
La philosophie est celle de shadcn : pas de package npm à mettre à jour, pas de breaking change subi. Chaque composant vit dans le projet, et le développeur en a le contrôle total. Les loaders s’intègrent naturellement dans une interface existante grâce aux classes Tailwind.
Le site propose un playground interactif où chaque loader est prévisualisable en temps réel avant l’installation. Les composants sont légers — aucune dépendance runtime externe, uniquement du CSS et du React.
La bibliothèque est publiée sous version v1.5.0, open source, par zzzzshawn. Le code source est disponible sur GitHub.
Concrètement, DOT MATRIX s’inscrit dans une logique de composants possédés plutôt que de dépendances importées : chaque loader vit dans le codebase du projet, s’adapte au design system existant, et ne dépend d’aucun package tiers pour fonctionner.
