# Crachá Fileira de fotos redondas sobrepostas; ao passar o mouse, um balão com nome e cargo surge e balança com o cursor. > Crachá é um componente do THM Componentes que mostra uma fileira de avatares redondos e sobrepostos. Ao passar o mouse sobre uma foto, um balão preto com nome e cargo salta com efeito de mola e inclina para os lados conforme o cursor se move, como se estivesse pendurado. Serve para apresentar equipe, autores ou parceiros. - Categoria: Navegação e scroll - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/cracha/ ## Como ele é Parece aquela fileira de fotos de equipe em que os rostos se encostam. Os avatares são círculos de 56 pixels com borda branca, sobrepostos em parte. Com o mouse sobre um deles, a foto cresce e vem para a frente, e acima dela surge um balão preto com o nome em negrito e o cargo embaixo, em branco. O balão nasce pequeno, sobe com um quique de mola e, enquanto o cursor anda sobre a foto, inclina e desliza para o mesmo lado, como uma plaquinha balançando. A base tem duas linhas finas, verde e azul. O balão é preto nos dois temas e some quando o mouse sai. ## Você pode estar procurando isto se pediu algo assim - “fotos da equipe que mostram o nome quando passo o mouse” - “avatares redondos lado a lado com um balãozinho em cima” - “mostrar quem são os sócios de um jeito mais divertido” - “aquele efeito em que o nome aparece balançando em cima da foto” - “lista de autores com o cargo aparecendo no hover” - “rostos dos clientes sobrepostos com tooltip animado” - “deixar a seção sobre nós com cara mais moderna” ## Também chamado de tooltip animado, fileira de avatares, grupo de avatares, avatar group, avatar stack, balão de dica, hover tooltip ## Quando usar - Seção de equipe ou de sócios numa página institucional - Prova social com rostos de clientes ou alunos perto da chamada principal - Lista de autores, palestrantes ou mentores de um curso ou evento - Faixa de créditos com quem participou de um projeto ## Quando evitar - Informações essenciais, já que o balão depende do mouse e não abre pelo teclado - Públicos que acessam quase só pelo celular, em que não existe hover ## Como pedir para a sua IA ```text Crie uma fileira de avatares sobrepostos com tooltip animado na seção de equipe: ao passar o mouse, um balão com nome e cargo surge com efeito de mola e inclina conforme o cursor. Faça o balão abrir também por foco e toque, use as cores da marca e tenha versão estática para movimento reduzido. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Crachá ### Crachá funciona no celular? Só em parte. Crachá responde a eventos de mouse, como entrar, mover e sair da foto, então em telas de toque o balão pode não aparecer. Os avatares continuam visíveis, com o nome no texto alternativo da imagem. Para celular, vale pedir à IA que o balão abra ao toque ou que nome e cargo fiquem visíveis abaixo. ### Dá para usar Crachá com teclado e leitor de tela? Não como vem. Crachá não recebe foco nem abre o balão pelo teclado, e nome e cargo só aparecem no hover; o leitor de tela lê apenas o nome no atributo alt de cada foto. Peça à IA para tornar cada avatar focável e mostrar o balão no foco, com o cargo também acessível. ### Como troco as cores do balão de Crachá? Em Crachá, o balão é preto com texto branco e duas linhas finas em verde e azul na base, cores fixas que não mudam no modo escuro. O prompt do THM Componentes pede à IA para trocar esses tons pelos tokens de cor do seu projeto, o que permite um balão claro no tema claro, por exemplo. ## Componentes relacionados - [Baliza](https://vibecode.thmtecnologia.com/componentes/baliza/): Balões de dica e menus presos ao botão que os abre, que mudam de lado sozinhos quando encostam na borda. - [Relicário](https://vibecode.thmtecnologia.com/componentes/relicario/): Um selo com ícone de pasta amarela: ao passar o mouse, a pasta abre e até três fotos saltam em leque. - [Azulejo](https://vibecode.thmtecnologia.com/componentes/azulejo/): Fotos recortadas em losango que se encaixam como um mosaico e viram quadrado inteiro ao passar o mouse. - [Causo](https://vibecode.thmtecnologia.com/componentes/causo/): Fotos de clientes empilhadas e levemente inclinadas, com a frase do depoimento surgindo palavra por palavra ao lado. - [Passarela](https://vibecode.thmtecnologia.com/componentes/passarela/): Barra de ícones translúcida em que cada ícone cresce quando o mouse se aproxima, como no Mac. --- 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.