Gravity Stars

Heroes 110

About

An animated canvas starfield background where stars drift, twinkle, connect with faint constellation links, and swirl toward the pointer under a soft gravity well.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gravity Stars to your project and fits it to your theme.

Code

How Gravity Stars is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import GravityStars from "@/components/ui/gravity-stars";

export default function GravityStarsDemo() {
  return (
    <div className="relative h-screen w-full bg-[oklch(0.145_0.014_264)] text-[oklch(0.97_0.005_265)]">
      <GravityStars
        className="h-full w-full"
        connectDistance={120}
        count={240}
        tint={0.65}
      >
        <div className="flex h-full flex-col justify-center px-12">
          <h1 className="max-w-xl text-balance font-semibold text-5xl tracking-tight">
            The whole sky leans towards your cursor.
          </h1>
        </div>
      </GravityStars>
    </div>
  );
}