GitHub Sky

Find the one real star.

Installation


pnpm dlx shadcn@latest add @motokoui/github-sky

Usage

import { GitHubSky } from "@/components/ui/github-sky"
 
export default function Example() {
  return <GitHubSky href="https://github.com/your/repo" />
}

Move across the sky. Nearby stars react with a soft parallax. When you find the one real star, the CTA fades in. Clicking ⭐ Star on GitHub sends that star toward the GitHub icon with a quiet trail.

Keyboard users can focus the real star (or Tab into the card) to reveal the content. prefers-reduced-motion skips the discovery sequence and shows the CTA immediately.

Props

Prop	Type	Default
`href`	`string`	required
`headline`	`string`	`"Every project starts with one star."`
`description`	`string`	`"Maybe this one belongs to you."`
`buttonLabel`	`string`	`"⭐ Star on GitHub"`
`hint`	`string`	`"Find the one real star."`
`starCount`	`number`	`220` (clamped 150–300)
`seed`	`number`	`42`
`initiallyRevealed`	`boolean`	`false`
`onStar`	`() => void`	—
`openInNewTab`	`boolean`	`true`
`className`	`string`	—