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