# Bólido Pequenos riscos com cauda atravessam o card na diagonal, como estrelas cadentes, cada um no seu ritmo. > Bólido é um componente do THM Componentes que coloca uma chuva de meteoros dentro de um card ou de uma seção: riscos finos com cauda caem na diagonal, cada um com velocidade e atraso sorteados. Usa só CSS, pesa pouco e funciona bem em cards de destaque e fundos escuros. - Categoria: Efeitos especiais - 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 - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/bolido/ ## Como ele é Lembra uma noite de estrelas cadentes vista por uma janela pequena. Pontinhos cinza-azulados, cada um com uma cauda de 50 pixels que vai sumindo, descem na diagonal, do alto à esquerda para baixo à direita, e vão se apagando no fim do trajeto. São 20 por padrão, e cada meteoro tem duração entre 2 e 9 segundos e um pequeno atraso sorteado, por isso eles não caem em sincronia. O efeito fica preso dentro do elemento pai, que precisa ter posição relativa e esconder o que transborda. Os riscos aparecem com mais clareza sobre fundos escuros. ## Você pode estar procurando isto se pediu algo assim - “estrelas cadentes passando dentro de um card escuro” - “riscos de luz caindo na diagonal no fundo da seção” - “efeito de chuva de meteoros para o card de destaque” - “fundo com clima espacial sem deixar a página pesada” - “algo animado e discreto para um card de plano ou de recurso” - “aqueles risquinhos caindo tipo céu à noite atrás do texto” ## Também chamado de meteoros, meteor shower, chuva de meteoros, shooting stars, estrelas cadentes, falling stars effect ## Quando usar - Card de destaque, de plano ou de recurso em tema escuro - Fundo de uma seção escura com título curto - Telas de lançamento com clima espacial ou noturno - Detalhe animado leve quando a página não comporta WebGL ## Quando evitar - Fundos claros, em que os riscos cinza quase somem, sem trocar a cor - Áreas com muito texto, em que o movimento contínuo distrai ## Como pedir para a sua IA ```text Quero uma chuva de meteoros em CSS dentro do card de destaque da página de preços: riscos finos com cauda caindo na diagonal, nas cores da minha marca, com posições sorteadas só no navegador e versão estática para quem prefere menos movimento. ``` 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 Bólido ### Bólido deixa o site lento? Dificilmente. Bólido anima só com CSS, sem canvas nem JavaScript de animação, e por isso tem peso Leve no THM Componentes. O custo cresce com a quantidade de meteoros, definida pela prop count, que vem em 20; em cards pequenos, menos meteoros costumam bastar. ### Como usar Bólido no Nuxt com SSR? As posições e os tempos de cada meteoro são sorteados na renderização, o que geraria diferença entre o servidor e o navegador. Por isso, a demo de Bólido fica dentro de ClientOnly. O elemento pai também precisa de posição relativa e de overflow oculto, para os meteoros não escaparem do card. ### Bólido respeita quem prefere menos movimento? O componente original anima sempre. O prompt do THM Componentes pede à IA uma versão estática de Bólido para quem ativa a redução de movimento no sistema, o que aqui é simples: basta desligar a animação CSS dos meteoros ou deixar de mostrar os riscos para essa preferência. ## Componentes relacionados - [Cosmonauta](https://vibecode.thmtecnologia.com/componentes/cosmonauta/): Estrelas que saem do centro da tela e correm para as bordas com rastro de luz, como uma nave acelerando. - [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. - [Chispa](https://vibecode.thmtecnologia.com/componentes/chispa/): Pontinhos de luz que piscam e sobem devagar, como purpurina no ar, atrás de um título ou de toda a seção. - [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. - [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. - [Paina](https://vibecode.thmtecnologia.com/componentes/paina/): Flocos de neve caindo devagar pelo fundo da página, com leve desvio para os lados, para campanhas de inverno. --- 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.