# Gralha Faixas do título aparecem deslocadas para os lados com rastros vermelho e ciano, como uma tela com defeito. > Gralha é um componente do THM Componentes que aplica um efeito de falha digital a um título: duas cópias do texto, com rastros vermelho e ciano, surgem em faixas horizontais que saltam de posição sem parar. Usa só CSS, pode rodar sempre ou só no hover e combina com temas de tecnologia, games e cibersegurança. - Categoria: Texto e tipografia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/gralha/ ## 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 ```text 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. ## Componentes relacionados - [Charada](https://vibecode.thmtecnologia.com/componentes/charada/): Frase que surge como símbolos sorteados e se revela letra por letra, da esquerda para a direita. - [Anagrama](https://vibecode.thmtecnologia.com/componentes/anagrama/): Palavra em maiúsculas que embaralha as letras ao passar o mouse e se forma de novo em menos de um segundo. - [Cifra](https://vibecode.thmtecnologia.com/componentes/cifra/): Título que surge embaralhado em letras, números e símbolos e vai se acertando até formar a frase. - [Chuvisco](https://vibecode.thmtecnologia.com/componentes/chuvisco/): A imagem treme, se parte em faixas e separa as cores como um sinal de TV com defeito. - [Vitral](https://vibecode.thmtecnologia.com/componentes/vitral/): Um título que se parte em centenas de cacos ao clicar ou passar o mouse e se monta de novo sozinho. --- 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.