A dynamic, canvas-based weather visualization that fetches real-time weather and time data from wttr.in and automatically detects the user’s city via ipapi.co.
- 🎨 Dynamic background that changes with weather & time (day/night).
- 🌞 Real sun & moon rendering with accurate positioning.
- 🌙 Moon phases synced with live data.
- ⭐ Stars & shooting stars at night, with smooth fade in/out depending on cloud cover.
- 🌧️ Weather effects: rain, drizzle, snow, thunder, and clouds.
- 🌳 Animated ground with trees that swing realistically in storms.
- 🐦 Birds fly randomly across the sky in daytime.
- 📊 Weather UI card showing temperature, pressure, humidity, wind, precipitation, UV index, and local time.
- 🌍 Automatic city detection with manual override via input box.
- 📱 Only for mobile. I don't know how it'll behave in different devices.
- HTML5 Canvas (custom animations)
- Vanilla JavaScript (no frameworks)
- CSS3
- APIs: wttr.in (weather data), ipapi.co (location detection)
⚡ A fun project to visualize live weather in an artistic way, right in your browser.
🙏 Thanks for being here. Have a great day.