Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196


As an immersive experience from the creator of Heroes, this site uses a range of cutting-edge tech to deliver a narrative the viewer can journey through

In collaboration with Tim Kring (creator of Heroes and Touch), BBDO and the producer Raven Metzner, North Kingdom was responsible for building the online and mobile experience, defining how content would be delivered to its audience, and creating a digital ecosystem for Daybreak. The site hosts all the web episodes of the online TV series with the same name. is built using HTML5 and runs on desktop and mobile tablets. For smaller devices, a separate site was provided. With feature detection via Modernizr.js the developers also had fallbacks to simpler techniques for older browsers to maximise the accessibility.

Marcus Ivarsson, creative director at North Kingdom, explained its approach: “The desktop version uses the Canvas element for the background and renders images from different sources depending on the scroll position. If the page is close to the Earth’s surface it gets data from an image sequence, otherwise we look up two large images by an offset value. The sound – also HTML5-based Web Audio – is dynamic depending on scroll position and other events to get the right atmosphere. Some details, like the right-hand menu, use SVG shapes and animations done with Raphaël – a JS library for plotting out vectors in the browser.”

This website is a tour de force of technical achievement, but doesn’t overtly shout about the technology that it uses. Instead the visitor is treated to storytelling at its very best.