Thinking Orbs
Yogesh (yogesharc) · Programação
Thinking Orbs é uma biblioteca de componentes React de código aberto com orbes animados que mostram o que um agente de IA está fazendo em cada etapa.
Sobre Thinking Orbs
About
O que é o Thinking Orbs
Thinking Orbs é uma biblioteca de componentes React que desenha orbes animados para interfaces de agentes de IA. Cada orbe é uma esfera de pontos, e cada estado muda o jeito como esses pontos se movem. Enquanto o assistente raciocina, uma faísca percorre a superfície. Quando ele busca na web, uma lente pula de um ponto a outro. Se tenta de novo depois de um erro, o orbe gira e volta enrolando.
A biblioteca existe porque interfaces de agentes passam muito tempo em um estado genérico de trabalho. Um spinner não diz nada sobre o que o modelo está fazendo, e a pessoa não consegue diferenciar uma resposta lenta de uma requisição travada. Este orbe animado transforma esse tempo morto em um sinal legível, em um tamanho que cabe ao lado de uma linha de texto.
Yogesh publica o projeto como pacote de código aberto sob licença MIT. O orbe de React precisa apenas de React, a versão em JavaScript puro não precisa de nada e o pacote SwiftUI atende iOS 17 e macOS 14. Formas e renders além do padrão chegam como módulos separados, então cada projeto empacota só o que importa.
Vale conhecer os limites antes de instalar. O componente anima, mas não acompanha o seu agente: você decide qual estado mostrar e quando trocar, normalmente a partir do seu próprio ciclo de requisições. Formas e renders continuam exclusivos da web, e a versão SwiftUI aceita menos opções.
Como começar
- Instale o pacote com npm, pnpm, yarn ou bun: npm i @yogesharc/thinking-orbs.
- Importe Orb e passe um estado, como reasoning ou searching.
- Ajuste size, speed, density e tilt para o orbe combinar com o seu texto, e adicione label para leitores de tela.
- Importe uma forma ou um render dos módulos opcionais para mudar o formato ou a maneira de desenhar os pontos.
- Ou copie o código para components/ com o comando do shadcn e edite como um arquivo seu.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Thinking Orbs.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores React que criam chats ou produtos com agentes
- Engenheiros de frontend em times pequenos sem designer
- Criadores independentes com um projeto paralelo
Tarefas
- Separar raciocínio de busca na web em um chat com streaming
- Mostrar trabalho longo em segundo plano, como indexação ou uma tarefa no estilo servidor de desenvolvimento
- Avisar sobre nova tentativa ou limite de uso
- Preencher um painel vazio enquanto uma chamada de ferramenta retorna
Cenários
- Um app de chat que recebe tokens em streaming e precisa de um status ao lado do cabeçalho da resposta.
- Um agente de código ou plugin de editor em que as chamadas de ferramenta se encadeiam e cada uma pede um sinal próprio.
- Um app SwiftUI para iPhone ou Mac que quer a mesma linguagem visual da versão web.
Principais recursos
Um indicador de status para cada ação do agente
A biblioteca cobre nove estados pensados para o ciclo de um agente: trabalho em andamento, raciocínio e busca no topo, depois tarefas em segundo plano, controle do navegador, novas tentativas, compactação de contexto, espera por limite de uso e inatividade. A maioria tem variantes nomeadas, então gyro balança um orbe de trabalho e lighthouse varre com um feixe de busca.
Props que ajustam o visual sem CSS
Size, speed, density, dotSize e tilt são props numéricas, o que deixa você encaixar o orbe em uma legenda de 14 px ou em um bloco de 48 px sem escrever estilos. A prop paused congela a animação no quadro atual, e className permite herdar a cor do texto das suas classes utilitárias. Como o desenho usa currentColor, o modo escuro funciona sem ajuste extra.
Formas e renders opcionais
O núcleo traz uma forma e um render. Outras quatro formas (cube, octahedron, tetrahedron, torus) e sete renders (dashes, squares, crosses, mesh, halftone, lines, verticalLines) ficam em pontos de entrada separados. O tree shaking deixa de fora o que você não usa, e uma forma personalizada é uma função que devolve pontos dentro da esfera unitária.
Quatro maneiras de adotar
Dá para instalar pelo npm, copiar o código com uma URL do shadcn, montar em JavaScript puro com mountOrb ou adicionar o pacote Swift no Xcode. A versão vanilla expõe pause, play e destroy, o que serve a uma página que cuida do próprio ciclo de vida. A versão SwiftUI desenha no estilo de primeiro plano, então um modificador como foregroundStyle(.blue) colore o orbe.
Peso baixo e acessibilidade no padrão
O build de React não tem dependências além do React, e o de JavaScript puro não tem nenhuma. O tamanho padrão de 20 px é aquele para o qual as formas foram desenhadas, então os pontos continuam legíveis em uma interface densa. A prop label dá nome ao orbe para leitores de tela, e a animação para quando o sistema informa movimento reduzido.
Código aberto com licença MIT
O código completo está no GitHub, e a licença MIT permite uso comercial, modificação e redistribuição. O pagamento é opcional pelo Patreon e financia o trabalho, sem liberar funções extras. Para um time que quer bifurcar o componente e assumir a manutenção, o custo é previsível.
Prós e contras
Prós
- Nove estados com variantes cobrem quase todas as ações que uma interface de agente precisa comunicar.
- Sem cadeia de dependências, a instalação quase não pesa em um projeto React.
- O tamanho padrão de 20 px lê bem em barras de ferramentas, cabeçalhos de mensagem e painéis laterais.
- Suporte a movimento reduzido e rótulo para leitores de tela já vêm no componente.
Contras
- O orbe só desenha, então você ainda precisa ligar os eventos do seu agente ao estado certo.
- Formas e renders são exclusivos da web, o que deixa a versão SwiftUI com menos recursos.
- A documentação cabe em uma página, então acertar o tempo entre estados exige teste.
Perguntas frequentes
Sim. O pacote é de código aberto sob licença MIT e inclui todos os estados, formas e renders sem custo. Não existe plano pago nem conta para criar.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Thinking Orbs.
Alternativas a Thinking Orbs
Base Code
Base44 (Wix) · Programação · ProdutividadeO Base Code é um ambiente de desenvolvimento em nuvem compartilhado da Base44. O time descreve mudanças em um repositório do GitHub pelo chat, confere tudo na prévia e envia o resultado como pull request.
Google EmbeddingGemma 2
Google DeepMind · Escrita · Imagem · ProgramaçãoGoogle EmbeddingGemma 2 é um modelo aberto de 740 milhões de parâmetros que transforma texto, código, imagens, áudio e quadros de vídeo em vetores de um único espaço de 768 dimensões, rodando em celulares e notebooks.
GitGlow
GitGlow · Programação · ProdutividadeO GitGlow é um cliente Git de desktop que coloca seu código e as mudanças dos seus agentes de IA na mesma revisão, para você saber o que vai sair da máquina antes de publicar.