Starry Sky Background

Heroes

About

A quiet night sky for dark sections: seeded stars, a few that twinkle, four sparkles and rare shooting stars. Fills its parent and stays still with reduced motion. From the Midnight Lite template (MIT).

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

Code

How Starry Sky Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import type { CSSProperties } from "react"

import { NightSky } from "@/components/ui/night-sky"

const fraunces =
  "@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..600,0..100;1,9..144,300..600,0..100&display=swap');"

const settings = {
  stars: 170,
  meteors: 3,
  sparkles: true,
  seed: 7,
  paper: "#f7f5f0",
  ink: "#141a2e",
  starColor: "#a5813f",
  accent: "#8a6a2e",
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div className="relative flex min-h-svh w-full items-center justify-center overflow-hidden px-6" style={{ background: s.paper }}>
      <style>{fraunces}</style>
      <NightSky
        stars={s.stars}
        seed={s.seed}
        sparkles={s.sparkles}
        meteors={s.meteors}
        starColor={s.starColor}
        accent={s.accent}
        style={{ "--mn-glint": s.accent, "--mn-star-k": "1.8" } as CSSProperties}
      />
      <h2
        className="relative text-center text-[clamp(44px,8vw,96px)] leading-[0.98] tracking-[-0.03em]"
        style={{ color: s.ink, fontFamily: "Fraunces, ui-serif, Georgia, serif", fontWeight: 340, fontVariationSettings: '"SOFT" 60, "opsz" 144' }}
      >
        Your work,
        <br />
        <em style={{ color: s.accent }}>done by morning.</em>
      </h2>
    </div>
  )
}