# Gude Uma bola de vidro com um redemoinho de tinta índigo e ciano dentro, que gira devagar sobre um chão claro. > Gude é um componente exclusivo do THM Componentes que renderiza em WebGL2 uma esfera de vidro com um redemoinho de tinta índigo e ciano por dentro, com refração em leve arco-íris, reflexos de estúdio, sombra colorida e cáustica no chão. O cursor inclina e agita o vórtice. Serve para heros de tecnologia e produtos premium. - Categoria: Fundos e atmosferas - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/gude/ ## Como ele é Parece um peso de papel de vidro sobre uma mesa clara de estúdio, com uma galáxia de tinta presa lá dentro. No centro da tela, a esfera transparente mostra um vórtice em espiral, índigo no miolo e ciano nos filamentos finos, com um ponto de brilho no meio, girando devagar. As bordas do vidro refletem caixas de luz e distorcem o fundo com um leve arco-íris. No chão, aparecem uma sombra tingida e um foco de luz que cintila com o giro. Ao mover o mouse, a esfera inclina, a câmera se desloca um pouco e movimentos rápidos aceleram o redemoinho. ## Você pode estar procurando isto se pediu algo assim - “uma bola de vidro com fumaça colorida girando dentro” - “esfera 3D transparente para o topo do site de tecnologia” - “aquele orbe de vidro que gira e reage ao mouse, tipo site de IA” - “bola de cristal com uma galáxia dentro para a abertura do evento” - “objeto de vidro realista com reflexo e sombra no chão” - “hero com cara de produto premium em fundo claro” - “algo tipo uma bolinha de gude de vidro com tinta para a página do produto” ## Também chamado de bola de vidro com fumaça, esfera de vidro, glass sphere shader, orbe de vidro, vórtice volumétrico, raymarching de volume, bola de cristal 3D ## Quando usar - Hero de marca de tecnologia, IA ou software com fundo claro - Abertura de evento, conferência ou lançamento - Página de produto premium que precisa de um objeto central marcante - Seção de manifesto com uma frase curta ao lado da esfera ## Quando evitar - Páginas que já têm outro efeito pesado em WebGL - Público com muitos celulares de entrada, em que o raymarching cobra caro - Seções com muito texto, já que a esfera ocupa o centro do enquadramento ## Como pedir para a sua IA ```text Crie no hero uma esfera de vidro em WebGL2 com um vórtice de tinta nas cores da minha marca por dentro, refração, reflexos e cáustica no chão, que incline com o mouse, reduza a qualidade se os quadros caírem, fique estática para movimento reduzido e tenha fallback em CSS. ``` 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 Gude ### Gude funciona no celular? Funciona em aparelhos com WebGL2. Gude vigia o tempo de cada quadro e, se ele subir, reduz a resolução e os passos do raymarching em etapas, voltando a subir quando sobra folga. Sem WebGL2, mostra uma esfera estática desenhada em CSS. Por ser um componente Pesado no THM Componentes, o prompt pede no máximo um efeito desse tipo por página. ### Dá para colocar as cores da minha marca em Gude? Sim. Gude tem duas cores para o vórtice, uma para as áreas mais densas e os reflexos escuros, e uma para o fundo e o chão. O prompt do THM Componentes orienta a IA a usar os tokens do seu projeto. Também dá para ajustar refração, dispersão, densidade da tinta, cáustica e o tamanho da esfera. ### Gude respeita quem prefere menos movimento? Sim. Com a preferência de menos movimento ativa, Gude desenha um único quadro com o vórtice já formado e não anima, nem com o cursor. Se uma prop mudar, a imagem é redesenhada. O componente também pausa fora da tela e quando a aba fica em segundo plano. ## Componentes relacionados - [Quimera](https://vibecode.thmtecnologia.com/componentes/quimera/): Uma forma líquida em 3D que ondula, se funde com um anel e duas cápsulas e gira conforme o mouse. - [Azougue](https://vibecode.thmtecnologia.com/componentes/azougue/): Uma gota de metal espelhado que pulsa devagar, muda de forma e se estica em direção ao cursor. - [Miragem](https://vibecode.thmtecnologia.com/componentes/miragem/): Uma placa de vidro arredondada desliza sobre a foto e curva a imagem nas bordas, como uma lente de verdade. - [Sopro](https://vibecode.thmtecnologia.com/componentes/sopro/): Uma esfera luminosa que respira em espera e pulsa no ritmo da voz quando o assistente ouve ou fala. - [Orvalho](https://vibecode.thmtecnologia.com/componentes/orvalho/): Gotas brilhantes de cor índigo que se juntam e se separam como líquido, e uma delas segue o cursor. --- 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.