Stars Background

"use client"

import { useTheme } from "next-themes"

import { StarsBackground } from "@/components/animate-ui/backgrounds/stars"

export default function StarsBackgroundDemo() {
  const { resolvedTheme } = useTheme()

  return (
    <StarsBackground
      starColor={resolvedTheme === "dark" ? "#fff" : "#000"}
      className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,#f5f5f5_0%,#fff_100%)] dark:bg-[radial-gradient(ellipse_at_bottom,#262626_0%,#000_100%)]"
    />
  )
}

InstallationCopy Anchor Link

npx shadcn@latest add @animate-ui/backgrounds-stars

pnpm dlx shadcn@latest add @animate-ui/backgrounds-stars

yarn dlx shadcn@latest add @animate-ui/backgrounds-stars

bun x shadcn@latest add @animate-ui/backgrounds-stars

UsageCopy Anchor Link

import { StarsBackground } from '@/components/animate-ui/backgrounds/stars';

export function Hero() {
  return (
    <section className="relative h-[480px] overflow-hidden">
      <StarsBackground className="absolute inset-0" />
    </section>
  );
}

AnimationCopy Anchor Link

• Three layers of stars (1, 2 and 3px) scroll upwards in a loop at different speeds, for depth: the smallest crosses 2000px in speed seconds, the others take two and three times longer. They move with hardware-accelerated transforms.
• The sky shifts away from the mouse on a spring (factor, transition), relative to the center of the container, for parallax. On touch screens, a tap shifts it too.
• The loops pause off screen and while the tab is hidden.
• Under reduced motion, the stars hold still and there is no parallax.

API ReferenceCopy Anchor Link

StarsBackgroundCopy Anchor Link

CreditsCopy Anchor Link

• Credits to umangladani for the inspiration