Stormveil Engine is a dynamic weather web application that transforms real-time weather data into immersive visual experiences.

Instead of just displaying weather information, it adapts the entire UI — including background, gradients, colors, and effects — based on live conditions, creating a unique atmosphere for every location.

This is my first React-based project — fully responsive across devices — and also my first time designing and integrating a dynamic ambient sound system from scratch, pushing both UI and experience beyond just visuals.

⭐ If this project helped or inspired you, consider giving it a star — it really motivates me to keep building!

Click here to experience Stormveil Engine in action 👉 [⛈️ Stormveil Engine 🌩️]

💡 Pro Tip: Skip the search — trigger Experimental Mode and explore the full experience in one tap 🚀

🎧 Bonus: Turn on sound and explore the atmosphere — each weather has its own vibe 😈

⚡ Not just weather… it’s an experience.

Want to see how Stormveil Engine actually feels in action? 😉
This video covers the full experience — UI, themes, sound, and experimental mode.

Watch it here 👉 [ 🎥 Stormveil Walkthrough 🚀 ]

✨ Built to show the experience, not just the code — feel it in minutes.

⚡ First Impression
Custom weather… full chaos mode activated 😈

☁️ Cloudy Mode	🌫️ Mist Mode	🌧️ Rain Mode
Soft skies with calm golden tones	Foggy vibes with low visibility atmosphere	Deep green rain theme with immersive feel

Started with a basic tutorial… ended up building a full engine 😈
Not just upgrades — complete transformation.

Built with the help of AI — but not by blindly accepting everything.

This project was shaped through continuous iteration:
prompt → result → refine → reject → rebuild 💪🏻

Not just using AI… learning how to think with it

Behind Stormveil Engine is a powerful squad that made everything possible.
Big respect to the legends who brought this experience to life 👇

All resources used are free and belong to their respective creators.
I just combined them with a little bit of logic… and a lot of chaos 😈

Huge thanks to these platforms for making creativity accessible 💙

Layer	Powering It
⚛️ Core
🎨 UI Engine
🌍 Data
🔊 Sound System
🧠 Brain
🔧 Version Control
🚀 Launchpad

Stormveil Engine follows a modular and scalable React architecture
focused on separation of concerns and clean logic flow 💪🏻

Built with structure, not chaos… even if the UI says otherwise 😈

Stormveil-engine
│
├── 📂 public
│   └── 🖼️ react.svg
│
├── 📂 src
│   │
│   ├── 📂 assets                      🎨 Static resources
│   │   ├── 📂 images                  🖼️ Weather backgrounds
│   │   │   ├── 🖼️ cloudy.avif
│   │   │   ├── 🖼️ cold.jpg
│   │   │   ├── 🖼️ default.avif
│   │   │   ├── 🖼️ fog.jpg
│   │   │   ├── 🖼️ hot.jpg
│   │   │   ├── 🖼️ rain.jpg
│   │   │   ├── 🖼️ snow.jpg
│   │   │   └── 🖼️ storm.avif
│   │   │
│   │   ├── 📂 preview                 📸 README showcase
│   │   │   ├── 🖼️ cloudy.jpg
│   │   │   ├── 🖼️ fog.jpg
│   │   │   ├── 🖼️ rain.jpg
│   │   │   └── 🖼️ first-impression.png
│   │   │
│   │   └── 📂 sounds                  🔊 Ambient sound system
│   │       ├── 📂 storm               ⚡ Storm sound pack
│   │       │   ├── 🔊 lightning1_loud.mp3
│   │       │   ├── 🔊 lightning2_loud.mp3
│   │       │   ├── 🔊 lightning3_loud.mp3
│   │       │   └── 🔊 storm_base.mp3
│   │       │
│   │       ├── 🔊 cloudy.mp3
│   │       ├── 🔊 cold.mp3
│   │       ├── 🔊 default.mp3
│   │       ├── 🔊 fog.mp3
│   │       ├── 🔊 hot.mp3
│   │       ├── 🔊 rain.mp3
│   │       └── 🔊 snow.mp3
│   │
│   ├── 📂 components                 🧩 UI Components
│   │   ├── 📂 Compass
│   │   │   ├── 🎨 Compass.css
│   │   │   └── ⚛️ Compass.jsx
│   │   │
│   │   ├── 📂 ExperimentalBtn
│   │   │   ├── 🎨 ExperimentalBtn.css
│   │   │   └── ⚛️ ExperimentalBtn.jsx
│   │   │
│   │   ├── 📂 ExperimentalPanel
│   │   │   ├── 🎨 ExperimentalPanel.css
│   │   │   └── ⚛️ ExperimentalPanel.jsx
│   │   │
│   │   ├── 📂 SearchBox
│   │   │   ├── 🎨 SearchBox.css
│   │   │   └── ⚛️ SearchBox.jsx
│   │   │
│   │   ├── 📂 SoundToggle
│   │   │   ├── 🎨 SoundToggle.css
│   │   │   └── ⚛️ SoundToggle.jsx
│   │   │
│   │   ├── 📂 SunProgress
│   │   │   ├── 🎨 SunProgress.css
│   │   │   └── ⚛️ SunProgress.jsx
│   │   │
│   │   └── 📂 WeatherCard
│   │       ├── 🎨 WeatherCard.css
│   │       └── ⚛️ WeatherCard.jsx
│   │
│   ├── 📂 config                     ⚙️ Configuration
│   │   └── 📜 weatherThemes.js
│   │
│   ├── 📂 data                       🧪 Experimental data
│   │   └── 📜 experimentalWeather.js
│   │
│   ├── 📂 hooks                      🧠 Custom hooks
│   │   └── 📜 useCompassAnimation.js
│   │
│   ├── 📂 services                   🌐 API layer
│   │   └── 📜 weatherService.js
│   │
│   ├── 📂 utils                      🛠️ Utility functions
│   │   ├── 📜 getWeatherTheme.js
│   │   ├── 📜 soundManager.js
│   │   └── 📜 sunProgress.js
│   │
│   ├── 🎨 App.css
│   ├── ⚛️ App.jsx
│   └── ⚛️ main.jsx                  🚀 Entry point
│
├── 🔐 .env
├── 📜 .gitignore
├── ⚙️ eslint.config.js
├── 🌐 index.html
├── ⚖️ LICENSE
├── 📦 package.json
├── 📦 package-lock.json
├── ⚡ vite.config.js
└── 📘 README.md

Not magic — just structured flow and controlled chaos 😎

⚡ Experimental mode bypasses API for instant rendering

flowchart TD

%% --- INPUT LAYER ---
A[🔍 User Input]
A1[🔎 Search City]
A2[🧪 Experimental Mode]

A --> A1
A --> A2

%% --- SEARCH FLOW (API) ---
A1 --> B[📦 SearchBox]
B --> C[🌐 weatherService.js]
C --> D[📊 Raw Weather Data]

%% --- EXPERIMENTAL FLOW (NO API) ---
A2 --> X[🧪 ExperimentalBtn]
X --> Y[⚙️ ExperimentalPanel]
Y --> Z[🧪 Custom Weather Data]

%% --- MERGE DATA ---
D --> E[🧠 Utils Layer]
Z --> E

%% --- UTILS ---
E --> E1[⚙️ getWeatherTheme]
E --> E2[🔊 soundManager]
E --> E3[🌅 sunProgress]

%% --- CONFIG ---
E1 --> F[🎨 weatherThemes]

%% --- COMPONENTS ---
F --> G
E2 --> G
E3 --> G

G[🧩 UI Layer]

G --> G1[🌦️ WeatherCard]
G --> G2[🧭 Compass]
G --> G3[🌅 SunProgress]
G --> G4[🔊 SoundToggle]

%% --- FINAL EXPERIENCE ---
G1 --> H[✨ Final Experience]
G2 --> H
G3 --> H
G4 --> H

Stormveil Engine is built on a simple but powerful concept:
don’t just display weather — translate it.

"Weather is not just data — it's an experience."

Instead of showing raw API data, the app transforms it into a dynamic environment using:

• 🎨 CSS variable–driven theming
• ⚡ State-based UI transformations
• 🔊 Context-aware sound design

Every weather condition becomes a visual + interactive experience —
where colors, motion, and sound work together to reflect the atmosphere of a place.

💡 The goal isn’t accuracy alone… it’s immersion.
💀 Because plain numbers don’t tell stories… experiences do.

Building Stormveil Engine wasn’t just about writing code —
it was about patience, failure, and persistence 💪🏻

Want to run this project locally? Follow these simple steps.

1. Clone the repository

git clone https://github.com/JunaidUsmani2468/Stormveil-Engine.git

2. Navigate to project

cd Stormveil-Engine

3. Install dependencies

npm install

4. Create a .env file in the root directory

VITE_WEATHER_API_KEY=your_api_key_here

5. Run development server

npm run dev

Contributions, ideas, and improvements are always welcome 💪🏻

If you’d like to contribute:

1. 🍴 Fork the repository
2. 🌿 Create a new branch (git checkout -b feature/your-feature-name)
3. 🛠️ Make your changes
4. ✅ Commit your work (git commit -m "feat: your message")
5. 🚀 Push to your branch (git push origin feature/your-feature-name)
6. 🔁 Open a Pull Request

A big thanks to Shradha Khapra (Apna College) for providing the initial guidance and foundation through her tutorials.

This project began as a learning step — but quickly evolved into something much more through experimentation, iteration, and independent development 💪🏻

Tutorial gave the base… I built the engine

MIT License © 2026 Junaid Usmani

For more details, check the LICENSE file.

Stormveil Engine is more than just a weather app.
It’s a combination of logic, design, experimentation, and persistence.

😈 Built with curiosity
⏳ Refined with patience
💀 Clean UI… messy journey behind it