Rewarding Fans Who Are Suffering Through a Hot Summer Using Apple WeatherKit

In support of Ambré’s new ep 3000°

4 min readJun 26, 2022

You may have heard how hot it gets in New Orleans during the summer but you really don’t understand it until you experience it yourself. The increase in heat and humidity is one thing but what about the increase in crime, sno-ball stand lines, and your need for a friend with a pool? Ambré gets this. She’s from here. Born and raised. Her new ep 3000° reflects this and nods to the recent musical history made by Hot Boyz and Juvenile with 400/500 Degreez.

So, in an effort to reward those of you who are experiencing a hot summer like NOLA, we’ve built a little app at www.3000degreez.app which allows you to view an exclusive video preview of “Wild Life” from 3000° with one catch… your access is directly connected to your local temperature and the hotter it is where you live, the more you’ll get to see. Once you’ve watched the video preview, we’ve also included a little 3000° camera so you can share what the summer looks like where you are.

Anyway, let’s talk about how this came together.

Checking the Temp

3000° Intro Page

This simple application was developed using the Apple WeatherKit REST API which was released one week prior into Beta. I wrote another post to help you traverse the confusion of generating the web token required to make calls to the API and also explained the Netlify Function setup I used on this project. The only adjustment I made to the code provided in that post is singling out the temperature data our app required and converting the Celsius temperatures to Fahrenheit. Our app uses the “feels like” or “apparent” temperature because some days the temperature in New Orleans is stated as 95° but once you factor in humidity, it feels like 115°. Seriously.

let temperature = currentWeather.temperatureApparent * 9/5 + 32

This temperature is then converted to a scale of 0–1 to decide how much of the video preview the user should be able to watch. We can do this with Math.min and Math.max.

let unlocked = Math.min(Math.max(0, temperature), 100) / 100

With this 0–1 unlocked value in hand, let’s talk about how we handled video.

Video Access

Our video player is simply an HTML Video player with a custom designed control which is ½ playbar and ½ thermometer. I thought it would be a fun UX to have the video player itself reveal the user’s temperature and access through playback. So, once the thermobar reaches the user’s apparent temperature, it paused the video. As soon as the player begins playing, we run a requestAnimationFrame loop to continuously listen for changes to the video’s current playback time. If that playback value exceeds the unlocked access value, the video is paused and the user is redirected to the app’s outro.

const listen = () => {
  // Request animation frame
  requestAnimationFrame(listen)  // Get played percent
  let played = video.currentTime / video.duration  // If played is greater than unlocked
  if (played > unlocked) {
    // Pause video
    video.pause()    // Redirect to outro  }
}

I just came off of my very complicated Lord Huron multiverse video player project so I had a pretty good grip on the HTML Video events required to make this work. Check out the onplay event which should kick off the listener above.

Distorted Logo Effect

I had the idea to create a subtle animated version of the 3000° logo and give it a heat distortion effect. This was done using a PixiJS displacement filter which I rolled into a simple Vue.js component. Rather than go through that setup in detail here, I recreated the component on CodePen.IO for your dissection here.

Thanks

A photo of Ambré and her family — 3000° album cover

I rarely get a chance to work with someone from here but the team Roc Nation and Title 9 Inc. made it happen. Thank all of you for this opportunity. Congrats to Ambré on her new ep! Listen to 3000° now and watch the app for more temperature locked content throughout the summer.