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
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.
