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