https://github.com/edisedis777/slow-weather
Slow Weather is an interactive web application that visualizes weather data as a dynamic landscape. Built with HTML, CSS, and JavaScript, it fetches real-time weather information from the Open-Meteo API and transforms it into a scenic display featuring a terrain shaped by hourly temperatures, and rain, snow, and clouds.
https://github.com/edisedis777/slow-weather
landscape slow slow-weather weather
Last synced: 4 months ago
JSON representation
Slow Weather is an interactive web application that visualizes weather data as a dynamic landscape. Built with HTML, CSS, and JavaScript, it fetches real-time weather information from the Open-Meteo API and transforms it into a scenic display featuring a terrain shaped by hourly temperatures, and rain, snow, and clouds.
- Host: GitHub
- URL: https://github.com/edisedis777/slow-weather
- Owner: edisedis777
- License: agpl-3.0
- Created: 2025-02-21T15:43:31.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-05-02T06:12:48.000Z (6 months ago)
- Last Synced: 2025-05-02T07:24:40.182Z (6 months ago)
- Topics: landscape, slow, slow-weather, weather
- Language: JavaScript
- Homepage: https://edisedis777.github.io/slow-weather/
- Size: 86.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Slow-Weather
[](#)
[](#)
[](#)
[](#)
[](#)
**🌤️ Slow Weather** is an interactive web application that visualizes weather data as a dynamic landscape. Built with HTML, CSS, and JavaScript, it fetches real-time weather information from the [Open-Meteo API](https://open-meteo.com/) and transforms it into a scenic display featuring a terrain shaped by hourly temperatures, a swaying leaf indicating wind speed, and atmospheric effects like rain, snow, and clouds.
### 🎉 Demo:
Try it Live: [Here](https://edisedis777.github.io/slow-weather/)
### ☁️ Features
- **Dynamic Terrain**: The landscape’s height varies with hourly temperature data over a 24-hour period.
- **Weather Effects**:
- Raindrops or snowflakes fall based on precipitation levels and temperature (rain if > 0°C, snow if < 0°C).
- Clouds drift across the sky proportional to cloud cover.
- Day/night sky transitions.
- **Time Axis**: Integrated at the terrain’s base, showing 6-hour intervals (00:00, 06:00, 12:00, 18:00, 24:00).
- **Temperature Toggle**: Switch between Celsius and Fahrenheit with a button anchored to the terrain.
- **Responsive Design**: Rounded corners and a clean layout adapt to various screen sizes.
### 💽 Installation:
**Clone the Repository**:
bash
git clone
cd weather-landscape
### Open the Project:
No dependencies required! Simply open index.html in a modern web browser (e.g., Chrome, Firefox).
Alternatively, serve it locally using a tool like Live Server in VS Code:
bash
npx live-server
### ⌨️ Usage
Enter a City:
Type a city name (e.g., "London", "New York") into the input field and press Enter or click "Show Weather".
### 🗺️ Explore the Landscape:
Observe the terrain shaping based on the city’s hourly temperature forecast.
Watch the leaf sway with wind speed, and note precipitation effects (rain/snow).
Toggle between °C and °F using the button at the terrain’s base.
### 🦜 Interact:
The sun/moon adjusts with day/night status, and clouds reflect current cloud cover.
The time axis aligns with the terrain’s 24-hour temperature profile.
Zen mode for a distraction-free experience.
### ⚙️ How It Works
Data Source: Uses Open-Meteo’s free weather API for current and hourly forecast data **(no API key required).**
Tech Stack:
#### HTML: Structure for the landscape and UI elements.
#### CSS: Styling with animations (swaying leaf, drifting clouds, falling precipitation).
#### JavaScript: Fetches weather data, updates the SVG terrain, and manages dynamic effects.
### 🥡 Key Components:
SVG terrain with integrated time axis.
Temperature-driven precipitation and color changes.
### 📔 Contributing
Contributions are welcome!
### 🎥 Credits
- Weather Data: Open-Meteo
- Inspiration: Adapted from the concept of weather_landscape by lds133, reimagined as a web-based visualization.
### ⚖️ License
Distributed under the GNU Affero General Public License v3.0 License. See `LICENSE` for more information.
[Back To Top ⬆️](#Slow-Weather)