# Abismo Anéis e linhas finas formam um túnel que afunila para um ponto, com uma coluna de luz colorida no centro. > Abismo é um componente do THM Componentes que desenha em Canvas um túnel de buraco negro: anéis concêntricos encolhem rumo a um ponto, linhas radiais afunilam e partículas claras sobem do fundo, sob uma coluna de luz em ciano, amarelo e rosa. Funciona nos modos claro e escuro e serve para lançamentos e eventos. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D, Motion for Vue - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/abismo/ ## 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 ```text 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. ## Componentes relacionados - [Vaga-lume](https://vibecode.thmtecnologia.com/componentes/vaga-lume/): Centenas de pontinhos neon em azul, violeta e magenta fluindo em correntes curvas sobre um fundo escuro. - [Disparada](https://vibecode.thmtecnologia.com/componentes/disparada/): Um card no centro de um túnel de grade em 3D, com faixas de luz coloridas correndo pelas paredes até as bordas. - [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. - [Voragem](https://vibecode.thmtecnologia.com/componentes/voragem/): Um anel de luz laranja e azul gira em volta de um centro escuro, como um buraco negro engolindo poeira cósmica. - [Firmamento](https://vibecode.thmtecnologia.com/componentes/firmamento/): Céu noturno com estrelas de três tamanhos subindo devagar e se deslocando de leve quando o mouse passa. --- 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.