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.
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
Hero backgrounds and landing sections
Space or sci-fi themed websites
Portfolio and personal brand sites
Ambient page backgrounds
Immersive storytelling layouts
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