How to Add a Shooting Stars Background in React (Free)
Learn how to add a stunning shooting stars background to your React app for free using Empire UI's ready-made animated component with full customisation support.
What Is a Shooting Stars Background?
A shooting stars background is an animated UI element that renders streaks of light — resembling meteors or comets — across a dark canvas. It creates a sense of depth, motion, and wonder that immediately draws the user's eye and elevates the perceived quality of any landing page, hero section, or dashboard.
These effects are especially popular in space-themed, SaaS, and portfolio designs where a premium, futuristic aesthetic is desired. Unlike static gradients or flat colours, a shooting stars animation makes a page feel alive without demanding heavy GPU resources.
Empire UI provides a production-ready ShootingStars component as part of its free animated backgrounds collection. The component is built on top of a lightweight HTML5 Canvas API wrapper, meaning it has zero external animation dependencies and works with any React 18+ project.
Prerequisites and Project Setup
Before installing the component you need a React project (Vite, Next.js, or Create React App all work) with Tailwind CSS configured. If you are starting from scratch, the quickest path is npm create vite@latest my-app -- --template react-ts followed by the standard Tailwind initialisation steps.
Install Empire UI from npm:
``bash
npm install empire-ui
# or
yarn add empire-ui
`
The package ships fully tree-shakeable, so only the components you import end up in your bundle. The ShootingStars` component adds roughly 4 kB gzipped to your build.
If you prefer to copy-paste the source directly (no install required), head to the Empire UI component explorer, search for *Shooting Stars*, and click Copy Code. The component is a single .tsx file you can drop into src/components/.
Adding the Shooting Stars Background — Basic Usage
Import and render the component anywhere in your JSX tree. The simplest usage wraps your hero section content:
``tsx
import { ShootingStars } from 'empire-ui';
import { StarsBackground } from 'empire-ui';
export default function Hero() {
return (
<div className="relative min-h-screen bg-neutral-950 flex items-center justify-center overflow-hidden">
{/* Starfield layer */}
<StarsBackground className="absolute inset-0" />
{/* Shooting stars layer */}
<ShootingStars />
{/* Foreground content */}
<div className="relative z-10 text-center">
<h1 className="text-5xl font-bold text-white">Hello Universe</h1>
<p className="mt-4 text-neutral-400">Built with Empire UI</p>
</div>
</div>
);
}
``
The ShootingStars component renders an absolutely-positioned <canvas> that fills its nearest relative parent. You can layer it with the companion StarsBackground component — which renders a static star field — to produce the full night-sky effect shown in the Empire UI demo.
Both components accept a className prop so you can adjust z-index, opacity, or any Tailwind utility without touching the component internals. The canvas is pointer-events-none by default, so it never blocks click or scroll events on underlying content.
Customising Colours, Speed, and Density
The ShootingStars component exposes several props for fine-grained control:
``tsx
<ShootingStars
starColor="#9E00FF"
trailColor="#2EB9DF"
minSpeed={10}
maxSpeed={30}
minDelay={1200}
maxDelay={4200}
/>
`
- **starColor** — the bright tip of each shooting star (hex or CSS colour).
- **trailColor** — the fading gradient trail left behind.
- **minSpeed / maxSpeed** — pixel-per-frame range; lower values feel dreamy, higher values feel energetic.
- **minDelay / maxDelay`** — millisecond interval between new stars spawning.
For a glassmorphism aesthetic pair the shooting stars with frosted-glass cards from the /glassmorphism section. A purple-to-cyan gradient (starColor="#a855f7" + trailColor="#22d3ee") matches the Empire UI brand palette perfectly.
You can also pass className="opacity-60" to blend the canvas subtly into a gradient background, which works well for secondary sections that need a hint of animation without competing with the main hero.
Performance Tips and Accessibility
The canvas animation runs on requestAnimationFrame, so it automatically pauses when the browser tab is hidden, saving battery on mobile devices. On low-end hardware the component detects high frame-drop rates and reduces particle count automatically via an internal performance budget.
For accessibility, ensure that the decorative canvas never receives focus and does not convey information. The Empire UI implementation already sets aria-hidden="true" on the canvas element. If your project targets users with vestibular disorders, respect the prefers-reduced-motion media query:
``tsx
import { useReducedMotion } from 'framer-motion'; // or a tiny custom hook
const prefersReduced = useReducedMotion();
// Conditionally render the animation
{!prefersReduced && <ShootingStars />}
``
Pair the shooting stars background with other animated backgrounds from Empire UI — such as the Aurora, Particles, or Spotlight components — to build varied page sections without repeating the same visual motif. Explore the full catalogue at empire-ui.com/templates.
Going Further — AI-Generated Backgrounds with the MCP Server
Empire UI ships an MCP (Model Context Protocol) server that lets you generate, customise, and export UI components directly from your AI coding assistant. If you use Cursor, Windsurf, or Claude Code, you can prompt it: *"Add a shooting stars background behind the pricing section with a violet trail"* and receive ready-to-paste JSX in seconds.
Learn more about the MCP integration on the /mcp page. It is the fastest way to compose multi-layer animated backgrounds without manually tuning every prop — the AI handles the token values while you focus on product decisions.
For further inspiration, browse the blog for deep-dives into aurora backgrounds, confetti effects, and other free animated React components. Empire UI is committed to keeping every component completely free — no paid tier, no watermark, no strings attached. Check out the custom cursors collection next to pair your animated background with an equally polished cursor experience.
FAQ
Yes, every Empire UI component — including ShootingStars and StarsBackground — is completely free and open source under the MIT licence. There is no paid tier, no usage cap, and no attribution requirement.
Yes. Mark the parent component with 'use client' since the canvas animation relies on browser APIs. The component itself is already client-safe and does not perform any server-side rendering that could cause hydration mismatches.
The default trajectory is diagonal (top-right to bottom-left), mimicking natural meteor showers. You can adjust the angle by passing custom angle props or forking the component source and modifying the canvas vector calculation directly in the animation loop.
Pass a conditional render based on a media-query hook — for example useMediaQuery('(max-width: 768px)') — and simply do not render <ShootingStars /> on small screens. Alternatively, reduce maxSpeed and increase minDelay for a slower, less CPU-intensive effect on mobile.
Yes. Place the video element with position: absolute inside a relative container, then render <ShootingStars /> on top. Make sure the canvas has a higher z-index than the video but lower than your text content layer.