# Retoque Duas imagens ou telas sobrepostas e uma linha no meio que você move com o mouse ou o dedo para comparar. > Retoque é um componente do THM Componentes para comparar duas versões de algo: elas ficam sobrepostas, e uma linha vertical brilhante mostra uma de cada lado conforme o mouse passa, o dedo desliza ou a pessoa arrasta. Aceita imagens, telas e até código, e tem varredura automática. Serve para antes e depois de tratamentos e redesigns. - Categoria: Imagem e mídia - 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, Toque - URL: https://vibecode.thmtecnologia.com/componentes/retoque/ ## Como ele é Funciona como duas fotos impressas, uma sobre a outra, com uma cortina vertical que você puxa para os lados. À esquerda da linha aparece a primeira versão; à direita, a segunda. A linha tem um brilho anil que some nas pontas, um halo azul-claro de um lado e uma poeira de estrelinhas brancas piscando ao lado, com uma alça branca pequena no meio. No modo padrão, a linha segue o mouse e volta ao centro quando ele sai; no modo arrastar, é preciso clicar e puxar. No automático, a linha vai de uma ponta à outra em cinco segundos e volta, e para quando o mouse entra. ## Você pode estar procurando isto se pediu algo assim - “comparar antes e depois arrastando uma linha no meio da foto” - “mostrar o resultado do tratamento com a foto de antes e depois” - “imagem que muda quando passo o mouse de um lado para o outro” - “comparar o site antigo com o novo na mesma tela” - “aquele slider de antes e depois que clínicas usam” - “mostrar a versão clara e a escura do meu app no mesmo quadro” - “comparar dois trechos de código com uma divisória que desliza” ## Também chamado de antes e depois, before and after slider, comparador de imagens, image comparison slider, slider de comparação, compare slider, divisória deslizante ## Quando usar - Resultados de tratamentos estéticos, odontológicos ou de reforma - Redesign de site ou de app, mostrando a versão antiga e a nova - Tema claro e escuro do mesmo produto - Edição de foto, filtro ou restauração de imagem - Mudanças de código, com a versão anterior e a corrigida ## Quando evitar - Comparações que precisam funcionar pelo teclado, já que a linha só se move com mouse ou toque - Imagens com proporções ou enquadramentos diferentes, que desalinham na divisória ## Como pedir para a sua IA ```text Crie um comparador de antes e depois para os resultados de tratamento: duas fotos sobrepostas e uma linha que a pessoa arrasta com o mouse ou o dedo, com controle pelas setas do teclado, cores da minha marca na linha, imagens otimizadas e versão sem brilho animado para movimento reduzido. ``` 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 Retoque ### Retoque funciona no celular? Funciona. Retoque escuta eventos de toque, então a linha acompanha o dedo ao deslizar sobre a imagem, tanto no modo hover quanto no modo arrastar. Com o modo automático ligado, o toque é ignorado e a linha segue varrendo sozinha. O tamanho padrão é 400 por 400 pixels, então ajuste as classes para telas estreitas. ### Posso comparar outra coisa além de imagens em Retoque? Pode. Além das props de imagem, Retoque tem os slots first-content e second-content, que recebem qualquer conteúdo com a largura e a altura do componente, como telas do app, trechos de código ou blocos coloridos. O slot handle troca a alça do meio por uma sua. ### Dá para usar Retoque pelo teclado? Não como vem. Retoque não recebe foco nem responde às setas, então quem navega sem mouse não consegue mover a linha. Peça à IA um controle por teclado, como um input range escondido ou um role slider com aria-valuenow, ligado à mesma porcentagem que o componente já emite. ## Componentes relacionados - [Monóculo](https://vibecode.thmtecnologia.com/componentes/monoculo/): Um círculo de aumento segue o mouse sobre a foto e mostra os detalhes ampliados, sem sair do lugar. - [Pupila](https://vibecode.thmtecnologia.com/componentes/pupila/): Um círculo que segue o mouse e, sobre o título, cresce para revelar uma segunda mensagem escondida. - [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. - [Errata](https://vibecode.thmtecnologia.com/componentes/errata/): Mostra o que mudou entre duas versões de um código ou texto, em vermelho e verde, para aceitar ou rejeitar cada trecho. - [Avesso](https://vibecode.thmtecnologia.com/componentes/avesso/): Duas frases no mesmo lugar: uma linha vertical segue o mouse e mostra a outra frase de um lado dela. --- 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.