Como ele é
É a rede de luz que aparece no fundo de uma piscina num dia de sol. Sobre um azul-petróleo, mais claro no alto e escurecido nas bordas, filetes de luz branco-azulada formam células irregulares que se esticam, se partem e se reorganizam o tempo todo, em duas camadas de tamanhos diferentes. Onde as camadas se cruzam, a luz fica mais forte. As bordas dos filetes mostram uma separação suave de cores, como um arco-íris discreto. Ao passar o mouse, uma lente quase imperceptível desloca o desenho ao redor do ponteiro. O conteúdo fica por cima.
Você pode estar procurando isto se pediu algo assim
- fundo com aquele reflexo de luz de piscina se mexendo
- efeito de água com sol batendo para o site de um spa
- luz ondulando como no fundo do mar para a página de turismo
- fundo azul com reflexos de água para marca de bebida
- aquela rede de luz que aparece embaixo d'água
- fundo aquático calmo e elegante para a seção do hotel
- efeito de luz na água que reage de leve ao mouse
Também chamado de
- cáustica
- luz de piscina
- water caustics
- reflexo de água animado
- underwater light effect
- Voronoi animado
- padrão de luz na água
Quando usar
- Seções de spa, clínica de estética ou bem-estar com clima de água
- Páginas de turismo, hotel, resort ou passeio de barco
- Marcas de bebidas, água mineral ou cosméticos com ativo marinho
- Faixas de destaque com título curto sobre fundo azul
Quando evitar
- Áreas com texto pequeno e longo, porque os filetes de luz disputam com as letras
- Marcas sem relação com água, em que o efeito parece fora de contexto
Como pedir para a sua IA
Crie um fundo de luz cáustica em WebGL, como o fundo de uma piscina ao sol, para a seção de destaque do site: cores da minha marca, dispersão sutil, pausa fora da tela, imagem parada para movimento reduzido e fallback estático no Nuxt.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Tarrafa
Tarrafa pesa no celular?
É um efeito Médio no THM Componentes. Tarrafa desenha tudo num único shader, limita a densidade de pixels a 1,5 e pausa quando sai da tela, então deixa de desenhar enquanto a pessoa lê outras partes. Sem mouse, a lente fica parada num ponto, mas a luz segue em movimento. Vale comparar o LCP antes e depois.
Dá para trocar o azul da água em Tarrafa?
Sim. Tarrafa tem uma cor para a água e outra para a luz, além de props de velocidade, escala do padrão, brilho e dispersão cromática. O prompt do THM Componentes orienta a IA a usar os tokens de cor do seu projeto. Com a dispersão em zero, os filetes ficam sem as bordas coloridas.
Tarrafa respeita quem prefere menos movimento?
Sim. Tarrafa consulta a preferência de movimento reduzido a cada quadro: quando ela está ativa, o padrão de luz congela numa imagem fixa, e só a lente discreta do cursor continua respondendo. Se a pessoa mudar a preferência com a página aberta, o efeito se ajusta sem recarregar.
