# Mutirão Quadro branco sem bordas para colar notas, desenhar formas, ligar setas e rabiscar à mão, como numa oficina ao vivo. > Mutirão é um componente exclusivo do THM Componentes que coloca um quadro branco infinito dentro do produto: notas adesivas, retângulos, elipses, texto, setas que ficam presas às formas e caneta à mão livre suavizada. Tem seleção múltipla, girar, redimensionar, zoom, desfazer, atalhos de teclado e exportação em SVG. Serve para oficinas de planejamento e mapas de jornada. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/mutirao/ ## Como ele é Parece uma parede coberta de notas adesivas, vista de um passo atrás. O fundo quase branco tem uma grade de pontos discreta. No alto, cartões flutuantes mostram o nome do quadro com desfazer e refazer, o zoom em porcentagem e o botão de exportar. Embaixo, uma barra centralizada reúne as ferramentas, cada uma com sua tecla, e seis cores, como amarelo, rosa e azul. As notas têm tom pastel e sombra suave, e as setas acompanham as formas quando elas se movem. Na demonstração, um planejamento de projeto traz colunas de notas, setas curvas, um sublinhado à mão e um sinal de concluído. ## Você pode estar procurando isto se pediu algo assim - “um quadro tipo Miro dentro do meu sistema” - “quadro branco online para colar notas e ligar com setas” - “lousa infinita em que a equipe rabisca e organiza ideias” - “tela de brainstorm com post-its coloridos para fazer oficina com cliente” - “desenhar fluxos com caixas e setas que acompanham quando arrasto” - “mural de ideias com zoom e caneta para escrever à mão” - “exportar o quadro de planejamento como imagem vetorial” ## Também chamado de quadro branco, lousa digital, quadro infinito, mural de notas adesivas, infinite canvas, sticky notes board, online whiteboard, brainstorm board ## Quando usar - Oficinas de planejamento e brainstorm feitas ao vivo com o cliente - Mapas de jornada, roteiros de projeto e fluxos desenhados à mão livre - Ferramentas internas em que a equipe organiza ideias e prioridades - Produtos de educação ou consultoria que precisam de uma lousa dentro da plataforma ## Quando evitar - Páginas de marketing, em que um quadro editável pesa e tira o foco da mensagem - Colaboração em tempo real entre várias pessoas, que exige um servidor de sincronização à parte ## Como pedir para a sua IA ```text Crie um quadro branco infinito dentro da área de projetos do meu sistema: notas adesivas, formas, setas presas às formas, caneta suavizada, zoom com roda e pinça, desfazer, atalhos de teclado, exportação em SVG e salvamento das formas no meu banco de dados. ``` 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 Mutirão ### Como salvo o que a pessoa desenhou em Mutirão? Mutirão expõe as formas por v-model:shapes, uma lista com tipo, posição, tamanho, rotação, cor e texto de cada item, e as setas guardam quais formas ligam. Basta gravar essa lista na sua API e carregar de volta ao abrir o quadro. Também há os métodos toJSON e fromJSON e a exportação em SVG. ### Mutirão funciona no celular e no tablet? Funciona com toque: um dedo desenha, move ou seleciona conforme a ferramenta, e dois dedos fazem pinça para dar zoom e mover a vista. A barra de ferramentas fica embaixo, ao alcance do polegar, e o botão de exportar encolhe em telas estreitas. Como a classificação no THM Componentes é Pesado, vale testar Mutirão em aparelhos mais simples. ### Dá para usar Mutirão pelo teclado? Sim. Em Mutirão, cada ferramenta tem uma tecla, como N para nota, R para retângulo, A para seta e P para caneta. Tab percorre os itens, Enter edita o texto, as setas movem a seleção, Delete exclui, Ctrl+D duplica e Ctrl+Z desfaz. O leitor de tela ouve a descrição de cada item selecionado. ## Componentes relacionados - [Engenhoca](https://vibecode.thmtecnologia.com/componentes/engenhoca/): Quadro infinito em que você liga caixas por fios para montar automações e vê o fluxo rodar com pulsos de luz. - [Ipê](https://vibecode.thmtecnologia.com/componentes/ipe/): Ideia central no meio e ramos coloridos em curvas que você cria com Tab e Enter, arrasta e recolhe. - [Comitiva](https://vibecode.thmtecnologia.com/componentes/comitiva/): Setinhas coloridas com o nome de cada colega andando pelo documento, com trechos selecionados e recados no cursor. - [Alfinete](https://vibecode.thmtecnologia.com/componentes/alfinete/): Pins numerados que você solta sobre uma imagem ou tela para comentar, responder e marcar como resolvido. - [Deriva](https://vibecode.thmtecnologia.com/componentes/deriva/): Um mural sem fim de cartões com fotos que você arrasta em qualquer direção e abre em detalhe com um clique. --- 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.