Holler Naughty or Nice Machine

An end of year 20% project led by the Holler Sydney dev team for Christmas 2012. The concept was simple enough, invite visitors to the Naughty or Nice Test site to connect via Facebook. Once connected, analyse their activity throughout the year to determine whether they had been naughty or nice. Being led by the devs, we decided to use lots of CSS3, transitions and animation. It won’t work for everybody due to browser support, but it was good for us to cut loose and ride the edge of the wave!

Screenshots

Build Details

Built as a single page application with backbone.js. Once the visitor connects via Facebook their timeline is analysed for matches against a predefined set of good and bad words, phrases, and liked pages. The number of likes the visitor has given and received is also taken into account to determine the overall rating of naughtiness or niceness. While this backend process is happening the visitor is transferred from the entry screen to the machine screen by way of an interstitial screen with parallax items.

When the machine page is displayed a few minor animations are instantiated. The visitor is invited to pull a label to start the machine. Once pulled, the machine animations start. Animations are a combination of CSS transforms and animations, canvas animations, and canvas with physics for bouncing animation. The machine animations are custom for each visitor (profile image, timeline phrases, liked pages images, number of naughty/nice balls).

Once the animation has completed a certificate is displayed with the results of the assessment of their behaviour. There are 12 messages in all, covering the range from super bad to sickly sweet good!

Build Team

 Backend Developers

  • Adil Yaqoob

Frontend Developers

  • Scott Swabey
  • Matt Stone
  • Michael Hazell
  • Jamie Hayman

Designers

  • Fitz Fitzpatrick
  • Claus Stangl

Build Tools

Backend

  • PHP 5.3
  • MySQL 5
  • Zend

Frontend

  • HTML5
  • CSS3
  • LESS CSS
  • backbone.js
  • lodash.js
  • coffeescript
  • easel.js
  • box2dweb.js
  • grunt.js

Tools

  • Sublime Text 2
  • Photoshop 5.5
  • Texture Packer

 

Leave a Reply

Your email address will not be published. Required fields are marked *