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
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.
