# Disparada Um card no centro de um túnel de grade em 3D, com faixas de luz coloridas correndo pelas paredes até as bordas. > Disparada é um contêiner do THM Componentes que envolve o conteúdo num túnel de grade em perspectiva: as quatro paredes convergem para o centro, e faixas de luz coloridas correm por elas em direção às bordas, como numa nave em velocidade de dobra. Usa CSS 3D, sem WebGL, e serve para destacar planos, depoimentos e ofertas. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/disparada/ ## Como ele é Parece olhar para dentro de um corredor de grade no instante em que uma nave entra em velocidade de dobra. As quatro paredes de uma caixa em perspectiva, desenhadas com linhas finas, convergem para o centro, onde fica o seu conteúdo, como um card. Pelas paredes, faixas de luz coloridas, com a ponta forte e a cauda se apagando, disparam do fundo em direção às bordas em ciclos de três segundos, com atrasos sorteados. Cada faixa ganha uma cor aleatória e um comprimento diferente. A grade usa a cor de borda do tema, e o contêiner tem borda e cantos arredondados. ## Você pode estar procurando isto se pediu algo assim - “card no meio de um túnel com luzes passando, tipo velocidade da luz” - “efeito de hiperespaço em volta do plano de preço” - “destacar um depoimento com um fundo de corredor em 3D” - “fundo de grade em perspectiva com feixes coloridos correndo” - “aquele efeito de nave entrando na velocidade da luz atrás do card” - “deixar a oferta principal com cara de tecnologia sem usar WebGL” - “moldura animada que puxa o olhar para o centro da seção” ## Também chamado de efeito warp, túnel de grade, velocidade de dobra, fundo de hiperespaço, hyperspace effect, perspective grid, warp speed tunnel ## Quando usar - Destacar o card do plano recomendado numa tabela de preços - Moldura para um depoimento, uma conquista ou uma oferta especial - Seção de anúncio de produto de tecnologia, IA ou jogos - Tela de boas-vindas ou de conclusão com uma mensagem central ## Quando evitar - Vários cards com o efeito na mesma tela, que assim perde o papel de destaque - Marcas de visual clássico ou discreto, com as quais as faixas coloridas destoam ## Como pedir para a sua IA ```text Crie um contêiner com efeito de túnel em perspectiva, estilo velocidade de dobra, ao redor do card do plano recomendado: grade fina nas paredes e feixes de luz nas cores da minha marca correndo para as bordas, só com CSS, parado para movimento reduzido e bom no celular. ``` 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 Disparada ### Disparada pesa na página? Pouco. Disparada monta o túnel com transformações CSS 3D e anima doze faixas de luz por padrão, três por parede, sem canvas nem WebGL, e a classificação no THM Componentes é Leve. As animações continuam rodando fora da tela, por isso o prompt pede à IA para comparar LCP e INP antes e depois. ### Dá para usar as cores da marca em Disparada? Em parte. A cor da grade vem da prop gridColor, cujo padrão, hsl(var(--border)), espera a variável --border no formato de números HSL; se o seu tema guarda a cor completa, passe a cor direto. Já os feixes de Disparada sorteiam uma cor qualquer a cada montagem, sem prop própria, e o prompt do THM Componentes orienta a IA a substituir essas cores pelos tokens do projeto. ### Disparada funciona no celular? Funciona: Disparada usa CSS 3D, suportado pelos navegadores atuais, e não depende de mouse ou toque. A partir de telas médias, o contêiner tem um espaçamento interno grande que deixa o conteúdo no centro do túnel; no celular esse espaçamento não existe, então revise o respiro do card. Para movimento reduzido, o prompt pede à IA uma versão estática. ## Componentes relacionados - [Asfalto](https://vibecode.thmtecnologia.com/componentes/asfalto/): Uma estrada noturna com rastros de faróis passando em alta velocidade, que acelera quando você segura o clique. - [Satélite](https://vibecode.thmtecnologia.com/componentes/satelite/): Um pequeno feixe de luz colorida dá voltas pela borda de um card ou seção, como um cometa contornando a moldura. - [Pavio](https://vibecode.thmtecnologia.com/componentes/pavio/): Cartão com um feixe de luz que dá voltas pela borda e um brilho suave que acompanha o mouse por dentro. - [Tabuleiro](https://vibecode.thmtecnologia.com/componentes/tabuleiro/): Uma parede de cartões com imagem que você arrasta para qualquer lado, sem nunca chegar ao fim. - [Luar](https://vibecode.thmtecnologia.com/componentes/luar/): Um cartão com um brilho circular suave que acompanha o cursor e some quando o mouse sai. --- 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.