React Shooting Stars Background

Unlike typical meteors that just fall from top to bottom, these shooting stars spawn from any edge of the screen—top, bottom, left, or right—and streak diagonally across. It makes the sky feel more dynamic and unpredictable. Each star has a gradient trail that fades behind it, and they scale up slightly as they travel (gives a sense of them coming toward you). The timing is randomized between min and max delay, so sometimes you get clusters and other times quiet moments—feels more like actual stargazing. It's SVG-based with requestAnimationFrame, so smooth and efficient. Great for space themes, portfolios, or any dark UI that wants some cosmic flair.

React Shooting Stars Background preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/shooting-stars.json

npx shadcn@latest add https://www.shadcn.io/r/shooting-stars.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/shooting-stars.json

bunx shadcn@latest add https://www.shadcn.io/r/shooting-stars.json

Related Components

FAQ