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
- efeito bandeira ao vento
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
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 Varal
Varal pode ir para um site em produção?
Não é o indicado. Varal depende de uma API experimental do navegador e, sem ela, de uma cópia do HTML passada por WebGL2. Por isso o componente é 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.
Varal reage ao mouse?
Não. Varal desliga a interação do ponteiro e anima por conta própria, 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, Remanso solta ondas a partir do mouse, sobre a mesma base.
Varal respeita quem prefere menos movimento?
O prompt do THM Componentes pede à IA uma versão estática de Varal 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ê.
