Como ele é
Imagine uma foto queimando por baixo. Ao passar o mouse, a imagem começa a sumir pela parte de baixo em contornos irregulares, e a linha que avança brilha em laranja, como brasa na borda do papel. Pequenos grãos se soltam dessa linha, sobem um pouco e se apagam, piscando. Atrás aparece um fundo quase branco, ou a cor que você escolher. Quando o cursor sai, a foto se refaz devagar. No modo de rolagem, a dissolução acompanha a passagem da seção pela tela; no modo manual, você controla o ponto exato.
Você pode estar procurando isto se pediu algo assim
- foto que desmancha em poeira quando passo o mouse
- efeito de imagem queimando com a borda brilhando
- imagem que vai sumindo enquanto rolo a página
- aquele efeito de desintegrar tipo filme de super-herói
- transição com a foto virando cinzas para revelar o produto
- efeito dramático para a campanha de lançamento
Também chamado de
- dissolve effect
- efeito dissolver
- desintegração
- burn effect
- imagem queimando
- disintegration effect
- dust effect
Quando usar
- Transição narrativa em que uma imagem dá lugar à próxima seção na rolagem
- Revelação de produto ou de oferta escondida por trás de uma foto
- Campanhas e lançamentos que pedem um momento dramático
- Portfólios com cards que reagem ao passar o mouse
Quando evitar
- Imagens que a pessoa precisa ver por inteiro, como fotos de produto na loja
- Público que acessa mais pelo celular, se o modo escolhido for o hover
Como pedir para a sua IA
Crie um efeito de dissolução em WebGL que desintegra a imagem em poeira com borda incandescente nas cores da minha marca, guiado pela rolagem da seção, com pausa fora da tela, troca direta de estado para movimento reduzido e imagem estática se não houver WebGL.
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 Dissolve
O Dissolve funciona no celular?
O efeito roda em celulares com WebGL, mas o modo hover do Dissolve depende de passar o cursor por cima da imagem, gesto que não existe na tela de toque. No celular, prefira o modo de rolagem, em que a dissolução acompanha a passagem da seção pela tela, ou o modo manual, controlado pelo seu código.
O Dissolve respeita quem prefere menos movimento?
Sim. Com a redução de movimento ativa, o Dissolve deixa de suavizar a transição: no modo hover, a imagem some ou volta de uma vez, e na rolagem o progresso acompanha a posição sem atraso. O desenho também pausa quando o componente sai da tela, para não seguir desenhando enquanto a pessoa lê outras seções.
Dá para trocar a cor da brasa no Dissolve?
Sim. O Dissolve tem props para a cor e a largura da borda incandescente, o tamanho dos grãos de poeira, quanto eles sobem e a cor que aparece atrás da imagem. O prompt do THM Componentes pede para usar os tokens de cor do projeto nessas props.
