Drizzle: Weather forecasts reimagined

• 

• 

• 

• 

• 

• 

• 

  screenshot

• 

  screenshot

Inspiration

There was this beta app Onelabs by Oneplus called Sense weather, it was a beta app that never saw the light of day, I can't even find a trace of it, seems like it disappeared off the internet, anyways, this weather app introduces a new interesting and minimal take on weather apps, it represents the current weather condition using mesh gradient animations, sounds and haptics, I loved it when I saw it online but when I downloaded it, it felt low quality, the mesh gradients weren't live rendered, they were low quality videos, it barely had any weather info, the hourly weather only showed for I think 5 hours, you get the point, other than hourly daily and some rain and temperature info it had nothing else, animations weren't smooth and the app felt sluggish, I was pissed because the app idea looked amazing, so I started building mine a while ago but ditched it and re picked it up again for this years Shipaton, what gives me an advantage is that Oneplus shutdown the project, so the idea is free for me, I wouldn't want my app to be a copy of another existing one right?

What it does

so by now you might have an idea of what my app does, it's called Drizzle it's a new take on weather forecast apps, it's a weather app that represents weather using beautiful mesh gradient animations, sounds effects and haptics that play in sync with them, it's minimal, full of animations and neat blur effects, and very elegant to use, lots of users that tested it also mentioned how calm it's atmosphere is, the mesh gradients especially at night look so calm they mentioned, what the app provides is the hourly and daily weather forecasts, along with some additional weather info, like visibility, uv index, pressure, you get the idea, I'm aiming for it to be a fully fledged weather app, I didn't want to sacrifice form over function, one of the main features of the app is a feature called Weather Haptics, it's a feature inspired by Apple Music's "Music Haptics" feature, where when playing a song there will be a haptic pattern playing in the same rhythm in sync of the song, Weather Haptics does the same but for weather so users can feel the weather and not just look at numbers, each weather condition has a sound effect along with a haptic pattern that plays with it, so when it's raining for example, you hear it and feel the raindrops, it enables a truly immersive experience, something that hasn't been seen before in a weather app.

How I built it

I built it using SwiftUI, so it's wrote it in Swift of course, the haptic patterns were generated using Meta's Meta Haptic Studio tool they have which helped a lot, I searched around for free weather sounds online, then generated haptic patterns from them, the weather data is from Apple using the WeatherKit framework they provide.

Challenges we ran into

the feature that was trivial to get working right was the Weather Haptics feature, sure Meta Haptic Studio made it dead easy to convert audio to haptic patterns but it wasn't just a drag and drop and export solution, different weather conditions needed different tunings for the haptics configuration in the tool, it required lots of trial and error to get them feeling right.

Accomplishments that we're proud of

I'm really proud of how immersive the app turned out, it feels like an art piece, the mesh gradients reflecting the weather, and the sound effects with Weather Haptics are the cherry on top, I didn't expect all these pieces to make the experience this good honestly, the app adapted to Liquid Glass too.

What we learned

I gained lots of experience in creating high quality mobile app experiences using SwiftUI

What's next for Drizzle: Weather forecasts reimagined

For the future updates, I'm going to add graphs, home screen widgets, and I'm most likely going to fine tune the haptic patterns even more to make them feel even better, also I will most likely going to add more weather providers to fit users needs

Built With

• swift
• swiftui
• weatherkit