FreeBackgrounds

Shooting Stars and Stars Background

Use this component for launch pages, hero sections, waitlists, and dark product moments that need subtle ambient motion.

ReactTailwind CSSMotionBackground

Shooting Star x Star Background

Overview

A starry background with animated shooting streaks and centered headline text.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<ShootingStarsBackground />

Shooting Stars and Stars Background.tsx

tsx

"use client";

import { motion } from "framer-motion";

const stars = Array.from({ length: 30 }, (_, index) => ({
  left: (index * 37) % 100,
  top: (index * 19) % 100,
  delay: (index % 7) * 0.2,
}));

export function ShootingStarsBackground() {
  return (
    <div className="relative flex min-h-[320px] items-center justify-center overflow-hidden rounded-xl border border-white/10 bg-zinc-950 p-6 text-white">
      {stars.map((star, index) => (
        <motion.span
          key={index}
          animate={{ opacity: [0.2, 1, 0.2], x: [0, 24], y: [0, -24] }}
          transition={{ duration: 1.8, repeat: Infinity, delay: star.delay }}
          className="absolute h-px w-10 bg-gradient-to-r from-transparent via-lime-300 to-transparent"
          style={{ left: star.left + "%", top: star.top + "%" }}
        />
      ))}
      <h3 className="relative text-center text-3xl font-black">
        Shooting Star <span className="text-lime-300">x</span> Star Background
      </h3>
    </div>
  );
}