Uma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js, instalável pelo registro do shadcn ou copiando o código-fonte direto da documentação.
O que faz
Dotmatrix é uma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js. Os componentes podem ser adicionados via instalação por um registro no estilo shadcn ou copiados diretamente do site de documentação. O projeto é um único app Next.js onde os componentes de loader e o registro construído são servidos juntos.
Dotmatrix é uma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js. Ela oferece dois caminhos de uso: instalar por um registro no estilo shadcn (o caminho principal) ou copiar o código-fonte diretamente da documentação. O projeto é um único app Next.js onde os componentes de loader ficam junto com um registro já construído (registry.json e public/r/), portanto o mesmo código-base serve tanto para a galeria de documentação quanto para os componentes instaláveis. Um site de documentação ao vivo está hospedado em dotmatrix.zzzzshawn.cloud, e o registro pode ser publicado com uma homepage configurável e listado no diretório oficial de registros do shadcn.
Recursos
Notas de campo
Revisado em Jun 21, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
Custo
Gratuito e de código aberto.
Ferramentas usadas
Uma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js, instalável via um registro no estilo shadcn ou copiando o código-fonte da documentação.
Instale pelo registro do shadcn (o caminho principal), ou copie o código-fonte do componente diretamente da documentação.
A galeria de documentação ao vivo está hospedada em dotmatrix.zzzzshawn.cloud.
shawn.@zzzzshawn
“Introducing dotmatrix v1.5.0 +10 new hex loaders New playground to tweak loaders (uses dialkit by @joshpuckett) bloom and halo effects added Cheers”
jQueryScript@jqueryscript
“Dotmatrix Loader Library: 55+ free and open-source loaders, built with React, TypeScript, Tailwind CSS, and shadcn. Install one, copy the code, and make it yours.”
Uma coleção de spinners, loaders e animações de carregamento para aplicações web modernas, construída com React, Next.js, shadcn/ui, Tailwind CSS e Framer Motion.
Best for Adicionar spinners e animações de carregamento rapidamente78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overheadUma biblioteca de componentes glassmórficos inspirada na Apple, construída sobre shadcn/ui e Base UI, com componentes estilizados em vidro prontos para uso (alert, button, card, calendar, popover, sidebar e mais), instaláveis via o registro do shadcn.
Best for Adicionar UI com glassmorphism a um projeto shadcn/uiUma galeria leve de animações de carregamento baseadas em curvas matemáticas - curvas rosa, figuras de Lissajous, hipotrocoides, cardioides e muito mais - construída com HTML, CSS e JavaScript puros, com notas de fórmulas e código copiável.
Best for Animações de carregamento distintas e orientadas por matemáticashadcn/ui, open-source, copy-owned UI components for developers building their own design system with full code control.
Best for Teams building a custom design system who need full ownership of component source codeUm efeito animado de metal líquido em WebGL para React. Envolva um botão, chip ou ícone para adicionar um anel metálico em tempo real, com presets, temas, intensidade ajustável e reflexo de proximidade opcional em elementos vizinhos.
Best for Um destaque WebGL metálico premium em botões ou ícones principais