Carregando…Carregando…Carregando…Carregando…Streaking meteor animation on an SVG canvas, container-relative — adapted from Aceternity UI.
$ npx kikitocn add shooting-stars@/lib/utilsimport { ShootingStars } from "@/components/ui/cn/shooting-stars/ShootingStars";
export function ShootingStarsExample() {
return (
<ShootingStars />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
minSpeed | number | 10 | Velocidade mínima do meteoro |
maxSpeed | number | 30 | Velocidade máxima do meteoro |
minDelay | number | 1200 | Menor intervalo (ms) entre meteoros |
maxDelay | number | 4200 | Maior intervalo (ms) entre meteoros |
starColor | string | 'var(--ks-text)' | Cor da cabeça do meteoro |
trailColor | string | 'var(--ks-patina)' | Cor do rastro |
starWidth | number | 10 | Espessura da cabeça |
starHeight | number | 1 | Altura da cabeça |
count | number | 1 | Quantas estrelas simultâneas (>1 = efeito 'chuva de meteoros', absorve o componente meteors da Aceternity UI) |
className | string | — | Classes CSS extras |
Meteoro cruzando a tela em intervalos aleatórios (container-relative)
count={15} — várias estrelas simultâneas