Components

Night Sky

A twinkling starfield for dark sections. Bright stars drift slightly toward the pointer. Draws a single still frame when the visitor prefers reduced motion.

Customize

density20

dustDensity38

starColor#ffffff

dustColor#eef0f2

accentColor#ec4899

accentRatio0.25

parallax14

twinkleSpeed1

Usage

Add NightSky.tsx and color.ts to your project, then render it. The snippet updates with your Customize settings.

Example.tsx

import { NightSky } from './NightSky'

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

Name	Type	Default	Description
`density`	`number`	`20`	Bright-star grid cells across the section's short side. Higher gives more stars.
`dustDensity`	`number`	`38`	Faint-star grid cells across the short side.
`starColor`	`string`	`'#ffffff'`	Colour of the brightest stars.
`dustColor`	`string`	`'#eef0f2'`	Colour of the faint stars, also used for half of the bright stars.
`accentColor`	`string`	`'#ec4899'`	Accent colour for a share of the bright stars.
`accentRatio`	`number`	`0.25`	Share of bright stars in the accent colour, 0 to 1.
`parallax`	`number`	`14`	How far bright stars drift toward the pointer, in px. 0 turns drift off.
`twinkleSpeed`	`number`	`1`	Twinkle speed multiplier.
`scaleTo`	`number`	`—`	Size the grid as if the short side were this many px. Keeps short, wide sections from looking busier.
`className`	`string`	`—`	Class name for the canvas.

Get Night Sky

Buy this component on its own, or get all three in the Night Sky UI Kit.

Buy Night Sky Buy the kit