Shooting Stars

A beautiful animated starfield background with shooting stars effect. Perfect for hero sections, landing pages, and space-themed designs.

Preview

Shooting Stars

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/shooting-stars.json

Usage

tsx
17 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ShootingStars } from "@/components/ui/shooting-stars"

export default function Hero() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <ShootingStars 
        colorScheme="purple"
        speed={1.5}
        shootingStarCount={7}
        starCount={80}
      />
      <div className="relative z-10 flex items-center justify-center h-full">
        {/* Your content here */}
      </div>
    </div>
  )
}

Color Schemes

White (Default)

White Stars

Cyan

Cyan Stars

Purple

Purple Stars

Rainbow

Rainbow Stars

Background Options

Midnight Background

Midnight Theme

Transparent Background (Overlay Mode)

Overlay on Gradient

Animation Options

Fast Animation (2x speed)

2x Speed

High Density Stars

High Density

Long Trail Effect

Long Trails

Props

PropTypeDefaultDescription
starCountnumber50Number of twinkling background stars
shootingStarCountnumber5Number of shooting stars
colorScheme'white' | 'cyan' | 'purple' | 'rainbow' | 'custom'whiteColor theme preset for shooting stars
customColorsstring[]undefinedArray of custom colors (used when colorScheme is 'custom')
speednumber1Animation speed multiplier
starSizenumber1Size of twinkling stars in pixels
trailLengthnumber100Length of shooting star trail in pixels
background'default' | 'dark' | 'midnight' | 'none' | stringdefaultBackground gradient preset or custom CSS value
showStarsbooleantrueWhether to show twinkling background stars
minDelaynumber0Minimum delay between shooting star animations (seconds)
maxDelaynumber5Maximum delay between shooting star animations (seconds)
classNamestringundefinedAdditional CSS classes