Before you get concerned, we know it’s Friday! The Blueshoon team is still getting the hang of keeping to a blog schedule and we really wanted to get Wednesday’s post about outsourcing your web development live, so it kicked back our regular Wednesday Website post until today (sorry, not sorry). In addition to the post, there’s also an awesome eBook you should check out, 8 Essential Questions to Ask Before Hiring a Web Development Team.

Now that we’ve confirmed that it is indeed Friday, let’s talk about today’s website – The Wilderness Downtown. Built and launched in 2010, this website was created by some very talented people to promote Arcade Fire’s 3rd Album. It uses a wide-range of choreographed features to create a custom web music video, on demand. Don’t even understand what we’re talking about? That’s understandable, let’s review.

The site requires you to allow pop-ups, and it is totally worth it (also, this works best in Chrome). First you are asked to enter the address where you grew up. One of our staff members tried the address she grew up at and found that there weren’t enough Google Maps and Street-View data to generate the video. We ended up generating 2 different videos, one with the town she grew up in (Cazenovia, NY) and a second using Blueshoon’s office address (5215 N Ravenswood Ave, Chicago, IL).

So, back to those pop-ups… Once you start the video, you’ll find that the video is actually multiple layered videos that are presented to you for viewing as choreographed windows. Music Video Director Chris Milk was hired for this project, and his artistry is impressive. The first few windows that pop-up include generic video of a figure running down a street at night and a simulation of flocking birds that reacts to the music and mouse movements rendered using HTML5 (you could spend a day just re-watching the video and discovering new features in each window).

As the figure continues running, more windows pop-up including an aerial view of the tops of buildings and streets. Suddenly, we realized we recognized those streets! Using the Google Maps API, the web developers are pulling in the streets leading up to the address you’ve entered. Not only that, they are using HTML5 to clip in video with custom window sizes and rendering the map tiles to zoom and rotate.

When the aerial view zooms in, you’ll notice an animated sprite that is layered right on top of the aerial street view. And then, you start getting video of the Street-View. The windows are synchronized so that when the video of the running figure stops and starts to spin around in the middle of the street, the aerial and street view windows do the same thing. Everyone working on this project has some serious chops, especially the web developers.

There are so many more features we could go on about, but we’ll finish with the postcard you are asked to write to your teenage self.* A generative typeface triggered by your mouse or typing, writes out the message for you. Then, the window once again uses a generated flock of birds to sit on that message (in time with the music, of course) and then fly away.

Just go check it out. Happy Friday!

*We chose “You Are Beautiful” because a public art project was just installed in Andersonville and it’s beautiful.