ic_loader
Interactive Experience
86½ years
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.

Services

Frontend Development

Tech

HTML5 + CSS3 (Sass) + JavaScript + PixiJS + Visage Technologies SDK HTML5

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.

Credits:

Agency and Production
Clubhouse
Project Manager
Adrianna Konieczna
Tech Lead
Michał Kleszcz
Frontend Developer
Michał Przyszczypkowski
Frontend Developer
Daniel Capeletti
Frontend Developer
Michał Podkowa
QA Specialist
Paulina Grabowska
QA Specialist
Aleksandra Kornecka
DevOps Engineer
Mateusz Kubaczyk
Production Support
Dominika Stefańska
Unsupported browser
We recommend that you use one of these browsers. You can go to https://whatbrowser.org/ to update your browser.
Chrome 55+
Firefox 46+
Microsoft Explorer 11+
Microsoft Edge 13+
Safari 10+
This website require javascript in order to work properly.
Please enable JavaScript