# Tarrafa Reflexos de luz dançando como no fundo de uma piscina ao sol, com bordas levemente coloridas. > Tarrafa é um componente exclusivo do THM Componentes que recria a luz cáustica do fundo de uma piscina ao sol: uma rede de filetes claros se deforma sem parar sobre água azul-petróleo, com bordas levemente coloridas e uma lente sutil que segue o cursor. Em WebGL, serve para spas, turismo, bebidas e marcas aquáticas. - Categoria: Fundos e atmosferas - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/tarrafa/ ## 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 ```text 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. ## Componentes relacionados - [Garoa](https://vibecode.thmtecnologia.com/componentes/garoa/): A foto fica debaixo de uma lâmina d'água que ondula com o mouse, com os cliques e com gotas de chuva. - [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. - [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. - [Maré](https://vibecode.thmtecnologia.com/componentes/mare/): Cinco ondas de luz neon, grossas e desfocadas, ondulando sem parar no meio de um fundo escuro. - [Gude](https://vibecode.thmtecnologia.com/componentes/gude/): Uma bola de vidro com um redemoinho de tinta índigo e ciano dentro, que gira devagar sobre um chão claro. --- 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.