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!


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


  • Fitz Fitzpatrick
  • Claus Stangl

Build Tools


  • PHP 5.3
  • MySQL 5
  • Zend


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


  • Sublime Text 2
  • Photoshop 5.5
  • Texture Packer


Leave a Reply

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