# Voragem Um anel de luz laranja e azul gira em volta de um centro escuro, como um buraco negro engolindo poeira cósmica. > Voragem é um fundo em shader do THM Componentes que desenha um buraco negro: um anel inclinado de luz, laranja de um lado e azul do outro, cercado por correntes de fumaça que giram em espiral em volta de um centro escuro. Roda em WebGL2 e funciona bem em heros conceituais de tecnologia, ciência e eventos. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, OGL - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/voragem/ ## Como ele é Lembra as imagens de buraco negro dos filmes de ficção científica. No centro há um círculo escuro, contornado por um anel fino e brilhante, inclinado na diagonal: o lado superior direito puxa para o laranja e o vermelho, o inferior esquerdo para o ciano e o azul. Fios de luz que parecem fumaça escorrem para dentro do anel e giram devagar, sem parar. A animação segue sozinha, sem reagir ao mouse. As áreas vazias e o centro são transparentes, então a cor da página aparece por trás: sobre preto, o anel brilha no espaço; sobre branco, o visual fica claro e leitoso. ## Você pode estar procurando isto se pediu algo assim - “fundo de buraco negro girando para site de tecnologia” - “aquele anel de luz laranja e azul tipo filme de espaço” - “fundo escuro com um portal de luz no meio da tela” - “algo cósmico e misterioso para o hero de um evento” - “efeito de singularidade com fumaça girando atrás do título” - “fundo espacial com brilho em espiral para lançamento de produto” ## Também chamado de fundo de buraco negro, buraco negro animado, singularity shader, disco de acreção, accretion disk, fundo cósmico ## Quando usar - Hero conceitual de produto de tecnologia, ciência ou IA - Abertura de evento, palestra ou lançamento com tema espacial - Seção de destaque sobre fundo escuro, com título curto e centralizado - Página de manifesto que quer um visual misterioso e marcante ## Quando evitar - Páginas de fundo claro, em que o efeito fica desbotado - Páginas que já usam outro efeito em WebGL - Áreas com texto longo, porque o anel no centro disputa a atenção ## Como pedir para a sua IA ```text Crie um fundo em shader GLSL com um buraco negro animado no hero: anel de luz girando com as cores da minha marca sobre fundo escuro, pausa fora da tela, versão estática para movimento reduzido e imagem de reserva para navegadores sem WebGL2. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Voragem ### Voragem funciona em página de fundo claro? Funciona, mas muda de cara. Voragem deixa o centro e as áreas vazias transparentes, então a cor da página aparece por trás. Sobre preto, o anel brilha como um buraco negro no espaço; sobre branco, o resultado fica claro e leitoso. Para o efeito de espaço, coloque um fundo escuro no elemento pai. ### Dá para trocar as cores de Voragem? Sim. Voragem aceita hue, que gira o matiz das cores em graus, saturation e brightness, além de speed para a velocidade do giro. Há ainda uma camada opcional de granulado pela prop noise. O prompt do THM Componentes orienta a IA a ajustar tudo às cores do seu projeto. ### Voragem funciona no celular? Funciona em aparelhos com WebGL2. Voragem não reage ao toque, mas a camada de shader captura o arraste do dedo sobre o fundo, o que impede a rolagem nessas áreas; peça à IA para desativar os eventos de ponteiro dessa camada. Como tem a classificação Pesado, já pausa fora da tela e renderiza em resolução 1x. ## Componentes relacionados - [Abismo](https://vibecode.thmtecnologia.com/componentes/abismo/): Anéis e linhas finas formam um túnel que afunila para um ponto, com uma coluna de luz colorida no centro. - [Fronteira](https://vibecode.thmtecnologia.com/componentes/fronteira/): Um portal de ficção científica com núcleo de luz, anéis, cristais flutuantes e poeira estelar, girando no espaço. - [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. - [Arenito](https://vibecode.thmtecnologia.com/componentes/arenito/): Uma escultura abstrata de camadas finas flutua e se retorce num céu claro, iluminada por um sol. - [Clarão](https://vibecode.thmtecnologia.com/componentes/clarao/): Nuvens escuras de tempestade iluminadas por dentro por raios azuis, dourados e brancos que vêm e vão. --- 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.