# Dissolve A foto se desfaz em poeira de baixo para cima, com uma borda laranja que brilha como papel queimando. > O Dissolve é um componente exclusivo do THM Componentes em que uma imagem se desintegra em poeira, com uma borda laranja incandescente na linha que avança, como papel queimando. O progresso vem do mouse, da rolagem da página ou de um valor controlado, o que serve a transições narrativas, revelações de produto e campanhas de impacto. - 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, Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/dissolve/ ## 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 ```text 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. ## Componentes relacionados - [Shader Transition](https://vibecode.thmtecnologia.com/componentes/shader-transition/): Sequência de fotos que troca de imagem com ondas, pixels, redemoinho, queima, glitch ou círculo. - [Distort Hover](https://vibecode.thmtecnologia.com/componentes/distort-hover/): Ao passar o mouse, a foto se deforma como líquido e se transforma em uma segunda imagem. - [Depth Scan](https://vibecode.thmtecnologia.com/componentes/depth-scan/): A foto começa como uma grade de pontos e uma onda de luz ciano passa por ela, revelando a imagem. - [Scratch To Reveal](https://vibecode.thmtecnologia.com/componentes/scratch-to-reveal/): Um cartão coberto por uma camada colorida que a pessoa raspa com o mouse ou o dedo para descobrir o prêmio. - [Glitch Image](https://vibecode.thmtecnologia.com/componentes/glitch-image/): A imagem treme, se parte em faixas e separa as cores como um sinal de TV com defeito. --- 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.