How we built our dynamic exterior shot homepage

If this is your first time visiting our site, you might not have yet noticed the dynamic time of day, time of year, and weather effect versions of the primary image on our home page.

Or maybe you visited at just the right time where the weather effects seemed a little too on-point that you guessed something had to be up?

Either way, we’re glad you were interested enough to dig a little deeper into it. It’s nice when the little details get noticed.

What began as a fun concept for our homepage design, quickly spiraled out of control as we began brainstorming just how far we could push it.

In the beginning, there was lightness…

Daytime

… and darkness …

Nighttime

And that was a good start. But we thought we could push it a little bit further.

Then came the seasons…


Spring Day / Night


Fall Day / Night


Winter Day / Night

After adding the day/night variations for all of the season we were starting to get pretty happy with where the site was, but …

Before long, we had no choice but to add dynamic weather effects…

I mean, sure, we had a choice. But did we really? Adding weather effects was simply the next logical step. We weren’t going to let “difficult” or “time consuming” stand in the way of awesome.

To get the weather effects working, we hooked into the Dark Sky Weather API to match the weather on the website, with the weather outside our office window. It snows, it rains, and on rare occasions it thunderstorms.

Fall – Rain

Winter Snow

It’s a little hard to appreciate the weather effects just looking at screenshots, so we can give you a peak at what it would look like if it was raining or snowing right now.

Where do we go from here?

If you thought we were done playing with our homepage, you’d be sadly mistaken. We’ve got some plans for the future to include special versions for holidays & special events. Keep coming back to visit, maybe you’ll be lucky enough to catch one.