Mais de 168 componentes animados de graça. Pra jogar na tua IA.
React Bits. O filtro hoje marca 171. Home 170+, free forever. Pro existe. Eu fico no gratuito.
Tem uma plataforma que te entrega um layout melhor, mais dinâmico e animado. Completamente de graça.
Você personaliza do jeito que quiser. Velocidade. Tamanho. Copia o código. Cola na tua IA.
Dentro dessa biblioteca você encontra mais de 168 componentes animados gratuitos pra copiar e jogar na tua IA na hora de construir sistema ou página.
O site é o reactbits.dev. Biblioteca de componentes animados. Não é design system. Não é shadcn. É a prateleira do que se mexe: fundo, texto, cursor, dock, card.
O tamanho, lido no menu
Eu e a IA lemos o menu da documentação hoje, 10 de setembro. Quatro gavetas. Soma 171.
- 56 fundos. Aurora, Balatro, Ballpit, Silk, Plasma, Hyperspeed. É a gaveta que mais muda a cara da primeira dobra.
- 45 componentes de interface. Dock, Drift Wall, Option Wheel, Magic Bento, Carousel, Profile Card.
- 38 animações. Metallic Paint, Splash Cursor, Glow Cursor, Antigravity, Pixel Trail.
- 32 animações de texto. Particle Text, Shiny Text, Curved Loop, Masked Heading, Split Flap.
O selo do GitHub na home: 47,1 mil. A API, no mesmo dia: 47.001.
Tem a versão Pro. No card da ficha, hoje: 150 Components, 280 Blocks, 300 App UI, 15 Templates, 20 Agent Skills. No menu, Templates e Skills aparecem com 1 Free. Até hoje eu só aproveitei o gratuito. Já está de bom tamanho. E com certeza é uma das melhores que eu tenho salva.
Três jeitos de sair da ficha
Não precisa escolher um só. Na ficha você faz os três.
- Copia o prompt. O botão é Copy for AI. Briefing da peça, pronto pra colar.
- Copia o comando. Na home, o exemplo do Aurora:
npx shadcn@latest add @react-bits/Aurora-TS-TW. - Pega o código. Aba Code. JS ou TS. CSS ou Tailwind. Os quatro sabores estão lá.
Você não instala a biblioteca inteira. Entra na ficha. Pega um. Sai. Manda a IA ler a documentação. Não redesenha.
Texto. Você mexe e já copia.
Tem uma infinidade de elemento de texto. Velocidade. Curvatura. Cor. O controle fica embaixo do preview. Você testa, personaliza, copia o código com tudo no lugar.
O Particle Text é o que eu mostro no vídeo. A letra nasce de partícula. Você troca a palavra. Troca a cor. Não deixa React Bits escrito na tua página.
Os fundos que eu mais abro
Se você vai usar um, usa um fundo. Headline na frente. Contraste. Quem pediu menos movimento vê o fundo parado.
- [Aurora](https://reactbits.dev/backgrounds/aurora). Luz do norte. Três cores. Speed e blend. Primeira dobra de oferta, com texto na frente.
- [Balatro](https://reactbits.dev/backgrounds/balatro). Carta embaralhando. Ninguém mais tem esse. Pesa. Um por página.
- [Ballpit](https://reactbits.dev/backgrounds/ballpit). Física. Desktop. Celular sofre.
O que se mexe no cursor. E o Dock.
Metallic Paint. Splash Cursor. Dock. Um desses por dobra. Não os três juntos.
Três estúdios. Grátis.
- [Background Studio](https://reactbits.dev/tools/background-studio). Você monta o fundo nos controles e exporta código, imagem ou vídeo de 10s.
- Shape Magic. Forma com canto interno arredondado. SVG, PNG, React ou clip-path.
- Texture Lab. Ruído, dither, ASCII na foto. Exporta o resultado.
Onde pisar
- A própria doc pede menos. Mais de 2 ou 3 componentes na mesma página sobrecarrega. Um efeito grande por dobra.
- Efeito pesa. Vários usam placa de vídeo. Testa no celular mais simples do seu público. Pede pra IA otimizar o peso.
- Quem pediu menos movimento vê parado. Fundo atrás do texto, não na frente.
- O conteúdo é o seu. A palavra da ficha, o ícone, a foto de exemplo: troca.
- Não substitui tabela, formulário, seletor de data. É vitrine. Landing, portfólio, primeira dobra.
- Pro existe. Se a ficha tiver selo Pro, não pede pra clonar. Pergunta.
Link chega?
Pra instalar o componente, a URL da ficha chega. A IA abre, lê, instala. Se o preview da ficha já mostra o movimento, o link basta.
Manda print quando o que importa é o teu conteúdo em cima do efeito (headline, foto, cor da marca). Manda vídeo ou GIF quando o que importa é o loop e a ficha não abriu o preview inteiro.
React Bits. Componente: [Particle Text / Aurora / Balatro / Dock / o que eu escolher].
Ficha: https://reactbits.dev/text-animations/particle-text
Home: https://reactbits.dev/
Abre a ficha. Lê a documentação. Instala no meu projeto do jeito da doc (Copy for AI, CLI @react-bits/…, ou o código da aba Code).
Não redesenha o efeito. Não troca por outro.
Antes de encaixar, extrai da ficha:
Layout. Onde a peça mora. Tamanho. O que fica atrás e o que fica na frente.
Motion. O que se mexe, loop ou hover, o que fica parado.
Cor. O que é do exemplo e o que vem do meu token.
Tipo. Se o componente traz texto, usa a minha fonte e a minha palavra.
Densidade. Gap, velocidade, tamanho de partícula.
O que NÃO copiar: texto de exemplo, logo React Bits, ícone da ficha, foto de demo.
O conteúdo é o que eu mandar: [a palavra / a foto anexada / o ícone].
Onde entra: [hero / título / fundo]. Headline e CTA ficam NA FRENTE, com contraste.
O que eu quero personalizar: [cor / velocidade / texto]. O resto fica fiel.
Quem pediu menos movimento vê a peça parada.
Carrega o efeito só quando a seção entrar na tela.
Otimiza pro menor peso possível.
Se faltar pacote, lê a doc e instala. No fim me mostra o arquivo.Resumindo
Mais de 168 peças animadas, de graça, pra colar na tua IA. O filtro hoje marca 171. Pro existe. Eu fico no gratuito.
O prompt está acima. Abre a ficha. Cola na tua IA. Bora testar.