ShootingStarsGrid

A cinematic hero-section background: a faint grid bathed in dark-emerald glow, with thin white streaks that race along grid lanes like falling stars. Built on Motion.dev with compositor-only transforms for smooth 60fps.

UniqueUI CLI

npx uniqueui add shooting-stars-grid

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/shooting-stars-grid.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

meteor shower

Shooting Stars

Grid-snapped streaks, emerald vignette.

Usage

"use client";
import { ShootingStarsGrid } from "@/components/ui/shooting-stars-grid";

export default function Example() {
  return (
    <div className="h-[400px] w-full rounded-xl overflow-hidden">
      {/* Default: multi-hue palette (white, mint, cyan, amber, pink, violet) */}
      <ShootingStarsGrid
        starCount={18}
        speed={2.5}
        gridSize={80}
      />

      {/* Monochrome — every streak picks up the same hue */}
      {/* <ShootingStarsGrid starCount={18} color="#7fe7ff" /> */}

      {/* Custom palette — streaks sampled from this set */}
      {/* <ShootingStarsGrid
        starCount={20}
        color={["#ff9ecf", "#c89bff", "#ffffff"]}
      /> */}
    </div>
  );
}

Props

Prop	Type	Description
`starCount`	`number`	Number of concurrent shooting-star streaks. Clamped to 1–80.
`speed`	`number`	Base travel duration in seconds. Each star is randomised ±30% around this value.
`glowStrength`	`number`	Multiplier (0–1) applied to the streak's box-shadow intensity.
`gridSize`	`number`	Pixel spacing between grid lines; streaks snap to these lanes.
`direction`	`"horizontal" \| "vertical" \| "both"`	Axis streaks travel along. "both" picks per star randomly.
`color`	`string \| readonly string[]`	Streak colour. Pass a single CSS colour for a monochrome shower, an array of colours to sample from per star, or omit for the built-in multi-hue palette (white, mint, cyan, amber, pink, violet).
`children`	`React.ReactNode`	Optional content layered above the background at z-index 10.
`className`	`string`	Additional classes merged onto the outer container.