Como ele é
Lembra um canal de TV mal sintonizado ou a tela de um hacker em filme. O texto aparece em branco, bem grosso e grande, com tamanho que se adapta à largura da tela. Por cima dele, duas cópias deslocadas para os lados, uma com rastro vermelho e outra com rastro ciano, mostram só uma faixa horizontal de cada vez, e essa faixa salta de altura em ritmos diferentes, dando a sensação de imagem tremendo. As cópias têm fundo quase preto, então o efeito foi feito para fundos escuros. Uma opção deixa o glitch desligado até o mouse passar por cima.
Você pode estar procurando isto se pediu algo assim
- texto que treme e pisca como tela com defeito
- título com efeito de falha de sinal tipo filme de hacker
- letras com sombra vermelha e azul se mexendo para site de games
- efeito de TV chiando no nome da minha empresa de segurança digital
- palavra que dá uma bugada quando passo o mouse
- texto estilo cyberpunk para a página de um evento de tecnologia
Também chamado de
- texto bugado
- glitch text
- efeito glitch
- texto com defeito
- falha digital
- cyberpunk text
- RGB split text
Quando usar
- Sites de cibersegurança, games, e-sports e eventos de tecnologia
- Títulos curtos sobre fundo escuro em heros e telas de abertura
- Páginas de erro, como 404 e manutenção, com tom bem-humorado
- Nome de marca ou de produto que pede um ar digital e rebelde
Quando evitar
- Fundos claros, porque as cópias têm fundo quase preto e aparecem como faixas escuras
- Conteúdo de leitura demorada ou público sensível a tremores na tela, sem uma versão parada
- Títulos longos, porque o texto não quebra linha e pode passar da largura disponível
Como pedir para a sua IA
Crie um efeito de texto glitch só com CSS no título do hero escuro: cópias deslocadas com rastros nas cores da minha marca e faixas que mudam de altura, com opção de ativar só no hover e versão parada para quem prefere menos movimento.
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 Gralha
Gralha funciona em fundo claro?
Não do jeito que vem. As cópias que formam Gralha têm fundo quase preto e o texto é branco, então em fundo claro elas aparecem como faixas escuras. O prompt do THM Componentes pede à IA para usar os tokens de cor do projeto em vez dessas cores fixas, o que permite adaptar o efeito.
Dá para Gralha só falhar quando o mouse passa por cima?
Sim. Gralha tem a opção enableOnHover: com ela ligada, o título fica parado e as cópias com rastro vermelho e ciano só aparecem enquanto o mouse está sobre ele. Também dá para ajustar a velocidade e desligar as sombras coloridas.
Gralha deixa o site pesado?
Não. Gralha usa só CSS, com pseudo-elementos e uma animação de recorte, sem JavaScript de animação nem WebGL, e tem classificação Leve no THM Componentes. Mantenha o título numa linha só, porque o texto não quebra; para frases longas, reduza o tamanho ou divida em partes.
