Biblioteca Gratuita de Componentes para suas Páginas e Sistemas

Abri o OriginKit e medi tudo: mais de 250 componentes, 48 seções, 11 templates, limites do beta e cinco jeitos de instalar — inclusive por MCP.

Eu abri a plataforma hoje pra contar quantos componentes ela mostrava.

Às 10h38 o catálogo mostrava 249.

Às 10h40, 251.

No print final, 258.

Eu não vou fingir que sei o mecanismo. Pode ser publicação nova, cache ou rollout entre servidores. O fato verificado é outro: a contagem exibida mudou durante a própria checagem.

Por isso eu não vou te dar um número fechado nessa newsletter. Vou dizer mais de 250 e você pode encontrar outro número quando abrir. É esse tipo de biblioteca.

O nome é OriginKit: originkit.dev. Componentes animados pra site moderno. De graça no beta. E com um caminho de uso que quase ninguém está mostrando.

Vamos por partes.

O que tem lá dentro (medido hoje)

O catálogo é dividido em nove categorias: Text, Button, Border, Image, Image Gallery, Cursor, Interactive Elements, Animations e Background.

Não é uma lista de botão com hover. É a camada visual inteira de uma landing page: fundo animado, cursor customizado, efeito de texto, galeria, borda que reage.

Agora a parte que muda o cálculo de tempo.

Além dos componentes soltos, existem 48 seções prontas. A distribuição na checagem de hoje: 37 Hero, 4 Features, 3 Pricing, 2 Call to action e 2 Footer.

Repara na assimetria. 37 heroes contra 3 pricings.

Isso te diz exatamente onde a biblioteca é forte: o topo da página. A dobra que precisa parar o scroll. O resto da LP você continua montando — e continua sendo copy, não efeito.

E tem mais uma camada acima: 11 templates completos, com 3 a 9 páginas cada. Todos marcados FREE no catálogo de hoje.

Repete comigo: no catálogo de hoje. A plataforma está em beta. Preço, limite e disponibilidade podem mudar. Se você quer usar, usa agora e salva o que baixou.

O detalhe que separa isso de um Pinterest de componentes

Biblioteca bonita não é notícia. Tem dez.

O que me fez parar foi o preview.

Cada componente abre rodando ao vivo, com painel de controle do lado. Peguei o Black Hole como caso porque ele deixa a diferença impossível de ignorar.

Os controles expostos nele: center on/off, background, orbit radius, particle count, particle size, speed, trail, tilt, sideways tilt, gravity inflow e paleta de cores.

Onze parâmetros. Você mexe e ele responde na hora.

Pensa comigo: a diferença entre uma biblioteca de componente e um catálogo de screenshot é essa.

Tem uma trava importante: quando você tenta transformar a customização em uma instância salva, a plataforma pede login. O preview deixa testar. Salvar a versão personalizada exige conta.

E o mesmo Black Hole aparece dentro de seções prontas do catálogo. Então dá pra pegar o efeito isolado ou pegar ele já montado numa hero com título e botão.

Cinco jeitos de tirar o componente de lá

Aqui é onde a maioria das newsletters vai parar e dizer "copia e cola". Não é só isso.

Quando você clica em Copy/Get this component, a plataforma abre cinco fluxos:

• CLI — comando de terminal
• Code — o código pra colar
• Framer — fonte pronta para colar como Code Component
• MCP — a biblioteca conectada na sua IA
• AI Prompt — um prompt pronto pra você jogar no agente

Cinco fluxos não significa cinco caminhos que servem pra você. Significa três perfis diferentes. Vou separar.

Caminho A — Sem código, no Framer

Pra quem: você monta site no Framer, não escreve código e quer o efeito na página hoje.

O OriginKit é Framer-first por especificação. Não é adaptação, é a casa dele. O componente vem preparado para o fluxo Copy to Framer.

Passo:

• Abre o componente na plataforma
• Ajusta os controles do preview até ficar do jeito que você quer
• Clica em Framer e copia
• Cola no seu projeto Framer

Sem terminal, sem dependência, sem build. É o caminho de menor atrito que existe aqui, e é onde a chance de dar errado é a menor.

Caminho B — CLI ou Code, no seu projeto

Pra quem: você tem um projeto React, Vite ou Next.js rodando e quer o componente como arquivo seu.

O comando oficial:

npx originkit@latest add <compid>

Também roda com bun, yarn e pnpm.

O que acontece quando você executa: os arquivos caem em components/originkit ou src/components/originkit, os componentes de UI vão para a subpasta .../ui, e as dependências são instaladas. Presets e instâncias específicas você escolhe por flag.

E tem um comportamento por stack que vale saber antes:

• framer — vem como módulo, pronto pro Copy to Framer
• react/vite — os bindings de Framer são removidos
• nextjs — equivalente React, com "use client" no topo

Ou seja: a adaptação existe e é oficial. Mas ela é uma adaptação. Framer é o alvo primário e os outros stacks são conversões.

Tradução prática: não trate isso como zero risco. É um componente visual pesado, adaptado de outro alvo, entrando num projeto seu. Pode funcionar direto ou exigir ajuste. Teste antes de publicar. Já volto nisso.

Se você não quer o CLI, o fluxo Code te dá o código direto pra colar. Mesma coisa, controle manual.

Caminho C — MCP, com a IA fazendo o trabalho

Pra quem: você já usa Claude Code, Cursor ou outro agente e quer a biblioteca inteira como vocabulário da máquina.

Esse é o caminho que quase ninguém está mostrando, e é o que mais me interessa.

MCP é o protocolo que conecta a IA em ferramentas externas. Quando você conecta o OriginKit por MCP, você para de navegar no catálogo. Você pede: "usa um hero com fundo de partículas e um pricing animado". O agente busca, escolhe e escreve.

A documentação oficial fica em originkit.dev/integrations.

O endpoint é https://mcp.originkit.dev/mcp.

E ele expõe quatro ferramentas: list_components, get_component, search e fetch.

A autenticação muda conforme onde você conecta, e isso é importante:

Claude Web, Desktop, Mobile e ChatGPT usam custom connector com OAuth pelo próprio endpoint. Você autoriza e pronto — não precisa gerar chave manual.

Editores de código exigem API key.

No Claude Code, o comando oficial é:

claude mcp add originkit https://mcp.originkit.dev/mcp --transport http --header "Authorization: Bearer <your-api-key>" --scope user

No Cursor e em IDEs que usam arquivo de configuração:

{"mcpServers":{"originkit":{"url":"https://mcp.originkit.dev/mcp","headers":{"Authorization":"Bearer <your-api-key>"}}}}

Uma coisa que eu preciso ser honesto com você: na checagem de hoje eu documentei o fluxo oficial, não a conexão autenticada. Sem API key ativa, não tem como afirmar que o servidor respondeu no meu ambiente. O caminho está mapeado, o endpoint e as quatro ferramentas estão confirmados na documentação oficial — a demonstração ao vivo fica pra quando a chave estiver na mão.

Prefiro te contar isso do que fingir teste que não aconteceu.

O que ninguém te conta

Aqui é a parte que separa uma indicação de uma propaganda.

1. Beta é beta. A plataforma está em beta. Catálogo muda, limite muda, o que é FREE hoje pode não ser FREE depois. Não construa processo de agência em cima de algo que ainda não tem contrato.

2. Tem quota, e ela é bem concreta. Os limites oficiais do beta:

• Componentes: 10/dia · 25/semana
• Seções: 5/dia · 10/semana
• Templates: 3/dia · 7/semana

E o detalhe que pega gente desprevenida: a quota é compartilhada entre os gets do MCP e as cópias por Code e Framer. Não são baldes separados.

A boa notícia: copiar o comando ou o prompt de IA no site não consome. O que consome é executar o fetch ou o add. Então dá pra montar sua lista de desejos sem queimar cota.

3. Editor de código precisa de API key. Se o seu plano era conectar no Cursor em trinta segundos, não é trinta segundos. É gerar chave, colar no config, reiniciar.

4. Componente visual pesado é decisão de performance, não de gosto. Um Black Hole com contagem alta de partículas é GPU rodando no navegador de alguém. Antes de subir, teste quatro coisas: performance real, mobile, prefers-reduced-motion e acessibilidade. Não é firula de dev — é a diferença entre uma hero que impressiona e uma hero que trava no celular do lead.

5. Bonito não é conversão. Isso é o mais importante e o mais ignorado. Efeito animado não substitui headline, não substitui hierarquia de informação e não substitui oferta. Se o efeito piora carregamento ou distrai do CTA, uma página mais simples pode converter melhor.

6. Não encha a LP de efeito. Minha regra pra começar seria um componente por página. Eu só colocaria o segundo se ele tivesse função clara. Efeito sem função vira ruído e o olho do lead não sabe onde parar.

Funciona? Funciona. Mas tem limites. E quem te vende sem os limites está vendendo, não ensinando.

O que eu faria se fosse você hoje

Não abra a plataforma pra montar um site novo. Você vai passar duas horas olhando efeito bonito e não vai entregar nada.

Faz assim:

• Escolhe uma página real que já existe e já recebe tráfego
• Escolhe um componente — de preferência na hero, que é onde a biblioteca é mais forte
• Calibra no preview antes de copiar
• Instala pelo caminho que combina com você: Framer se você não escreve código, CLI se você tem projeto, MCP se você já opera IA
• Testa no celular antes de qualquer outra coisa
• Compara. Mesmo conteúdo, mesma oferta, a única diferença sendo o movimento

Um componente. Uma página. Um teste. É assim que você descobre se isso serve pro seu negócio ou se é só coisa bonita na tela.

Se você tá lendo isso aqui na newsletter e quer o caminho pronto, me manda KIT no direct do Instagram. Eu respondo com o link da biblioteca e o passo de conexão do MCP — o comando, o config e onde gerar a chave.

Não é automação. Sou eu respondendo. Então pode demorar algumas horas, mas chega.

E se você instalar antes de eu responder, melhor ainda. Me manda o print da página com o componente rodando. Eu quero ver.

Valeu. Nos vemos no próximo.

— Vini