Turning a photo book into a powerful web experience

Eye tracking website

‘86½ years’ is a web experience using both photography and audio to tell stories of Joseph Markovitch, a London pensioner, who had lived in East London area his entire live. It is a homage to him, payed by Hoxton Mini Press, a small and locally run East London publishing house, and Clubhouse Studios. The narrative, driven by the eye tracking technology, makes the website both unique and sentimental journey.

Scope of work

To deliver the project, Clubhouse was looking for a team of frontend developers to collaborate with.

They needed somebody who would collaborate working alongside their studio team and under their creative direction to support the production of the website. All photos, designs, copy and audio have been made in East London area, by a collaborative effort of Hoxton Mini Press and Clubhouse Studios.

The Tech

We built the website using JavaScript (ES6), CSS3 (SASS) and HTML5. One of the Clubhouse Studios’ objective was to give the user a feeling of innovation through the way the site is navigated. We needed to achieve a seamless shift between the chapters. Our job at Apptension was to implement the eye tracking technology to make this experience happen.

The navigation of 86½ years was triggered by users opening and shutting their eyes.
Having worked on face recognition-based projects before, we knew that this particular feature would be challenging to implement. It’s one thing to recognize the face or the eyes of the user, but it’s much trickier to detect whether the eyes are shut or open. Additionally, the detection had to happen in real-time to make sure the navigation was seamless. In order to make it happen we experimented with several different tools and ultimately went with Visage Technologies HTML5 SDK. As a result, closing one's eyes triggers Joseph’s stories. When you open your eyes photos of him appear.

To create stunning animations, we used PixiJS library for flexible 2D WebGL and TweenMax - a part of GreenSock Animation Platform (GSAP) suite for JavaScript. PixiJS happened to be especially useful, as it helped us to create custom animations that didn’t affect the website speed.