Como ele é
Lembra a ilustração clássica de um poço de gravidade, desenhada a lápis fino. Uma série de anéis ovais concêntricos encolhe sem parar em direção a um ponto perto da base, cortada por linhas que convergem como raios, formando um túnel. Pequenas partículas claras sobem do fundo do túnel e se espalham. No centro, uma faixa vertical de luz desfocada percorre tons de ciano, amarelo e rosa num ciclo de cinco segundos, e um brilho roxo tinge a parte de baixo. As bordas se apagam em branco no modo claro e em preto no escuro, que ganha também linhas de varredura de monitor antigo.
Você pode estar procurando isto se pediu algo assim
- fundo de buraco negro para o topo do site de um evento
- túnel que puxa tudo para o centro, tipo ficção científica
- fundo com anéis e linhas indo para um ponto, tipo vórtice
- hero de lançamento com cara de espaço e luz colorida
- fundo animado de ciência e inovação, sem 3D pesado
- aquele efeito de túnel com um feixe de luz no meio
- fundo escuro com linhas de monitor antigo e brilho neon
Também chamado de
- fundo buraco negro
- túnel de anéis
- efeito túnel
- tunnel effect
- warp tunnel
- poço gravitacional
- wormhole background
Quando usar
- Hero de lançamento de produto ou de nova versão
- Página de evento, hackathon ou conferência de tecnologia
- Seções sobre ciência, astronomia, pesquisa ou inovação
- Telas de abertura com título curto e uma única chamada
Quando evitar
- Páginas longas em que o fundo sai da vista: a animação não pausa sozinha fora da tela
- Marcas de tom sereno, em que o feixe colorido e o túnel chamam atenção demais
- Celulares fracos, porque o Canvas usa a densidade total de pixels da tela
Como pedir para a sua IA
Crie um fundo animado de buraco negro em Canvas para o hero do lançamento: anéis e linhas afunilando num túnel, partículas subindo e um feixe de luz nas cores da minha marca, com versão estática para movimento reduzido, pausa fora da tela e modo escuro.
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 Abismo
Abismo respeita quem prefere menos movimento?
O componente original anima sempre: os anéis, as partículas e o feixe de luz não param. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a preferência de menos movimento, que em Abismo pode ser o túnel desenhado uma vez, sem o ciclo do feixe.
Dá para trocar as cores de Abismo?
Sim. Abismo tem props para a cor dos anéis e das linhas e para a cor RGB das partículas. O feixe central e o brilho roxo usam cores fixas no código, e o prompt do THM Componentes orienta a IA a substituir essas cores pelos tokens do seu projeto.
Abismo funciona no modo escuro?
Sim. Abismo usa as variantes dark do Tailwind: no modo escuro, as bordas se apagam em preto, as linhas do túnel ficam um pouco mais visíveis e surgem linhas de varredura finas por cima. No modo claro, as bordas se apagam em branco. O prompt pede para confirmar que o projeto usa Tailwind CSS v4.
