# HTML Liquid

Your page content looks like it sits under a thin layer of water and ripples wherever the mouse goes.

> HTML Liquid is a THM Componentes component that shows live HTML as if it were under a thin layer of water: the surface ripples slowly all the time, and mouse movement sends waves spreading out from the cursor. Built on WebGL2, it keeps the original HTML clickable and suits interactive brand demos.

- Category: Special effects
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Experimental: uses a browser API still in testing, with an automatic fallback when it is missing
- Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL
- Interaction: Mouse, Touch
- URL: https://vibecode.thmtecnologia.com/en/components/html-liquid/

## What it looks like

It is like looking at a page through the water of a shallow pool. At the default strength, text and blocks shimmer with fine, constant waves without losing readability. When the cursor passes, rings of waves spread from where it is, push the content sideways and calm down shortly after the mouse stops. A tap on the screen does the same from the finger. Wave density, strength and speed are adjustable. The effect sits on a canvas on top, with the real HTML underneath, and it pauses when it leaves the screen.

## You may be looking for this if you asked for something like

- “a page that keeps rippling as if it were underwater”
- “a water effect on top of my site when I move the mouse”
- “ripples coming out of the cursor over the page text”
- “give the interface a liquid look for a brand demo”
- “a water distortion over the content, like wet glass”
- “that pool effect where the page wobbles and the mouse makes little waves”

## Also known as

water effect, liquid distortion, water ripple effect, liquid refraction, underwater effect, cursor ripple, HTML in canvas

## When to use

- Interactive brand demos and launch activations at the prototype stage
- Portfolio pieces that need to react to visitors
- Concept presentations for an agency or client before the final build

## When to avoid

- Client sites in production: the prompt limits it to prototypes
- Forms and long text, where the rippling gets in the way of reading
- Pages that already run other WebGL effects

## How to ask your AI

```text
I want a WebGL2 liquid refraction effect on a block of HTML in my prototype: the surface ripples slowly like water and the mouse sends waves out from the cursor, with the HTML clickable underneath, a pause when off screen and a static version for people who prefer 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 HTML Liquid

### Does HTML Liquid work on phones?

It works on devices with WebGL2: the constant ripples run on their own and a tap sends waves out from the finger. Because HTML Liquid is rated Experimental in THM Componentes, the prompt asks for mobile testing, an LCP and INP comparison and use in prototypes only.

### Do buttons keep working with HTML Liquid?

Yes. HTML Liquid draws the waves on a canvas that ignores clicks and keeps the original HTML underneath, so links, buttons and text selection work as usual. Screen readers also read the real content, because the effect canvas is hidden from them.

### Can I make the HTML Liquid ripples more subtle?

Yes. HTML Liquid has props for displacement strength, wave density, liquid speed and pointer smoothing. With a low strength the text barely moves, with only a slight shimmer, and you can also lower the render resolution on weaker devices.

## Related components

- [HTML in Canvas](https://vibecode.thmtecnologia.com/en/components/html-in-canvas/): Your real HTML runs through a graphics card effect, like ripples on water, and stays clickable.
- [HTML Cloth](https://vibecode.thmtecnologia.com/en/components/html-cloth/): Your page content folds and sways slowly, like a light piece of cloth in a breeze.
- [HTML Chromatic](https://vibecode.thmtecnologia.com/en/components/html-chromatic/): As the mouse moves over the page, red and blue peel away from the content, like a 3D image seen without the glasses.
- [Water Ripple](https://vibecode.thmtecnologia.com/en/components/water-ripple/): The photo sits under a sheet of water that ripples with the mouse, with clicks and with raindrops.
- [Liquid Glass Effect](https://vibecode.thmtecnologia.com/en/components/liquid-glass/): A glass panel that bends whatever passes behind it, with refracting edges that split the colors.
- [Liquid Glass](https://vibecode.thmtecnologia.com/en/components/thm-liquid-glass/): A rounded slab of glass glides over the photo and bends the image at its edges, like a real lens.

---
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).