# Balangandã Fios finos presos num trilho no alto, com cartões ou formas na ponta, que balançam ao vento e podem ser puxados. > Balangandã é um componente exclusivo do THM Componentes: um móbile minimalista com fios simulados por física, presos a um trilho no alto, que terminam em cartões com rótulo ou em formas geométricas. Os fios balançam com um vento suave, reagem ao cursor e podem ser agarrados e puxados. Serve para seções de valores, pilares ou categorias. - Categoria: Interação e física - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/balanganda/ ## Como ele é Parece um móbile de berço desenhado a lápis fino. Sobre um fundo quase branco, uma linha escura no topo segura cinco fios de alturas variadas, cada um preso por um pontinho. Na ponta de cada fio pende um cartão arredondado com um furinho, um traço de cor e um rótulo, ou, no outro estilo, um círculo, um triângulo, um quadrado ou um hexágono. As cores alternam entre azul-marinho, índigo, branco com borda e gradiente para ciano. Um vento leve faz tudo oscilar devagar; o mouse empurra os fios ao passar, e os pingentes se afastam uns dos outros para não se atravessarem. ## Você pode estar procurando isto se pediu algo assim - “plaquinhas penduradas em fios que balançam com o mouse” - “móbile de berço para mostrar os valores da empresa” - “cartões pendurados que dá para puxar e soltar” - “seção de pilares com um toque artesanal e interativo” - “etiquetas penduradas balançando ao vento no site” - “fios com física segurando ícones, tipo enfeite pendurado” ## Também chamado de cartões pendurados em fios, móbile interativo, hanging cards, física de corda, Verlet rope, pingentes pendurados, rope physics ## Quando usar - Seção de valores ou de pilares de uma marca, com uma palavra por pingente - Categorias de um portfólio ou de um estúdio criativo - Página sobre a empresa que pede um toque artesanal - Marcas de produtos infantis, decoração ou papelaria ## Quando evitar - Listas longas: com muitos fios, os pingentes se amontoam - Conteúdo que precisa ser clicado, porque os pingentes são desenho em canvas e não links ## Como pedir para a sua IA ```text Crie um móbile interativo em Canvas 2D para a seção de valores: fios com física de Verlet presos num trilho, terminando em cartões com rótulo que balançam ao vento e podem ser puxados com mouse ou dedo, nas cores da minha marca, com pausa fora da tela e versão parada para movimento reduzido. ``` 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 Balangandã ### Os cartões de Balangandã podem ser links? Não diretamente. Em Balangandã, fios e pingentes são desenhados num canvas, então não viram links nem botões. Se a seção precisa levar a outras páginas, coloque os links em texto ao lado ou abaixo do móbile, fora da área do canvas. ### Balangandã funciona no celular e pelo teclado? Sim. Em Balangandã, o dedo agarra qualquer ponto do fio e puxa, porque a área desativa a rolagem do navegador ao ser tocada. Pelo teclado, a área recebe foco, e Espaço ou Enter faz todos os pingentes balançarem; o rótulo para leitores de tela explica como interagir. ### Balangandã respeita quem prefere menos movimento? Sim. Com movimento reduzido ativo, Balangandã fica sem animação, com os fios pendurados em repouso e sem vento. Só se mexe enquanto a pessoa puxa um fio e, ao soltar, tudo volta ao repouso na hora. A animação também pausa quando o componente sai da tela. ## Componentes relacionados - [Tombo](https://vibecode.thmtecnologia.com/componentes/tombo/): Pílulas com nomes de serviços despencam na tela, batem umas nas outras e empilham; dá para arrastar e jogar. - [Estandarte](https://vibecode.thmtecnologia.com/componentes/estandarte/): Sua imagem vira uma bandeira de tecido que ondula ao vento e pode ser puxada com o mouse ou com o dedo. - [Enguia](https://vibecode.thmtecnologia.com/componentes/enguia/): Uma fita colorida, grossa na cabeça e fina na ponta, que persegue o mouse como uma serpente. - [Truco](https://vibecode.thmtecnologia.com/componentes/truco/): Pilha de fotos em que você arrasta o cartão de cima para o lado e ele volta para o fundo com efeito de mola. - [Água-viva](https://vibecode.thmtecnologia.com/componentes/agua-viva/): Uma bolha em gradiente que muda de contorno devagar, como se respirasse, e se estica na direção do mouse. --- 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.