Meet the Night Sky UI Kit

Some sites want to feel like a clear night away from the city. The Night Sky UI Kit is our small answer to that: three animated React components for dark, night-sky themed websites. There is a star cursor, a twinkling starfield and a soft aurora glow. Each one draws to a canvas, ships as TypeScript source with typed props, and needs no packages beyond React. You can buy the whole kit for $19, or pick a single component for $9. Checkout runs through Polar, and once you pay you get a zip to download, with your receipt and download link also sent to your email.

Start with the Star Cursor. It swaps the arrow for a star with an offset outline, a glowing comet tail and sparkle dust. It only turns on for a mouse or trackpad and stays off when a visitor prefers reduced motion, so nobody is forced to chase a comet. Next is Night Sky, a starfield for dark sections. Bright stars twinkle and drift slightly toward the pointer, 14px by default, and a parallax of 0 turns that drift off. The density prop sets how many stars you get, and accentColor tints a quarter of the bright stars pink out of the box, set by accentRatio at 0.25.

The third piece is Aurora Glow: four soft lights that slowly drift and pulse behind a section. The default colors run from pink through two purples to blue, with a 48px blur, and you can hand it your own palette. Set position to fixed and it fills the viewport behind the whole page instead of one section. Both backgrounds draw a single still frame when reduced motion is on, pause while the tab is hidden, and stay hidden from screen readers without blocking clicks. The license is simple. Once you pay, use the kit in personal or commercial projects, including client work, and change it however you like. Just don't resell or redistribute the source files on their own.

Adding it to a site is mostly copy and paste. The zip holds a night-sky-kit folder with the three components plus color.ts, a small helper they all import. The README asks for react and react-dom ^19, plus @types/react ^19 for TypeScript projects. Copy the files you need into components/night-sky-kit in your project, keeping color.ts next to them, then import and render. The cursor sits once near the root of your app. The two backgrounds go inside a section that has position: relative, overflow: hidden, isolation: isolate and a dark background, which is exactly how the README example below sets up Night Sky. Every file starts with 'use client', so they work as client components in Next.js.

import { NightSky } from './components/night-sky-kit/NightSky'

export default function Example() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', isolation: 'isolate', background: '#0b0e1a' }}>
      <NightSky />
      {/* your content */}
    </section>
  )
}