# Mergulho On hover, the photo warps like liquid and turns into a second image. > Mergulho is an exclusive THM Componentes component that swaps one image for another on hover: a noise field warps the photo like liquid, with a slight color split halfway through, until the second image shows. Built with WebGL and no dependencies, it suits portfolio cards, case studies and before-and-after shots. - Category: Images and media - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, WebGL - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/mergulho/ ## What it looks like Picture a photo reflected in water that someone stirs with a hand. When the cursor enters, the first image stretches along a diagonal, ripples with an organic noise and blends into the second image in a little over a second, with a faint color fringe along the edges midway. When the cursor leaves, the effect runs backwards and the first photo returns. The same happens when a focusable element inside the component receives keyboard focus. Both images fill the area without stretching, and any content you place inside sits on top. ## You may be looking for this if you asked for something like - “a photo that turns into another one when I hover, like it is melting” - “a liquid effect when the card image changes on hover” - “an image that distorts and reveals the after shot when the mouse enters” - “portfolio cards that swap the picture with a fluid effect” - “that agency-site hover where the image ripples and changes” - “show before and after without a button, just by hovering” - “make my project gallery look like an award-winning site” ## Also known as displacement hover, image distortion hover, WebGL image transition, liquid hover effect, displacement map transition, image swap on hover ## When to use - Portfolio cards for studios, agencies or photographers - A grid of case studies where each project has two images - Before and after shots of a renovation, treatment or photo edit - A product showcase that shows the item in use on hover ## When to avoid - Sites visited almost only on phones, where hover does not exist; use autoplay there - Pages with dozens of cards, since each instance opens its own WebGL context - Images from another domain without CORS enabled, which will not load as textures ## How to ask your AI ```text Create a WebGL displacement hover transition for my portfolio cards: on hover, the photo warps like liquid and reveals a second image. I want an instant swap for reduced motion, rendering paused off screen and a static image as a fallback. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Mergulho ### Does Mergulho work on phones? Touch screens have no hover, so Mergulho shows the second image while a finger is pressed on it and returns when the finger lifts. On phones, the autoplay prop alternates both images by itself at regular intervals. The effect needs WebGL, and the prompt tells your AI to provide a static fallback in Nuxt. ### Can I change the images and direction in Mergulho? Yes. Mergulho takes the starting image and the revealed one through the src1 and src2 props, and the displacement strength, angle, noise scale and duration are props too. Images must come from the same domain or with CORS enabled, as the prompt points out, because they become textures on the graphics card. ### Does Mergulho respect reduced motion settings? Yes. When the reduced motion preference is on, Mergulho swaps the images at once, without the animated warp, and still shows the second image on hover. The component also stops drawing when it leaves the screen, which spares the graphics card while people read other sections. ## Related components - [Claquete](https://vibecode.thmtecnologia.com/en/components/claquete/): A photo sequence that changes images with ripples, pixels, a swirl, a burn, a glitch or a circle. - [Chuvisco](https://vibecode.thmtecnologia.com/en/components/chuvisco/): The image shakes, breaks into strips and splits its colors like a faulty TV signal. - [Brasa](https://vibecode.thmtecnologia.com/en/components/brasa/): The photo crumbles into dust from the bottom up, with an orange edge that glows like burning paper. - [Biruta](https://vibecode.thmtecnologia.com/en/components/biruta/): A photo card that reveals text on hover and nudges the image according to the side the cursor came from. - [Retoque](https://vibecode.thmtecnologia.com/en/components/retoque/): Two stacked images or screens and a line in the middle you move with the mouse or a finger to compare. --- 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).