Dark Sky — Living night sky with subtle motion

Dark Sky is an animated background component designed to add mood, depth, and quiet motion to modern websites. It renders a field of stars in multiple sizes, each gently drifting across the canvas while selected stars pulse and glow to simulate a living night sky.

The component is highly configurable, letting you control star density, colors, pulse frequency, drift speed, and animation timing. Optional shooting stars appear at intervals, adding moments of visual interest without overwhelming the scene.

For more expressive layouts, Dark Sky can display interactive constellations, with softly drawn lines and star points that highlight on hover or focus. Built-in viewport culling and optimized animations keep performance smooth even with large star counts.

Designed as a background layer, Dark Sky works seamlessly behind hero sections, landing pages, and immersive experiences, enhancing visual storytelling while staying subtle and elegant.

Key Features

• Animated starfield with multiple star sizes

• Gentle drift motion with adjustable speed

• Optional pulsing and glowing stars

• Configurable star count and color palette

• Shooting stars with adjustable frequency and length

• Optional interactive constellation patterns

• Smooth hover and focus highlighting for constellations

• Performance optimization with viewport culling

• Fully customizable via Framer controls

Where to Use

• Hero backgrounds and landing sections

• Space or sci-fi themed websites

• Portfolio and personal brand sites

• Ambient page backgrounds

• Immersive storytelling layouts

Best For

• Designers building atmospheric layouts

• Creative and experimental websites

• Product launches and campaign pages

• Portfolios that need subtle motion

• Experiences where mood matters as much as content