The City Breathes - TCB

Landing page, love the animation ❤️, made with love. ❤️
we now support cloudflare turnstile!

Website Protected with Cloudflare Turnstile

Inspiration

I was inspired for this project when I saw a website that had a super cool dot which is basically an AI website, so I thought why can't we use this design to raise awareness for the constant weather and city health problems we have. This was one of the main reasons why I even went with this idea. It was mainly to create awareness for how or city/enviroment feels, it's simply lovely(get-the-reference).

What it does

TCB has a clean and beautiful interface showing your city's (or one of the cities avalaible) that shows the health of your city in an artistic format of a "breathing" from latest or fallback data if API unavailable.

How we built it

TCB was built from the ground up with Three.js & the Web Audio API. Data: Open-Meteo, OpenAQ.

Challenges we ran into

The main challenges I ran into while developing TCB was simply finding the right API keys for the data. The trending "liquid glass design" was also one of the main challenges I ran into because it's tricky to implement into websites, The simple solution was just to add blur in the design.

Accomplishments that we're proud of

I'm proud of actually finishing this project and doing a really good job, and I love how the weather breathing animation came out. I'm also proud of the liquid glass design that I implemented. I don't know how honestly Claude Code helped me a little bit but I was able to break through and I looooove how it came out.

What we learned

I learned how to add 3D objects to a website using the three.js library. I also learned how to actively use weather APIs and just APIs in general on websites, since I'm used to generally not using APIs and finding a workaround, this was a great learning curve for me since it's not too difficult to implement APIs into your websites.

What's next for The City Breathes

Currently, I plan to add more cities and a better API back end system for even more accurate weather data. I also want to add user generated custom "breath" design. I believe the system is production ready for now, however a lot of minor "feel-good" updates can be made..