# Comitiva Colored arrows with each teammate's name moving across the document, with their text selections and cursor messages. > Comitiva is an exclusive THM Componentes component that shows who is in a document with you: colored arrows with each teammate's name that glide with spring motion, the text they select, avatars to follow someone and a cursor chat opened with the slash key. It ships with a simulation and methods to wire it to a WebSocket. - Category: Apps and productivity - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/comitiva/ ## What it looks like It looks like a shared document with other people inside it. The top bar shows the title, how many people are online and a stack of round avatars with initials. Small colored arrows move over the text, each with a tag showing a first name; they glide smoothly to their target and fade when the person stays idle for a while. Text selected by each teammate gets a background in their color. Clicking an avatar makes the page follow that person, framed by a border in their color. Pressing slash opens a message bubble that follows your pointer. ## You may be looking for this if you asked for something like - “show other people's cursors in the document, like in Figma” - “see who is editing with me in real time” - “colored arrows with each user's name moving on the screen” - “little circles with the initials of who is online at the top” - “follow a teammate's view during a review” - “send a quick note that shows up at my cursor” - “Google Docs style multi-user presence in my app” ## Also known as live cursors, multiplayer cursors, real-time presence, collaborative editing, presence avatars, cursor chat ## When to use - Collaborative editors for text, proposals and internal documents - Review boards where the team needs to see where everyone is - Live presentations and training where the audience follows the presenter - Any product that wants to show who is online on the same page ## When to avoid - Projects without a real-time server, since the component only shows the presence you feed it - Phone-first use, where there is no mouse cursor to share ## How to ask your AI ```text Add live teammate cursors to my collaborative editor: named arrows with smooth motion, colored text selections, avatars to follow someone, cursor chat on the slash key, events ready for my WebSocket and still cursors for people who prefer reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Comitiva ### How do I connect Comitiva to my server? Comitiva emits your pointer every 50 milliseconds, your text selection and your chat messages, ready to send over a WebSocket. To show teammates, call updatePeer with name, color, cursor and selection, and removePeer when someone leaves. With simulate turned off, the component shows only real data. ### Does Comitiva respect reduced motion settings? Yes. With reduced motion turned on, Comitiva swaps the simulation for a still scene with teammates in fixed spots, and cursors jump straight to their target without the spring. It notices when the setting changes while the page is open and stops animating when it leaves the screen. ### Can I follow someone in Comitiva? Yes. In Comitiva, clicking a teammate's avatar makes the page scroll by itself to keep their cursor in view, framed by a border in their color. Scrolling, touching the screen or pressing Esc stops following, and the follow event tells your code. ## Related components - [Alfinete](https://vibecode.thmtecnologia.com/en/components/alfinete/): Numbered pins you drop on an image or screen to comment, reply and mark as resolved. - [Lauda](https://vibecode.thmtecnologia.com/en/components/lauda/): A text editor where every line is a block: type a slash to add headings, lists and to-dos, and drag to reorder. - [Mutirão](https://vibecode.thmtecnologia.com/en/components/mutirao/): An endless whiteboard to stick notes, draw shapes, connect arrows and sketch by hand, like a live workshop wall. - [Palimpsesto](https://vibecode.thmtecnologia.com/en/components/palimpsesto/): A timeline of a document's versions, with a slider to go back in time, side-by-side comparison and a restore button. - [Ateliê](https://vibecode.thmtecnologia.com/en/components/atelie/): A code editor with language colors, line numbers, search and collapsible blocks, right inside your page. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).