Biblioteca com 53 componentes totalmente gratuitos para você jogar na IA
O UICapsule tem 53 componentes que trazem pra web o movimento do celular, do computador e de objeto físico: a roda de horário do iPhone, os ícones tremendo, a Dynamic Island. É tudo grátis, sem conta e sem crédito. Os que servem pra página de venda e o cuidado antes de colar.
Quando a gente pede um componente pra IA, ela devolve botão, cartão e menu, tudo certinho e tudo parecido. O movimento que dá vontade de clicar quase nunca está no pedido.
O UICapsule é uma galeria de 53 componentes em React que trazem pra web interações de fora dela: do celular, do sistema operacional e de objeto físico. É tudo grátis, sem conta, e pode ir pra projeto de cliente sem dar crédito.
O que tem lá
A grade da home mostra cada componente funcionando ao vivo, então dá pra mexer antes de escolher. O filtro Componentes separa por tipo, e o Estilos separa por visual: minimalista, geométrico, skeuomorfismo, pixel art, colorido, cyberpunk e divertido.
- 17 efeitos: orbes, fundos animados, carregamentos, a revelação de imagem que imita a IA gerando
- 15 controles: rodas, botões giratórios, controles de volume, o botão de curtir
- 9 de cartões e grades: pilhas de cartões, carrossel, parede de fotos
- 5 de navegação: a Dynamic Island, o voltar do Android, o menu de segurar
- 4 de dados: gráficos e a roda de números
- 3 páginas inteiras, entre elas um modelo de landing de IA
O critério de entrada é o que faz a galeria ser diferente. Na página Sobre, o criador, Kaiyu Hsu, escreve que um componente só ganha vaga quando traz uma interação de fora da web ou quando junta uma interação conhecida com um assunto inesperado, e que ele tem que se explicar só pelo movimento. Ele também conta que hoje monta tudo com uma IA: ele passa o briefing e segura o gosto, e a IA faz o trabalho pesado.
Os que vieram do celular
A Drum Picker é a roda de escolher horário do iPhone, com o cilindro em 3D, o giro com impulso e o encaixe em cada posição.
O Jiggle Mode é a tela de início do iPhone em modo de edição: você segura um ícone, todos tremem, e dá pra arrastar e remover. A Dynamic Island muda de forma pra música, timer, ligação, gravação e voo. E ainda tem o voltar do Android, o desbloqueio por desenho, o menu de segurar do iPhone e a janela de vídeo que você joga pro canto.
Os que servem pra página de venda e de produto
- **Stat Reel**: uma roda de frases que passa por uma linha fixa enquanto um número gigante troca do lado. Serve pra seção de resultado
- Like Button: o botão de curtir no estilo do Twitter
- Light/Dark Toggle: o botão de tema, com a lua que vira sol
- Spinner Pixel Grid: 20 animações de carregamento em grade de pontos
- Dynamic AI Composer: o campo de IA que muda de forma entre texto, voz, pensando e resposta
- Emerald: um modelo de landing de IA escura, com a pergunta sendo digitada e a resposta com fonte
Como pega o código
Embaixo da prévia de cada componente tem três larguras: celular, tablet e tela cheia. O botão Informações abre a ficha com Ver código, Baixar e Instalar pelo shadcn, que é um comando que coloca os arquivos direto no projeto, com as dependências.
E tem um atalho pra quem trabalha com agente. O site tem um servidor MCP, então a sua IA consegue buscar um componente pelo que ele faz, e uma versão da galeria inteira em texto, o llms.txt. Vale mandar a sua IA ler antes de escolher.
De graça, inclusive pra cliente
Tudo é aberto, com licença MIT, e a página Sobre diz com todas as letras: pode usar em projeto próprio e comercial, sem dar crédito. Não tem conta, não tem chave e não tem plano pago. O código da galeria inteira está no GitHub.
O limite é a base técnica: React 19, Next.js, Tailwind e Motion. Se a sua página é HTML puro, a IA vai precisar adaptar o componente ou montar aquele trecho em React. E o 3D Carousel usa WebGPU, que ainda não roda em todo navegador.
O que eu faria
Escolheria um componente só, o que conversa com a página. Página de app pede um dos que vieram do celular. Página com número forte pede a Stat Reel na seção de resultado.
Pra IA, o pedido é direto: instala esse componente pelo comando do shadcn, coloca na seção tal, troca os textos e os números de exemplo pelos da página e mantém as cores e a fonte do projeto. Se o projeto não for em React, pede pra ela dizer antes o que precisa mudar.
A galeria está aqui: uicapsule.com.