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