Horizon Val

🌅 The current sky at your approximate location, rendered as a CSS gradient. Refreshes every minute.

Full HTML page with sky gradient background. Auto-refreshes every 60 seconds using <meta http-equiv="Refresh">.

Query Parameters:

• lat (optional): Latitude override
• lon (optional): Longitude override

JSON API returning just the CSS gradient data. Perfect for integrating the sky gradient into your own website.

Query Parameters:

• lat (optional): Latitude override
• lon (optional): Longitude override

Response:

{
  "css": {
    "background": "linear-gradient(to bottom, rgb(135, 206, 235) 0%, ...)",
    "themeColor": "rgb(135, 206, 235)",
    "fallbackColor": "rgb(70, 130, 180)"
  },
  "sun": {
    "altitudeDegrees": 45.2,
    "azimuthDegrees": 180.5
  },
  "location": {
    "latitude": 30.26,
    "longitude": -97.74
  },
  "generatedAt": "2024-01-15T12:00:00.000Z",
  "cacheHint": "Gradient changes every minute based on sun position"
}

To use this gradient as your website background, fetch the API and apply the CSS:

async function updateSkyBackground() {
  // Use your location or a fixed location
  const lat = 30.26;  // Your latitude
  const lon = -97.74; // Your longitude
  
  const res = await fetch(`https://YOUR_VAL_URL/api/gradient?lat=${lat}&lon=${lon}`);
  const data = await res.json();
  
  document.body.style.background = data.css.background;
  document.body.style.backgroundColor = data.css.fallbackColor;
  
  // Update theme-color meta tag
  const themeColor = document.querySelector('meta[name="theme-color"]');
  if (themeColor) {
    themeColor.content = data.css.themeColor;
  }
}

// Update immediately and then every minute
updateSkyBackground();
setInterval(updateSkyBackground, 60000);

• Physical model and parameter choices from "A Scalable and Production Ready Sky and Atmosphere Rendering Technique" (Sébastien Hillaire)
• Implementation derived from "Production Sky Rendering" (Andrew Helmer, MIT License)
• Originally created for HTML Day 2025