Transform your web experience with breathtaking, real-time sky renders that evolve throughout the day. From golden sunrises to star-studded nights—bring the atmosphere to life.
Everything you need for stunning sky backgrounds
Physically-based atmospheric scattering using single-scattering approximation for authentic sky colors throughout the day.
Multi-layer parallax starfield with breathing animation that automatically appears at night and fades during twilight. Note: Stars are decorative and not accurate to real astronomical positions. They are randomly generated for visual effect and do not represent real constellations or star positions.
Auto-detects location via IP geolocation or set custom coordinates for accurate sun position calculations.
Connect any slider (linear, circular, or custom) to control time and see the sky change in real-time.
Automatically adjusts star density and rendering for optimal performance on mobile devices.
Works as full-page background or contained element. Easy to integrate into any design.
Completely open source and free to use. Explore on GitHub →
Get started in minutes with just a few lines of code
<!-- Include the library -->
<script src="dynamic-sky.js"></script>
<!-- Add containers for sky and stars -->
<div id="background-sky"></div>
<div id="stars-container"></div>
<script>
// Create a new DynamicSky instance
const sky = new DynamicSky();
// Initialize (auto-detects location via IP geolocation)
sky.init();
</script>See DynamicSky in action across different integration scenarios
Create immersive experiences with full-page sky backgrounds. Perfect for landing pages, portfolios, and creative projects.
The sky you see behind this page is a live example! Use the slider below to control it.
<div id="background-sky"></div>
<div id="stars-container"></div>
<script>
const sky = new DynamicSky({
skyContainer: '#background-sky',
starsContainer: '#stars-container'
});
sky.init().then(() => {
const slider = document.getElementById('time-slider');
slider.addEventListener('input', () => {
const minutes = parseInt(slider.value);
sky.updateSky(sky.minutesToDate(minutes));
});
});
</script>Show current sky conditions matching the time of day. Perfect for weather apps that want to display realistic sky backgrounds.
<div id="weather-sky"></div>
<div id="weather-stars"></div>
<input type="range" id="time-slider" min="0" max="1440">
<script>
const sky = new DynamicSky({
skyContainer: '#weather-sky',
starsContainer: '#weather-stars'
});
sky.init().then(() => {
const slider = document.getElementById('time-slider');
slider.addEventListener('input', () => {
const minutes = parseInt(slider.value);
sky.updateSky(sky.minutesToDate(minutes));
});
});
</script>Compact sky preview for dashboards and admin panels. This example demonstrates programmatic control - the slider moves automatically to show how you can change the sky programmatically without user interaction.
🔄 Slider moves automatically - demonstrating programmatic sky control
<script>
const sky = new DynamicSky({
skyContainer: '#dashboard-sky',
starsContainer: '#dashboard-stars'
});
sky.init().then(() => {
let currentMinutes = 0;
setInterval(() => {
currentMinutes = (currentMinutes + 1) % 1440;
sky.updateSky(sky.minutesToDate(currentMinutes));
}, 1000); // Update every second
});
</script>Compare sky conditions across different locations and time zones. Great for travel apps showing destination weather.
<script>
const sky = new DynamicSky({
skyContainer: '#travel-sky',
starsContainer: '#travel-stars',
latitude: 40.7128, // New York
longitude: -74.0060
});
sky.init().then(() => {
// Change location when button clicked
document.querySelectorAll('.location-btn').forEach(btn => {
btn.addEventListener('click', () => {
const loc = locations[btn.dataset.location];
sky.setLocation(loc.lat, loc.lng);
sky.updateSky(sky.minutesToDate(slider.value));
});
});
});
</script>Sky that automatically updates to match the current time. Perfect for dashboards or apps that want to show real-time sky conditions without manual controls.
⏱️ Updates automatically every minute
<script>
const sky = new DynamicSky({
skyContainer: '#auto-sky',
starsContainer: '#auto-stars'
});
sky.init().then(() => {
function updateToCurrentTime() {
const now = new Date();
sky.updateSky(now);
}
updateToCurrentTime();
setInterval(updateToCurrentTime, 60000); // Update every minute
});
</script>Use sky as a background element in product cards or hero sections. Shows how DynamicSky can enhance UI components beyond full-page backgrounds.
<div style="position: relative;">
<div id="product-sky"></div>
<div id="product-stars"></div>
<div style="position: absolute; bottom: 0;">
<h3>Product Title</h3>
</div>
</div>
<script>
const sky = new DynamicSky({
skyContainer: '#product-sky',
starsContainer: '#product-stars'
});
sky.init();
</script>Compare how the sky looks at different times of day. Useful for showing time-based variations in a single view.
Multiple sky instances showing different times simultaneously
<script>
// Create multiple sky instances
const morningSky = new DynamicSky({
skyContainer: '#morning-sky',
starsContainer: '#morning-stars'
});
const noonSky = new DynamicSky({
skyContainer: '#noon-sky',
starsContainer: '#noon-stars'
});
const eveningSky = new DynamicSky({
skyContainer: '#evening-sky',
starsContainer: '#evening-stars'
});
Promise.all([morningSky.init(), noonSky.init(), eveningSky.init()]).then(() => {
morningSky.updateSky(morningSky.minutesToDate(360)); // 6 AM
noonSky.updateSky(noonSky.minutesToDate(720)); // 12 PM
eveningSky.updateSky(eveningSky.minutesToDate(1080)); // 6 PM
});
</script>Compare sky conditions across multiple locations simultaneously. Great for travel apps or weather dashboards showing conditions in different cities.
<script>
const locations = [
{ lat: 37.7749, lng: -122.4194 }, // San Francisco
{ lat: 40.7128, lng: -74.0060 }, // New York
{ lat: 35.6762, lng: 139.6503 }, // Tokyo
{ lat: 51.5074, lng: -0.1278 } // London
];
const skies = locations.map((loc, i) => {
return new DynamicSky({
skyContainer: `#compare-${i+1}-sky`,
starsContainer: `#compare-${i+1}-stars`,
latitude: loc.lat,
longitude: loc.lng
});
});
Promise.all(skies.map(sky => sky.init())).then(() => {
const date = skies[0].minutesToDate(slider.value);
skies.forEach(sky => sky.updateSky(date));
});
</script>Explore advanced features and programmatic control
Initialize with custom containers and specific coordinates for precise control over sky placement and location.
<!-- Custom containers -->
<div id="my-sky"></div>
<div id="my-stars"></div>
<script>
// Initialize with custom containers and location
const sky = new DynamicSky({
skyContainer: '#my-sky',
starsContainer: '#my-stars',
latitude: 40.7128, // New York
longitude: -74.0060
});
sky.init();
</script>Change the sky programmatically without user interaction. Perfect for automated updates or animations.
<script>
const sky = new DynamicSky();
sky.init().then(() => {
// Update sky to specific time
const specificDate = new Date('2024-01-15T14:30:00');
sky.updateSky(specificDate);
// Or use minutes (0-1440)
const minutes = 720; // 12:00 PM
sky.updateSky(sky.minutesToDate(minutes));
});
</script>Update the location after initialization to show sky conditions at different places.
<script>
const sky = new DynamicSky();
sky.init().then(() => {
// Change location to Tokyo
sky.setLocation(35.6762, 139.6503);
// Update sky with current time at new location
sky.updateSky(new Date());
});
</script>Keep the sky synchronized with the current time automatically.
<script>
const sky = new DynamicSky();
sky.init().then(() => {
// Function to update sky to current time
function updateToCurrentTime() {
const now = new Date();
sky.updateSky(now);
}
// Update immediately
updateToCurrentTime();
// Update every minute
setInterval(updateToCurrentTime, 60000);
});
</script>