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