# Comitiva Setinhas coloridas com o nome de cada colega andando pelo documento, com trechos selecionados e recados no cursor. > Comitiva é um componente exclusivo do THM Componentes que mostra quem está junto num documento: setas coloridas com o nome de cada colega, deslizando com movimento de mola, trechos selecionados por eles, avatares no topo para seguir alguém e um chat no cursor que abre com a barra. Vem com simulação e métodos para ligar a um WebSocket. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/comitiva/ ## Como ele é Parece um documento compartilhado com outras pessoas dentro. No topo ficam o título, a contagem de quem está online e uma pilha de avatares redondos com iniciais. Sobre o texto andam setinhas coloridas, cada uma com uma etiqueta com o primeiro nome; elas deslizam suaves até o destino e ficam mais claras quando a pessoa para por um tempo. Trechos selecionados por cada colega ganham um fundo na cor dele. Clicar num avatar faz a página acompanhar aquela pessoa, com uma borda na cor dela. Ao apertar barra, um balão de mensagem segue o seu ponteiro. ## Você pode estar procurando isto se pediu algo assim - “mostrar o cursor das outras pessoas no documento, igual ao Figma” - “ver quem está editando junto comigo em tempo real” - “setinhas coloridas com o nome de cada usuário mexendo na tela” - “bolinhas com as iniciais de quem está online no topo da página” - “seguir a tela de um colega durante a revisão” - “mandar um recado rápido que aparece no cursor” - “presença de vários usuários tipo Google Docs no meu app” ## Também chamado de cursores ao vivo, live cursors, multiplayer cursors, presença em tempo real, real-time presence, edição colaborativa, cursor chat ## Quando usar - Editores colaborativos de texto, propostas e documentos internos - Quadros de revisão em que a equipe precisa ver onde cada pessoa está - Apresentações e treinamentos ao vivo em que o público segue quem conduz - Qualquer produto que queira mostrar quem está online na mesma página ## Quando evitar - Projetos sem servidor de tempo real, já que o componente só exibe a presença que você envia a ele - Uso principal no celular, em que não há cursor de mouse para compartilhar ## Como pedir para a sua IA ```text Adicione cursores ao vivo de colegas ao meu editor colaborativo: setas com nome e movimento suave, seleções coloridas no texto, avatares para seguir alguém, chat no cursor com a tecla barra, eventos prontos para o meu WebSocket e cursores parados para quem prefere menos movimento. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Comitiva ### Como ligo Comitiva ao meu servidor? Comitiva emite o seu ponteiro a cada 50 milissegundos, a sua seleção de texto e as mensagens de chat, prontos para enviar por WebSocket. Para mostrar colegas, chame updatePeer com nome, cor, cursor e seleção, e removePeer quando alguém sair. Com simulate desligado, o componente mostra só os dados reais. ### Comitiva respeita quem prefere menos movimento? Sim. Com a preferência de movimento reduzido ativa, Comitiva troca a simulação por uma cena parada, com colegas em posições fixas, e os cursores pulam direto para o destino, sem a mola. O componente percebe quando a preferência muda com a página aberta e para a animação quando sai da tela. ### Dá para seguir alguém em Comitiva? Dá. Em Comitiva, clicar no avatar de um colega faz a página rolar sozinha para manter o cursor dele à vista, com uma borda na cor da pessoa. Rolar a página, tocar a tela ou apertar Esc encerra o acompanhamento, e o evento follow avisa o seu código. ## Componentes relacionados - [Alfinete](https://vibecode.thmtecnologia.com/componentes/alfinete/): Pins numerados que você solta sobre uma imagem ou tela para comentar, responder e marcar como resolvido. - [Lauda](https://vibecode.thmtecnologia.com/componentes/lauda/): Editor de texto em blocos: digite barra para inserir títulos, listas e tarefas, e arraste cada bloco para reordenar. - [Mutirão](https://vibecode.thmtecnologia.com/componentes/mutirao/): Quadro branco sem bordas para colar notas, desenhar formas, ligar setas e rabiscar à mão, como numa oficina ao vivo. - [Palimpsesto](https://vibecode.thmtecnologia.com/componentes/palimpsesto/): Linha do tempo das versões de um documento, com régua para voltar no tempo, comparação lado a lado e botão de restaurar. - [Ateliê](https://vibecode.thmtecnologia.com/componentes/atelie/): Editor de código com cores por linguagem, números de linha, busca e blocos que recolhem, direto na sua página. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.