To promote its 3008 Hybrid 4, French automaker Peugeot launched a website that takes you, via parallax scrolling, on an illustrated adventure with action movie flair. Developed by agency BETC Digital, the site sees visitors scroll through an interactive graphic novel that stars a spy who “will have to switch between four different travel modes, the exact same modes that you’ll find in Peugeot’s new Hybrid 4 technology.”
Our rough-and-tumble heroine nabs classified info and then bolts from her pursuers to the backdrop of adrenaline-pumping music worthy of theater thrillers. As you scroll through different scenes, you’ll see her actions match up with Hybrid 4 features. For example, when the car’s four-wheel drive, which “enables maximum traction” is mentioned, we see her scaling ivy on a cement wall as part of her escape from the baddies.
The coolest part? 3-D-like parallax optics employed throughout, adding to the inventive and blockbuster feel of the experience. As you scroll, broken glass shards seem to pop out at you, and perception-playing imagery makes the gun fight/car chase scene feels even more Hollywood.
Developer Sylvain Tran and illustrator Gerald Parel (who has worked on Marvel covers for Iron Man) lent their talents to the project, which has definitely set the bar for the storytelling capabilities of the website. The car’s other three modes, by the way, are Auto (the car setting itself to appropriate driving modes), ZEV (zero emissions mode), and Sport (the engine and motor working together for boosted performance).
“When Peugeot asked us to think about communicating its Hybrid4 technology to an audience that isn’t normally super interested in the automotive world, we thought to ourselves that we could create a hybrid content combining comic book and screens,” the agency team of Christophe Clapier and Ivan Beczkowski tells us.
The real challenge in the project, they say, was creating a HTML5 parallax site that worked on all devices: Most PC browsers, tablets and smartphones.
“The project began in late April and we had the first version of the site ready by the end of June. Since then, the longest part has been to optimize the development of the HTML5 site to make sure it works everywhere. To achieve this we had to abandon several visual effects, such as reducing the number of parallax levels.”