Como ele é
Pense num lençol de cetim grafite estendido na diagonal, balançando com uma brisa leve. As dobras descem do canto superior esquerdo para o inferior direito e se deslocam devagar, enquanto a luz desliza pelas cristas com um reflexo frio, azulado na demo. De perto, aparece uma trama fina, como a de um tecido de verdade. Depois de um clique ou toque, o pano se deforma em volta do ponteiro e acompanha o mouse ou o dedo. O fundo ocupa toda a área do elemento pai, e o conteúdo vai por cima, de preferência em texto claro.
Você pode estar procurando isto se pediu algo assim
- fundo que parece um tecido de seda balançando
- aquele fundo escuro de cetim ondulando para site de luxo
- fundo elegante e sóbrio para clínica de estética ou odontologia
- pano preto se mexendo devagar atrás do título, tipo campanha de perfume
- textura de tecido animada para a página de uma marca de moda
- fundo com dobras de seda que mexe quando passo o mouse
Também chamado de
- seda ondulando
- fundo de seda
- satin shader
- fabric shader
- tecido animado
- cetim animado
- silk texture animation
Quando usar
- Hero de marca de moda, joalheria, cosméticos ou perfumaria
- Site de clínica de estética ou de odontologia estética que quer um ar sofisticado
- Página de lançamento de coleção ou de produto premium
- Seção de abertura escura com título curto em texto claro
Quando evitar
- Layouts claros, porque o tecido padrão é escuro
- Páginas que já usam outro efeito em WebGL
- Navegadores sem WebGL2, se não houver uma imagem de reserva no lugar
Como pedir para a sua IA
Crie um fundo em shader GLSL que imite seda escura ondulando no hero da página: dobras diagonais lentas, reflexo no tom da minha marca, pausa fora da tela, versão estática para movimento reduzido e imagem de reserva para navegadores sem WebGL2.
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 Veludo
Dá para mudar a cor de Veludo?
Sim. Veludo tem as props hue, que gira o matiz em graus, saturation, brightness e speed, que acelera ou desacelera as dobras. O tecido nasce escuro, então o ajuste muda o tom dos reflexos. O prompt do THM Componentes orienta a IA a usar as cores do seu projeto.
Veludo funciona no celular?
Funciona em aparelhos com WebGL2, e o toque deforma o tecido sob o dedo. Atenção: Veludo captura o toque para isso, então arrastar o dedo sobre áreas vazias do fundo não rola a página. Se o fundo ocupa a tela inteira no celular, peça à IA para limitar essa interação.
Veludo deixa o site lento?
No THM Componentes, Veludo tem peso Pesado, mas o componente tem duas proteções nativas: pausa quando sai da tela ou quando a aba fica oculta e renderiza em resolução 1x por padrão. Mesmo assim, use um efeito WebGL pesado por página e compare LCP e INP antes e depois.
