Seda em Ondas Ultra

Sobre este efeito

A seção ganha um tecido de cor que ondula devagar, como seda ao vento. Dobras compridas sobem e descem, a face que pega luz brilha como cetim, e cinco cores escorrem umas nas outras em manchas esticadas. Onde o mouse (ou o dedo) passa, o tecido levanta num calombo que acompanha o movimento e assenta quando ele sai. O movimento é um laço exato: depois de uma volta, tudo se repete igual, sem emenda. O alto da seção escurece um pouco pra o texto ler bem, e o conteúdo fica por cima do tecido. Parado na tela, desenha 30 quadros por segundo; com o cursor mexendo, até 60; fora da tela ou com a aba escondida, nada. Com a preferência de menos movimento, o tecido fica parado numa pose. Cinco cores, tempo da volta, altura das dobras, tamanho das manchas, inclinação, quanto o cursor levanta, brilho e sombra atrás do texto ajustáveis. WebGL sem biblioteca; sem WebGL, fica um degradê parado com as mesmas cores.

Ficha

Categoria

Fundo

Onde combina

topo (hero), fundo, chamada pra ação

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

7,4 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 7% do processador de um celular intermediário enquanto anima.

Placa de vídeo

Desenha com a placa de vídeo; em celular muito simples a fluidez depende dela.

Na loja desde

25/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-seda-em-ondas.

Assuntos

• fundo
• degradê
• gradiente
• seda
• tecido
• ondas
• cores
• cursor
• hero
• webgl