New Zealand's Homepage

New Zealand's Homepage

It's been an absolute privilege to work on the "face" of New Zealand which has over a million travellers a month stopping by to admire and explore.

A reinvention of the traditionally passive big brand TVC into something way more engaging. You're in control of a giant 48 metre real-life scroll bar that lets you scroll a camera through four of New Zealand's most amazing locations.

Built using a combination of HTML5 canvas with a Flash fallback for manky old IE 7-8 and oodles of Javascript wizardry.

Shot using time-lapse stills on a Canon 5D over 6 hours for Milford and 2 hours for the other locations. The camera traveled 12 metres at each location on a motion controlled dolly producing 750-950 stills that were then time remapped and narrowed down to 50 for each scene.

A total of 200 1280x720 pixel frames were hand optimized and then streamed via Akamai to ensure potential travelers in key markets can download the experience in 12-40 seconds.

Even though the full load is 23MB we worked very hard to ensure there was no loading bar required. The initial Javascript framework and first frame of Milford download in under 300k, from that point the site is fully functional and we stream in the rest of the frames as fast as possible around the users current scroll position.

See the frame loading in action. Clear you browser cache and then hit the "d" key to enable debug mode. Once in debug mode use the following keys:
d = show/hide debugging tool
s = show/hide high resolution frames
+/- = cycle through sprite layers

In the end it's a very simple idea and the thing that made it great are the locations and the amazing team I was able to pull together to make it happen. A massive thanks to Jeff Nusz developer extraordinaire, Directors Matt & Damon at Assembly, DOP Duncan Cole, the entire team at Shift and of course Tourism New Zealand for having the faith and audacity to back me pulling it off!

Smashing Magazine have also written a detailed case study on the project.

View the Project