# Varal Your page content folds and sways slowly, like a light piece of cloth in a breeze. > Varal is a THM Componentes component that makes a block of HTML ripple like light fabric, in slow and constant motion. A vector field computed in a WebGL2 shader folds the image of the page while the original HTML stays clickable underneath. It is an experimental effect meant for artistic proofs of concept. - 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: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/varal/ ## What it looks like It looks like a page printed on a silk scarf hanging on a clothesline. Text, rules and blocks curve into soft folds that keep changing slowly, and at the default strength everything stays readable, only warped. The effect does not react to the mouse: it animates on its own, and you can adjust how strong the folds are, how large they are and how fast they move. The result is drawn on a canvas on top, with the real HTML underneath and its links and buttons working. When the area leaves the screen or the tab is hidden, the animation pauses. ## You may be looking for this if you asked for something like - “make my page ripple like a cloth in the wind” - “a fabric effect on top of my site content” - “text that waves like a flag but is still real text” - “a soft, constant distortion for an artistic portfolio piece” - “something unusual to show in a design presentation” - “a site that looks like moving silk, a WebGL experiment” ## Also known as cloth effect, fabric distortion, vector field distortion, flag wave effect, silk page effect, rippling page effect ## When to use - Artistic proofs of concept and portfolio pieces - Editorial or fashion project covers at the prototype stage - Front-end talks and demos in a controlled setup - Short sections with a large headline and little text ## When to avoid - Client sites in production: the prompt limits it to prototypes - Long text, forms and areas that need comfortable reading - Pages that already run other WebGL effects ## How to ask your AI ```text I want a WebGL2 cloth effect on a block of HTML in my prototype: the content sways slowly like light fabric, the HTML stays clickable underneath, the animation pauses when off screen and there is 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 Varal ### Can Varal go on a production site? It is not recommended. Varal depends on an experimental browser API and, without it, on a copy of the HTML rendered through WebGL2. That is why THM Componentes rates it Experimental, and the prompt tells your AI to keep it to prototypes and never ship it on a client production site. ### Does Varal react to the mouse? No. Varal turns pointer interaction off and animates by itself, with folds that keep changing. Strength, fold size and speed are props. If you want the page to react to the cursor, Remanso sends ripples out from the mouse on the same foundation. ### Does Varal respect reduced motion settings? The THM Componentes prompt asks your AI for a static version of Varal for people who turn on reduced motion in their system settings. On top of that, the animation pauses by itself when the component leaves the screen or the tab goes to the background, which saves processing while nobody is watching. ## Related components - [Crisol](https://vibecode.thmtecnologia.com/en/components/crisol/): Your real HTML runs through a graphics card effect, like ripples on water, and stays clickable. - [Remanso](https://vibecode.thmtecnologia.com/en/components/remanso/): Your page content looks like it sits under a thin layer of water and ripples wherever the mouse goes. - [Taquara](https://vibecode.thmtecnologia.com/en/components/taquara/): Spin the mouse wheel over it and the content bends like a sheet of paper, then settles back flat. - [Labareda](https://vibecode.thmtecnologia.com/en/components/labareda/): Flames rise from the bottom of the page, heat makes the content ripple and orange sparks fly upward. - [Estandarte](https://vibecode.thmtecnologia.com/en/components/estandarte/): Your image becomes a fabric flag that ripples in the wind and can be pulled with the mouse or a finger. - [Veludo](https://vibecode.thmtecnologia.com/en/components/veludo/): Dark satin fabric with diagonal folds that ripple slowly, with a cool sheen and a fine woven texture. --- 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).