All Components

Animated Star Banner

This StarBanner component creates a dynamic star field animation featuring randomly positioned pulsating stars and occasional shooting stars. Below is a breakdown of how the components work together to create this cosmic effect.

Watch the tutorial on YouTube

StarBanner Component Code

import React from "react";
import ShootingStar from "./ShootingStar";

const Sky = ({ numberOfStars }: { numberOfStars: number }) => {
const stars = Array.from({ length: numberOfStars }).map((_, index) => {
  const top = Math.random() * 100;
  const left = Math.random() * 100;

  return (
    <div
      key={index}
      className="absolute size-px rounded-full bg-white"
      style={{
        top: `${top}%`,
        left: `${left}%`,
      }}
    />
  );
});

return (
  <div className="relative h-full w-full">
    {stars}
    <ShootingStar />
  </div>
);
};
  • Star Generation: Creates an array of stars using Array.from(), generating random positions and animation durations
  • Random Positioning: Uses Math.random() * 100 to spread stars across the entire container
  • Pulsing Animation: Tailwind's animate-pulsing creates a twinkling effect with randomized durations (3-10 seconds)

ShootingStar Component Code


"use client";
import React, { useState, useEffect } from "react";

const ShootingStar = () => {
const [position, setPosition] = useState({ top: "40%", left: "10%" });
const [isVisible, setIsVisible] = useState(false);

useEffect(() => {
  const interval = setInterval(() => {
    const top = Math.random() * 100;
    const left = Math.random() * 100;
    setPosition({ top: `${top}%`, left: `${left}%` });
    setIsVisible(true);

    setTimeout(() => {
      setIsVisible(false);
    }, 1000);
  }, 4000);

  return () => clearInterval(interval);
}, []);

return (
  <div>
    {isVisible && (
      <svg
        width="67"
        height="68"
        viewBox="0 0 67 68"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        style={{ top: position.top, left: position.left }}
        className="absolute z-10 animate-shooting"
      >
        <g filter="url(#filter0_f_928_3155)">
          <circle cx="59" cy="8" r="2" fill="white" fillOpacity="1" />
        </g>
        <path
          d="M59.3535 8.35355L0.353512 67.3535"
          stroke="url(#paint0_linear_928_3155)"
          strokeOpacity="1"
          strokeWidth="0.5"
          strokeLinecap="round"
        />
        <defs>
          <filter
            id="filter0_f_928_3155"
            x="51"
            y="0"
            width="16"
            height="16"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="3"
              result="effect1_foregroundBlur_928_3155"
            />
          </filter>
          <linearGradient
            id="paint0_linear_928_3155"
            x1="58.6464"
            y1="7.64645"
            x2="-0.353557"
            y2="66.6464"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="white" />
            <stop offset="1" stopColor="#1D1D20" />
          </linearGradient>
        </defs>
      </svg>
    )}
  </div>
);
};

export default ShootingStar;
  • Random Interval Animation: Uses useEffect to create a shooting star every 4 seconds
  • Dynamic Positioning: Randomizes location using percentage-based coordinates
  • Visibility Control: Shows the star for 1 second using setTimeout

CSS Keyframes for Shooting Star Animation

To create a smooth shooting star effect, we can define a CSS keyframes animation:

@keyframes shooting {
0% {
  opacity: 0.5;
}
50% {
  opacity: 1;
}
100% {
  transform: translateX(500px) translateY(-500px);
  opacity: 0;
}
}

.animate-shooting {
animation: shooting 1s forwards; /* Adjust duration as needed */
}

How to Use the Component

export default function Page() {
return (
  <div className="h-screen w-full bg-black">
    <StarBanner numberOfStars={100} />
  </div>
)
}

Happy Stargazing!

Want to Learn How to Build These Components Yourself?

We have step-by-step tutorials for every component to help you create stunning interfaces with ease.

Tutorials on YouTube