Announcing Movi.Kanti.Revo, a new Chrome Experiment

By Pete LePage, Developer Advocate

Cross-posted with the Chromium Blog

Earlier this year at Google I/O, we gave developers a sneak peek at Movi.Kanti.Revo, a new sensory Chrome experiment crafted by Cirque du Soleil and developed by Subatomic Systems that brings the magic of Cirque du Soleil to the web through modern web technologies. The full experiment, which allows users to follow a mysterious character through a beautiful world of Cirque du Soleil performances, was launched today at the Big Tent event in New York City.



The experiment was created using just HTML5, and the environment is built entirely with markup and CSS. Like set pieces on stage, divs, images and other elements are positioned in a 3D space using CSS. To create movement, CSS animations and 3D transforms were applied making the elements appear closer and further away. Everything is positioned and scaled individually to create a highly realistic interactive environment. In addition, the experiment uses HTML5 <audio> to play music and sounds.

Movi.Kanti.Revo breaks with the tradition of keyboard or mouse navigation; instead users navigate through an interactive Cirque du Soleil world with their gestures. To accomplish this, the experiment asks users for permission to access their web cam using the new getUserMedia API. With this new API, the experiment renders the camera output to a small <video> element on the page. A facial detection JavaScript library then looks for movement and applies a CSS 3D transform to the elements on the page, making environment move with the user.

Because this experience was built using just markup, it works in the browser across all devices. The experiment takes advantage of the rich capabilities possible on mobile devices, like the accelerometer to navigate through the world.

To learn more about how this experiment was built, check out the new technical case study or join us for a special Google Developers Live Behind The Divs event on September 20th at 8:30am PDT /15:30 UTC where we’ll be talking to the engineers behind the project.

Head over to Movi.Kanti.Revo at www.movikantirevo.com to check things out, and be sure to open Chrome’s developer tools to see what’s going on behind the <div>s!


Pete LePage is a Developer Advocate on the Google Chrome team and works with developers to create great web applications for the Chrome Web Store. He recently helped launch the +Chrome Developers page on Google+.

Posted by Scott Knaster, Editor