# Veludo Tecido de cetim escuro com dobras diagonais que ondulam devagar, com brilho frio e textura de trama fina. > Veludo é um fundo animado do THM Componentes que imita um tecido de seda escuro em movimento: dobras diagonais ondulam devagar, com reflexos frios e uma trama fina visível de perto. Usa um shader GLSL com WebGL2 e combina com marcas de moda, beleza, odontologia estética e luxo que querem um hero sóbrio e elegante. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, OGL - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/veludo/ ## 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 ```text 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. ## Componentes relacionados - [Lusco-fusco](https://vibecode.thmtecnologia.com/componentes/lusco-fusco/): Manchas de índigo, ciano e lavanda que se misturam e derivam devagar, com um grão leve de filme. - [Névoa](https://vibecode.thmtecnologia.com/componentes/nevoa/): Fundo animado em CSS com faixas de luz azul e violeta que deslizam devagar, como uma aurora boreal. - [Flâmula](https://vibecode.thmtecnologia.com/componentes/flamula/): Cinco fitas coloridas em camadas, com sombras suaves, ondulando devagar de um lado a outro da tela. - [Estandarte](https://vibecode.thmtecnologia.com/componentes/estandarte/): Sua imagem vira uma bandeira de tecido que ondula ao vento e pode ser puxada com o mouse ou com o dedo. - [Madrepérola](https://vibecode.thmtecnologia.com/componentes/madreperola/): Superfície líquida em rosa, lilás e verde-água que escorre e se dobra sem parar, como um holograma. --- 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.