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
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.
