# Chuvisco A imagem treme, se parte em faixas e separa as cores como um sinal de TV com defeito. > Chuvisco é um componente exclusivo do THM Componentes que aplica um glitch digital controlado sobre uma foto: faixas deslocadas, blocos fora do lugar, separação RGB, scanlines e blocos nas cores da marca. Dispara no hover ou em pulsos periódicos, roda em WebGL sem dependências e combina com campanhas de tecnologia, eventos e portfólios. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/chuvisco/ ## Como ele é Parece uma fita de vídeo com defeito ou um sinal de TV que perde a sintonia por um instante. Em repouso, a foto aparece limpa, com scanlines bem discretas. Quando o cursor entra, a imagem se quebra em faixas horizontais que pulam para os lados, blocos de outras partes surgem fora do lugar, os canais vermelho e azul se separam e algumas colunas claras escorrem para baixo. O padrão muda aos saltos, várias vezes por segundo, e uma ou outra faixa aparece em negativo. Alguns blocos ganham índigo e ciano, cores que você troca pelas da marca. ## Você pode estar procurando isto se pediu algo assim - “imagem que dá uma falha tipo TV quebrada quando passo o mouse” - “foto com efeito de defeito digital para site de tecnologia” - “efeito de sinal ruim na imagem, com as cores separadas” - “card de evento com visual meio hacker e cyberpunk” - “imagem que treme e se parte em faixas de vez em quando” - “aquele efeito de VHS com linhas e cores tortas na foto” - “deixar a página da campanha com cara urbana e digital” ## Também chamado de glitch effect, efeito glitch, RGB split, falha digital, glitch art, pixel sorting, efeito VHS, chromatic aberration ## Quando usar - Campanha ou landing de produto de tecnologia com tom digital - Página de evento, festival ou lançamento com estética urbana - Cards de portfólio de designers, estúdios e produtoras - Destaque de uma única foto que precisa chamar atenção no hover ## Quando evitar - Marcas de saúde, finanças ou públicos que esperam sobriedade - Áreas vistas por muito tempo com o modo pulsos ligado, porque a falha que pisca cansa - Imagens de outro domínio sem CORS liberado, que não carregam como textura ## Como pedir para a sua IA ```text Crie um efeito de glitch em WebGL sobre a foto do card de destaque: faixas deslocadas, separação RGB e scanlines quando o mouse passa, com blocos nas cores da minha marca. Quero imagem sem glitch para quem prefere menos movimento, texto alternativo e pausa fora da tela. ``` 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 Chuvisco ### Chuvisco fica piscando o tempo todo? Não. No modo padrão, Chuvisco só falha enquanto o cursor está sobre a imagem ou quando algo focável dentro do componente recebe foco, e a imagem volta a ficar limpa depois. No modo pulsos, a falha aparece sozinha em intervalos configuráveis, de 2,6 segundos por padrão. Com movimento reduzido ativado no sistema, a imagem fica sempre parada. ### Dá para usar as cores da minha marca em Chuvisco? Dá. Os blocos posterizados de Chuvisco usam duas cores, índigo e ciano por padrão, definidas nas props tint1 e tint2, e o prompt do THM Componentes orienta a IA a trocar esses valores pelos tokens de cor do projeto. A intensidade da falha e a força das scanlines também são ajustáveis. ### Chuvisco funciona com leitor de tela? Chuvisco se apresenta como uma imagem para tecnologias assistivas, com a descrição definida na prop alt, e o canvas do efeito fica oculto para o leitor de tela. Troque o texto padrão por uma descrição real da foto. Quem ativa a redução de movimento vê a imagem sem falha. ## Componentes relacionados - [Gralha](https://vibecode.thmtecnologia.com/componentes/gralha/): Faixas do título aparecem deslocadas para os lados com rastros vermelho e ciano, como uma tela com defeito. - [Mergulho](https://vibecode.thmtecnologia.com/componentes/mergulho/): Ao passar o mouse, a foto se deforma como líquido e se transforma em uma segunda imagem. - [Lambe-lambe](https://vibecode.thmtecnologia.com/componentes/lambe-lambe/): A foto vira pontinhos de impressão, como jornal ou gibi, e uma lupa mostra a imagem original. - [Fliperama](https://vibecode.thmtecnologia.com/componentes/fliperama/): Transforma uma foto em padrão de pontinhos de poucas cores, com cara de jogo antigo ou de impressão retrô. - [Anáglifo](https://vibecode.thmtecnologia.com/componentes/anaglifo/): Ao mover o mouse sobre a página, o vermelho e o azul se descolam do conteúdo, como uma imagem 3D vista sem os óculos. --- 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.