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+.
By Pete LePage, Developer Advocate
