Free, open-source weather app that transforms real weather data into beautiful AI-generated 3D isometric city dioramas.
- 🌍 Real-time Weather Integration — Connect to any city worldwide and get current weather conditions
- 🎨 AI Image Generation — Powered by Gemini AI to create stunning city-specific dioramas
- 🏙️ Isometric 3D Art — Beautiful miniature dioramas with tilt-shift photography effects
- 🌈 Weather-based Visual Effects — Dynamic glow and borders that reflect current weather conditions
- 📍 City Recognition — Each diorama features iconic landmarks and architectural elements specific to the selected city
- 💎 Modern UI — Sleek, responsive interface with smooth animations and interactions
- Node.js 18+
- npm or yarn
- A free Gemini API Key
# Clone the repository
git clone https://github.com/ehgzao/skydiorama.git
# Install dependencies
cd skydiorama
npm install
# Set up environment variables
cp .env.example .env
# Add your Gemini API key to .env file
# Run the development server
npm run devOpen http://localhost:3000 to start creating beautiful weather dioramas!
- Search for any city worldwide
- Get real-time weather data from Open-Meteo (free, no API key needed)
- Generate an AI diorama with city-specific landmarks via Gemini
- Weather-based visual effects are applied dynamically (glow borders, particles)
- Download or share your creation
| Technology | Purpose |
|---|---|
| Next.js 14 | React framework |
| TypeScript | Type safety |
| Tailwind CSS | Styling |
| Framer Motion | Animations |
| Zustand | State management |
| IndexedDB | Image caching |
| Open-Meteo | Weather data (free) |
| Google Gemini | AI image generation |
| Lucide React | Icons |
skydiorama/
├── src/
│ ├── app/
│ │ ├── globals.css # Global styles + weather effects
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Main page
│ ├── components/
│ │ ├── CityList.tsx # Saved cities list
│ │ ├── CitySearch.tsx # City search input
│ │ ├── DioramaDisplay.tsx # Main diorama view + weather glow
│ │ ├── SettingsPanel.tsx # Settings & API key input
│ │ └── WeatherInfo.tsx # Weather details card
│ └── lib/
│ ├── gemini.ts # Gemini API client + prompt builder
│ ├── image-cache.ts # IndexedDB image storage
│ ├── store.ts # Zustand store
│ ├── weather.ts # Open-Meteo API client
│ └── utils.ts # Helper functions
├── public/
├── tailwind.config.js
├── next.config.js
└── package.json
The magic happens in src/lib/gemini.ts with a carefully crafted prompt that:
- Requests a 45° isometric miniature 3D scene of the specific city
- Emphasizes real landmarks and architectural identity (not generic buildings)
- Integrates current weather conditions into the scene naturally
- Maintains vibrant, natural colors without artificial filters
- Adds a text overlay with city name, weather icon, and temperature
The prompt explicitly enforces color fidelity — weather affects lighting and shadows, but never washes out the palette. Each city should be recognizable at a glance.
Feel free to tweak it and experiment!
Contributions are welcome! Here's how you can help:
- 🐛 Report Bugs — Open an issue describing the bug
- 💡 Suggest Features — Share your ideas in Discussions
- 🔧 Submit PRs — Fix bugs or add features
- 📖 Improve Docs — Help make our docs better
# Fork and clone
git clone https://github.com/YOUR_USERNAME/skydiorama.git
# Create a branch
git checkout -b feature/amazing-feature
# Make your changes and commit
git commit -m 'Add amazing feature'
# Push and open a PR
git push origin feature/amazing-feature- Add more weather conditions (aurora, sandstorm, etc.)
- Add support for alternative AI providers (DALL-E, Stable Diffusion)
- Implement hourly auto-refresh
- Add PWA support
- Create a browser extension
- Add widget support for mobile
MIT License — feel free to use this project for anything!
- Inspired by CitiScene
- Open-Meteo for the free weather API
- Google Gemini for AI image generation
Made with ❤️ by Gab Lima
⭐ Star on GitHub