# HTML Cloth

O conteúdo da página se dobra e ondula devagar, como um pano leve balançando com a brisa.

> O HTML Cloth é um componente do THM Componentes que faz um bloco de HTML ondular como um tecido leve, num movimento lento e contínuo. Um campo vetorial calculado em shader WebGL2 dobra a imagem da página, enquanto o HTML original segue clicável por baixo. É um efeito experimental, indicado para provas de conceito artísticas.

- Categoria: Efeitos especiais
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Experimental: usa uma API de navegador ainda em teste, com alternativa automática quando ela não existe
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/html-cloth/

## Como ele é

Parece uma página impressa num lenço de seda pendurado no varal. Textos, linhas e blocos se curvam em dobras suaves que mudam o tempo todo, devagar, e com a intensidade padrão tudo continua legível, só que deformado. O efeito não reage ao mouse: ele anima sozinho, e você ajusta a força das dobras, o tamanho delas e a velocidade. O resultado aparece num canvas por cima, com o HTML real por baixo e os links e botões funcionando. Quando a área sai da tela ou a aba fica oculta, a animação pausa.

## Você pode estar procurando isto se pediu algo assim

- “deixar a página ondulando como um pano ao vento”
- “efeito de tecido em cima do conteúdo do site”
- “texto que balança como bandeira, mas continua sendo texto de verdade”
- “distorção suave e contínua para uma peça artística de portfólio”
- “um efeito diferente para mostrar numa apresentação de design”
- “site com cara de seda se mexendo, tipo experimento de WebGL”

## Também chamado de

efeito de tecido, cloth effect, fabric distortion, distorção de tecido, vector field distortion, flag wave effect, HTML em canvas

## Quando usar

- Provas de conceito artísticas e peças de portfólio
- Capas de projetos editoriais ou de moda em fase de protótipo
- Apresentações e demos de front-end em ambiente controlado
- Seções curtas, com título grande e pouco texto

## Quando evitar

- Sites de cliente em produção: o prompt restringe o uso a protótipos
- Textos longos, formulários e áreas que exigem leitura confortável
- Páginas que já rodam outros efeitos em WebGL

## Como pedir para a sua IA

```text
Quero um efeito de tecido em WebGL2 sobre um bloco de HTML do meu protótipo: o conteúdo ondula devagar como um pano leve, o HTML segue clicável por baixo, a animação pausa fora da tela e existe versão estática para quem prefere menos movimento.
```

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 HTML Cloth

### O HTML Cloth pode ir para um site em produção?

Não é o indicado. O HTML Cloth depende de uma API experimental do navegador e, sem ela, de uma cópia do HTML passada por WebGL2. Por isso é classificado como Experimental no THM Componentes, e o prompt orienta a IA a restringir o uso a protótipos, nunca em produção de cliente.

### O HTML Cloth reage ao mouse?

Não. O HTML Cloth desliga a interação do ponteiro e anima sozinho, com dobras que mudam o tempo todo. A força, o tamanho das dobras e a velocidade são props. Se a ideia é a página reagir ao cursor, o HTML Liquid solta ondas a partir do mouse, sobre a mesma base.

### O HTML Cloth respeita quem prefere menos movimento?

O prompt do THM Componentes pede à IA uma versão estática do HTML Cloth para quem ativa a redução de movimento no sistema. Além disso, a animação pausa sozinha quando o componente sai da tela ou quando a aba fica em segundo plano, o que poupa processamento enquanto ninguém vê.

## Componentes relacionados

- [HTML in Canvas](https://vibecode.thmtecnologia.com/componentes/html-in-canvas/): Seu HTML de verdade passa por um efeito gráfico da placa de vídeo, como ondas de água, e segue clicável.
- [HTML Liquid](https://vibecode.thmtecnologia.com/componentes/html-liquid/): O conteúdo da página parece estar sob uma lâmina d'água e solta ondas por onde o mouse passa.
- [HTML Drag](https://vibecode.thmtecnologia.com/componentes/html-drag/): Ao girar a roda do mouse sobre ele, o conteúdo se curva como uma folha de papel e depois volta ao lugar.
- [HTML Blaze](https://vibecode.thmtecnologia.com/componentes/html-blaze/): Chamas sobem da base da página, o calor faz o conteúdo ondular e faíscas laranja voam para cima.
- [Cloth](https://vibecode.thmtecnologia.com/componentes/cloth/): Sua imagem vira uma bandeira de tecido que ondula ao vento e pode ser puxada com o mouse ou com o dedo.
- [Silk Background](https://vibecode.thmtecnologia.com/componentes/silk-background/): Tecido de cetim escuro com dobras diagonais que ondulam devagar, com brilho frio e textura de trama fina.

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