Welcome to Atmos

A beautiful, open-source weather app powered by Open-Meteo — no API key, no account, no friction.

What is Atmos?

Atmos is a weather web application built around clarity and aesthetics. It delivers real-time conditions, hourly forecasts, and multi-day outlooks with a clean, distraction-free interface. Unlike most weather apps, Atmos requires no account or API key to run — it's powered entirely by the open Open-Meteo API.

Global Coverage

Weather data for any location on Earth, with no geographical restrictions.

Real-time Updates

Fresh forecast data updated hourly with no rate limits on the free tier.

Beautiful Design

Crafted with modern UI principles — clean, readable, and visually elegant.

No API Key

Zero configuration — clone and run. No environment variables needed.

Responsive

Works great on desktop, tablet, and mobile with adaptive layouts.

Open Source

MIT licensed. Fork it, self-host it, or contribute back to the project.

Why Atmos?

Most weather apps are cluttered with ads, require account signups, or sit behind paid API keys. Atmos solves all three: it's ad-free, account-free, and key-free. The goal is a weather experience that's as pleasant to look at as it is functional.

Note
Atmos is actively developed. If you find bugs or have ideas, feel free to open an issue on GitHub.

Installation

Get Atmos running locally in minutes. You'll need Node.js 18+ and Git installed on your machine.

Prerequisites

ToolVersionNotes
Node.js18 or higherRequired for the Vite dev server
GitAny recent versionTo clone the repository
npm / pnpmLatestpnpm recommended for speed

Clone & Install

1

Clone the repository

bash
git clone https://github.com/S-P-H-E/Atmos.git
cd Atmos
2

Install dependencies

bash
npm install
# or with pnpm (recommended)
pnpm install
3

Start the dev server

bash
npm run dev
# or
pnpm dev
4

Open in your browser

Visit http://localhost:5173 — Atmos should be live and ready.

No .env needed
Atmos uses Open-Meteo which is completely free and open. No .env file, no API keys, no accounts required.

Production Build

To create an optimised production build for deployment:

bash
npm run build
# Output is in the /dist directory

Deploy the /dist folder to any static host — Vercel, Netlify, Cloudflare Pages, or your own server.

Quick Start

A 60-second guide to understand the core Atmos experience once you're up and running.

Using Atmos

When you open Atmos for the first time, it will request location access and load your local weather dashboard.

1

Allow location access

Atmos uses your browser's geolocation to detect your city automatically. You can also search any city manually using the search bar.

2

View your dashboard

The main screen shows current temperature, weather condition, feels-like temperature, humidity, and wind speed at a glance.

3

Explore forecasts

Scroll down for the 24-hour timeline and 7-day outlook. Tap any day for a detailed daily breakdown.

4

Switch units

Toggle between Celsius and Fahrenheit from the settings panel in the top-right corner. Your preference is saved automatically.

Search tip
Use the search bar to look up weather for any city worldwide — just type a city name and select from the autocomplete suggestions.

Feature Overview

Everything Atmos can do, at a glance.

Current Weather

The hero section always shows you the most important information first: temperature, condition, feels-like, and the high/low for the day. Weather icons adapt to the current condition and time of day — different icons for clear morning vs clear night, for example.

Hourly Forecast

A scrollable hourly timeline shows the next 24 hours — temperature curve, precipitation probability, and wind speed at each hour. Times are displayed in your local timezone automatically.

7-Day Outlook

The weekly forecast card gives you a quick overview of the week ahead. Tap any day to see an expanded breakdown with min/max temperatures and precipitation chance.

Air Quality & UV Index

Atmos surfaces the UV index and — where available — an air quality index (AQI), so you know whether to apply sunscreen or avoid intense outdoor exercise.

Regional availability
Air quality data coverage depends on your region. Open-Meteo covers most of Europe, North America, and major global cities.

Search any city or region worldwide. Atmos uses the Open-Meteo geocoding API to resolve names to coordinates, then fetches the forecast for that exact location.

Weather Data

How Atmos fetches, processes, and displays weather information.

Open-Meteo API

Atmos is powered entirely by Open-Meteo — a free, open-source weather API that requires no authentication. It aggregates data from multiple national meteorological services including NOAA, DWD, ECMWF, and more.

Free tier
Open-Meteo data is updated hourly with no rate limits for non-commercial use — perfect for open-source projects like Atmos.

Data Variables

Atmos fetches and displays the following weather variables from the API:

VariableSourceUpdate frequency
Temperature (2m)Open-MeteoHourly
Feels-like (apparent temp)Open-MeteoHourly
Precipitation probabilityOpen-MeteoHourly
Wind speed & directionOpen-MeteoHourly
Relative humidityOpen-MeteoHourly
UV IndexOpen-MeteoDaily
Weather code (WMO)Open-MeteoHourly

Geocoding

Location search is powered by the Open-Meteo Geocoding API, which resolves city names to coordinates and returns timezone and country data. Atmos then uses those coordinates to fetch the full forecast.

UI & Themes

Atmos is designed to be as beautiful as it is functional. Here's what goes into its visual system.

Design Philosophy

Atmos follows a calm design philosophy — information is prioritised without visual noise. Typography is large and legible. Icons are symbolic, not decorative. White space is generous. The result is a weather app that feels like a well-designed dashboard, not a cluttered portal.

Dynamic Backgrounds

The app background adapts to current conditions and time of day — warm sunrise gradients in the morning, deep blues at night, stormy greys when rain is detected. This makes Atmos feel alive and contextually aware.

Weather Icons

Icons are rendered from a custom set designed specifically for Atmos. They adapt to light and dark contexts and represent all WMO weather codes — clear, cloudy, foggy, rainy, snowy, stormy, and more.

Units & Localisation

Users can toggle between metric (°C, km/h, mm) and imperial (°F, mph, in) units. The preference is saved to localStorage and persists automatically across sessions.

How to Contribute

Atmos is open source and welcomes contributions of all kinds — bug fixes, features, design improvements, or documentation.

Before You Start

Check the open issues before starting work to avoid duplicating effort. If you want to build something new, open an issue first to discuss the approach.

Contribution Workflow

1

Fork the repository

Click Fork on GitHub to create your own copy of Atmos under your account.

2

Create a feature branch

bash
git checkout -b feature/your-feature-name
3

Make your changes

Follow the existing code style. Keep commits small and focused with descriptive messages.

4

Submit a pull request

Open a PR against the main branch with a clear description of what you changed and why.

Code Style

Atmos uses ESLint and Prettier for consistent formatting. Run npm run lint before submitting. PRs with lint errors won't be merged.

Star the repo
If Atmos has been useful to you, giving it a star on GitHub really helps the project grow.

Tech Stack

The tools and technologies that power Atmos under the hood.

Frontend

TechnologyRole
ReactUI component framework
TypeScriptType-safe JavaScript
ViteBuild tool & dev server
Tailwind CSSUtility-first styling

APIs & Data

ServicePurposeCost
Open-MeteoWeather forecast dataFree
Open-Meteo GeocodingCity & location searchFree
Browser Geolocation APIAuto-detect user locationFree

Deployment

The live version at useatmos.me is deployed on Vercel. Every push to main automatically triggers a production deployment. You can self-host the /dist build on any static hosting provider that supports SPA routing.

License & Credits

Atmos is free and open source. Here's what that means and who made it possible.

License

Atmos is released under the MIT License. You're free to use, copy, modify, merge, publish, distribute, sublicense, or sell copies — with attribution.

text
MIT License

Copyright (c) 2026 kebab

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Credits

  • Open-Meteo — free weather API powering all forecast data
  • Inter — typeface by Rasmus Andersson
  • Vite — blazing fast build tooling
  • React — UI library by Meta Open Source
  • Tailwind CSS — utility-first CSS framework
Like Atmos?
Please consider giving the repo a star on GitHub — it really helps others discover the project!