Overview
Night Sky UI Kit
Three animated React components for dark, night-sky themed websites: a star cursor, a twinkling starfield, and a soft aurora glow.
Night Sky UI Kit
Components
- Star CursorA star-shaped cursor with an offset outline, a glowing comet tail, and sparkle dust. Turns on only for a mouse and stays off when the visitor prefers reduced motion.
- Night SkyA twinkling starfield for dark sections. Bright stars drift slightly toward the pointer. Draws a single still frame when the visitor prefers reduced motion.
- Aurora GlowSoft coloured lights that slowly drift and pulse behind a section. Draws a single still frame when the visitor prefers reduced motion.
Requirements
- React 18 or newer. Works in Next.js (client components) and Vite.
- TypeScript source with typed props. No other dependencies.
- Canvas-based. Animation pauses when the tab is hidden.
- Respects reduced motion: the cursor turns off and backgrounds draw one still frame.
Installation
// 1. Copy the files you need into your project
components/night-sky-kit/color.ts
components/night-sky-kit/StarCursor.tsx
components/night-sky-kit/NightSky.tsx
components/night-sky-kit/AuroraGlow.tsx
// 2. Render them
import { AuroraGlow } from './components/night-sky-kit/AuroraGlow'
import { NightSky } from './components/night-sky-kit/NightSky'
import { StarCursor } from './components/night-sky-kit/StarCursor'
Get the kit
All three components with full source, typed props, and usage examples. Each component can also be bought on its own from its page.