Como ele é
Lembra uma vidraça com letras pintadas que se parte e, como num vídeo de trás para frente, se recompõe. Sobre um fundo quase branco, uma palavra grande em azul-marinho recebe uma luz suave de cima, que puxa o topo das letras para o índigo, e projeta uma sombra difusa. Um clique quebra o texto em centenas de triângulos que voam a partir do ponto tocado, girando e cintilando em índigo e ciano, caem um pouco e são puxados de volta por mola até a palavra se fechar. Passar o cursor rápido racha as letras pelo caminho, e depois de uns cinco segundos sem interação o título se estilhaça sozinho.
Você pode estar procurando isto se pediu algo assim
- texto que quebra em pedaços quando clico e depois se monta de novo
- título que se estilhaça como vidro quando passo o mouse
- efeito de letras explodindo em cacos para uma campanha
- aquele efeito de palavra que se despedaça e volta sozinha
- abertura de case com o título se partindo de um jeito impactante
- manifesto da marca com tipografia que racha e se refaz
- chamada de landing page que reage ao toque quebrando o texto
Também chamado de
- texto estilhaçado
- text shatter
- shattered text effect
- texto que quebra
- glass shatter text
- explosão de texto
- fragmentação de texto
Quando usar
- Título de campanha que precisa de um momento de impacto
- Abertura de case ou de portfólio com uma palavra-conceito
- Manifesto de marca em que a ideia é ruptura ou mudança
- Chamada de landing page em que a pessoa é convidada a interagir
Quando evitar
- Páginas que já têm outro efeito em WebGL, em que dois efeitos pesados disputam a placa de vídeo
- Textos longos ou informativos: o componente aceita até três linhas curtas
- Marcas de tom sóbrio ou institucional, em que a quebra soa agressiva
Como pedir para a sua IA
Crie um título com efeito de texto estilhaçado em Three.js: a palavra se parte em cacos triangulares ao clicar, tocar ou apertar Enter, e uma mola a remonta; quero pausa fora da tela, ajuste de qualidade em aparelhos lentos, título estático para movimento reduzido e foco pelo teclado.
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 Text Shatter
O Text Shatter funciona no celular?
Funciona. No celular, um toque estilhaça o Text Shatter no ponto tocado, e deslizar o dedo na horizontal racha as letras pelo caminho sem travar a rolagem vertical da página. Se os quadros caírem, ele reduz a resolução e desliga a sombra sozinho. Por ser Pesado no THM Componentes, o prompt orienta a IA a carregar sob demanda no Nuxt.
O Text Shatter é acessível por teclado?
Sim. O Text Shatter funciona como um botão: recebe foco pelo Tab, mostra um contorno de foco e se estilhaça com Enter ou espaço. Os leitores de tela ouvem o texto do título seguido de uma instrução escrita no próprio componente, que você pode adaptar. A cena em WebGL fica escondida das tecnologias assistivas.
O Text Shatter respeita quem prefere menos movimento?
Sim. Com a redução de movimento ativa no sistema, o Text Shatter não se estilhaça: clique, cursor, teclado e o disparo automático deixam de quebrar o texto, que fica inteiro e parado com a mesma luz e sombra. Quando tudo está montado e imóvel, o componente também para de desenhar até a próxima interação.
