advertisement
advertisement

See Your Facebook History Take Flight With Facehawk

New interactive music video turns your status updates and photos into animated graphics.

See Your Facebook History Take Flight With Facehawk

You don’t have to think about the more than a billion members, 699 million active daily users, or 469 million daily mobile active users to comprehend the magnitude and level of intimacy of what people share on Facebook. The gaggle of baby pics, food pics, and “OMG this lineup at Starbucks . . . ” clogging your news feed already told you that.

advertisement

But Crispin Porter + Bogusky creative Rajeev Basu has taken the idea of voyeurism in the digital age and created an interactive music video, for the appropriately named New York band Big Data, that turns Facebook statuses and photos into moving, animated graphics on the fly.

It’s called Facehawk, and it essentially takes your Facebook page, blows it up, and morphs it into an animated hawk, live, within your browser. “Every single element in the video is about the viewer,” says Basu, who collaborated remotely with U.S.-based coder Chandler Prall and artist Jordy van den Nieuwendijk in the Netherlands. “Every picture and status is taken from your daily life. As everything is driven by code, the video is actually different every time you watch it. I feel it really hits an emotional note, especially when you see a post or picture you posted years ago, that you might have forgotten about, fly by you on the screen.”

Six months in the making, Facehawk was built specially for Google Chrome using the Canvas API, three.js, and Facebook OpenGraph, as well as Soundcloud integration and scalable vector graphics (SVG). 


One of the biggest challenges for Basu and his creative partners was finding a way for hundreds of Facebook statuses and photos to fly around in 3-D in the browser without bringing it to a complete crawl. Prall says, “At first we used the HTML elements directly for the video, but that was causing the browser to recalculate how every element on the page looked each frame. We saw an almost 100% performance gain after rendering the HTML to images and drawing those directly to the screen.”

Why a hawk? Basu says the image is a take on the metaphor “watch like a hawk.” As observant animals go, it just sounds better than FaceEagle or FaceOwl. And let’s just accept this: It’s perfect for tweet-yelling (“FACEHAWK!”).

advertisement
advertisement

About the author

Jeff Beer is a staff editor at Fast Company, covering advertising, marketing, and brand creativity. He lives in Toronto.

More