# Retoque Two stacked images or screens and a line in the middle you move with the mouse or a finger to compare. > Retoque is a THM Componentes component for comparing two versions of something: they sit stacked, and a glowing vertical line shows one on each side as the mouse moves, a finger slides or someone drags. It takes images, screens and even code, and can sweep on its own. It suits before and after for treatments and redesigns. - Category: Images and media - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/retoque/ ## What it looks like It works like two printed photos stacked together, with a vertical curtain you pull sideways. Left of the line you see the first version; right of it, the second. The line has an indigo glow that fades at the ends, a light blue halo on one side and a dust of tiny white stars twinkling next to it, with a small white handle in the middle. In the default mode the line follows the mouse and returns to the center when it leaves; in drag mode you click and pull. In autoplay, the line sweeps from edge to edge in five seconds and back, stopping when the mouse enters. ## You may be looking for this if you asked for something like - “compare before and after by dragging a line across the photo” - “show treatment results with before and after photos” - “an image that changes as I move the mouse from side to side” - “compare the old site with the new one on the same screen” - “that before and after slider clinics use” - “show the light and dark versions of my app in one frame” - “compare two code snippets with a sliding divider” ## Also known as before and after slider, image comparison slider, compare slider, image compare, split view slider, reveal slider ## When to use - Results of cosmetic, dental or renovation work - A website or app redesign, showing the old and new versions - Light and dark themes of the same product - Photo editing, filters or image restoration - Code changes, with the previous and the fixed version ## When to avoid - Comparisons that must work from the keyboard, since the line only moves with mouse or touch - Images with different proportions or framing, which misalign at the divider ## How to ask your AI ```text Create a before and after comparison slider for treatment results: two stacked photos and a line people drag with the mouse or a finger, with arrow key control, my brand colors on the line, optimized images and a version without the animated glow for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Retoque ### Does Retoque work on phones? Yes. Retoque listens to touch events, so the line follows a finger sliding over the image, in both hover and drag modes. With autoplay on, touch is ignored and the line keeps sweeping by itself. The default size is 400 by 400 pixels, so adjust the classes for narrow screens. ### Can Retoque show something other than images? Yes. Besides the image props, Retoque has first-content and second-content slots that take any content at the component's full width and height, such as app screens, code snippets or colored blocks. The handle slot replaces the middle handle with your own. ### Can Retoque be used with the keyboard? Not out of the box. Retoque does not take focus or respond to arrow keys, so people who browse without a mouse cannot move the line. Ask your AI for keyboard control, such as a hidden range input or a role slider with aria-valuenow, tied to the same percentage the component already emits. ## Related components - [Monóculo](https://vibecode.thmtecnologia.com/en/components/monoculo/): A round magnifying glass follows the mouse over a photo and shows the details enlarged, right in place. - [Pupila](https://vibecode.thmtecnologia.com/en/components/pupila/): A circle follows the mouse and, over the headline, grows to reveal a second hidden message. - [Mergulho](https://vibecode.thmtecnologia.com/en/components/mergulho/): On hover, the photo warps like liquid and turns into a second image. - [Errata](https://vibecode.thmtecnologia.com/en/components/errata/): Shows what changed between two versions of code or text, in red and green, so you can accept or reject each part. - [Avesso](https://vibecode.thmtecnologia.com/en/components/avesso/): Two phrases in the same spot: a vertical line follows the mouse and shows the other phrase on one side. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).