# Batuta Milhares de pontinhos que voam e se reorganizam em esfera, anel, cubo e no texto que você escolher. > Batuta é um componente exclusivo do THM Componentes em que dezenas de milhares de partículas se transformam entre esfera, anel, cubo e um texto de até 8 caracteres, com um redemoinho no meio de cada troca. Muda de forma a cada 4,5 segundos ou com clique, Enter e Espaço. Funciona em heros de marca e aberturas de apresentação. - Categoria: 3D e espaço - 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, WebGL, Three.js - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/batuta/ ## Como ele é Imagine uma nuvem de poeira colorida que obedece a um maestro. Cerca de 24 mil pontinhos formam uma esfera que gira devagar; depois de alguns segundos, eles se soltam aos poucos, rodopiam no meio do caminho e pousam como um anel, depois um cubo e, por fim, as letras do texto escolhido. As cores vão do índigo ao ciano conforme a posição, com alguns pontos em azul-marinho, sobre um fundo quase branco. Mover o mouse inclina a forma de leve. Uma pílula no rodapé mostra o nome das quatro formas e marca a atual. ## Você pode estar procurando isto se pediu algo assim - “partículas que formam o nome da minha marca” - “pontinhos que mudam de forma, de bola para cubo e para texto” - “aquele efeito de poeira que vira logo, para a abertura do site” - “hero com milhares de pontos se transformando sozinhos” - “animação de partículas que muda quando clico” - “algo futurista para a primeira tela da apresentação do produto” ## Também chamado de morph de partículas, particle morphing, nuvem de partículas, point cloud morph, partículas formando texto, particles to text ## Quando usar - Hero de marca que quer terminar a animação no próprio nome - Abertura de apresentação, evento ou lançamento - Página de produto de tecnologia com assinatura visual forte - Tela de boas-vindas de app ou de painel ## Quando evitar - Celulares fracos, se a quantidade de partículas não for reduzida - Seções com muito texto, em que o movimento constante distrai - Páginas que já têm outro efeito pesado em WebGL ## Como pedir para a sua IA ```text Crie no hero uma nuvem de partículas em Three.js que se transforma entre esfera, anel, cubo e o nome da minha marca, com transição suave e troca por clique ou teclado. Use as cores da marca, pause fora da tela e mostre o texto parado 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 Batuta ### Dá para colocar o nome da minha marca em Batuta? Sim. A prop text de Batuta define a quarta forma: o componente desenha até 8 caracteres em fonte grossa num canvas e distribui as partículas sobre as letras. Nomes curtos ficam mais legíveis; as cores, o tamanho dos pontos, o intervalo entre as formas e a quantidade de partículas também são props. ### Batuta funciona com teclado e leitor de tela? Sim. Batuta se comporta como um botão: recebe foco, Enter ou Espaço avança para a próxima forma, e um anúncio discreto informa a forma atual para leitores de tela. O contorno de foco aparece quando a pessoa navega pelo teclado, e um toque no celular também troca a forma. ### Batuta respeita quem prefere menos movimento? Sim. Com a preferência de reduzir movimento ativa, Batuta abre direto no texto, sem ciclo automático, sem rotação e sem a inclinação pelo cursor. Clique, Enter ou Espaço ainda trocam a forma, mas na hora, sem a transição animada. ## Componentes relacionados - [Miçanga](https://vibecode.thmtecnologia.com/componentes/micanga/): Uma palavra desenhada com milhares de pontinhos coloridos que se espalham quando o mouse passa e voltam ao lugar. - [Limalha](https://vibecode.thmtecnologia.com/componentes/limalha/): Centenas de milhares de grãos finos correm em filamentos, como tinta no papel, e giram em volta do cursor. - [Arquibancada](https://vibecode.thmtecnologia.com/componentes/arquibancada/): A imagem é formada por milhares de pontinhos coloridos que se afastam do cursor e voltam ao lugar. - [Cordel](https://vibecode.thmtecnologia.com/componentes/cordel/): Uma frase repetida corre sem parar sobre um nó tridimensional que gira devagar e inclina com o mouse. - [Quimera](https://vibecode.thmtecnologia.com/componentes/quimera/): Uma forma líquida em 3D que ondula, se funde com um anel e duas cápsulas e gira conforme o 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.