Gravity Stars Background

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

export default function GravityStarsBackgroundDemo() {
  return <GravityStarsBackground className="absolute inset-0" />
}

InstallationCopy Anchor Link

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

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

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

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

UsageCopy Anchor Link

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

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

AnimationCopy Anchor Link

• Stars drift across a canvas at movementSpeed, slow down little by little, wrap around its edges and glow.
• Near the pointer (mouseInfluence), they are pulled in or pushed away (mouseGravity) and glow brighter. The pointer's last position keeps acting after it leaves (before the first move, it is the top-left corner).
• The stars take the text color (currentColor), so they follow light and dark mode.
• The canvas is sized to its container at the device pixel ratio. A resize scatters the stars again.
• The simulation advances one step per displayed frame, so it runs faster on 120Hz screens.
• It pauses off screen and while the tab is hidden.
• Under reduced motion, the stars hold still.

API ReferenceCopy Anchor Link

GravityStarsBackgroundCopy Anchor Link

CreditsCopy Anchor Link

• Credits to Brett Jackson for the initial Framer component.