Ticking Surprises is a facebook application that lets you send virtual gift-wrapped surprises to your friends that open at the time you specify - Kindle their curiosity, surprise them !!
It is your friend's birthday and you want to do better than leaving them message on their facebook wall. How about posting a virtual gift on their wall; something that they have been drooling over for a long time ? And gift wrapping it ? And setting the gift wrap to open only at midnight ? The curiosity would only make the surprise better !! P.S: Giving the actual gift at their party the following day is also recommended :)
This is the simple idea of Ticking Surprises - a site that lets you embed surprises on the facebook wall. People can see the gift ticking, and can open it at the set time, all without leaving the facebook wall. The embed on the facebook wall looks like a video and can be clicked to expand inline, something like this.
Now for some technical details.
Embedding the gift in facebook timeline is made possible by a SWF file. Flash content can expand inline in the timeline. There is no server component and all the data required for the gift wrapper to function is encoded in the embedded SWF URL and read using stage variables. The gift wrap animation is a gif file, broken down by the frame and included in the flash file.
The cube like interface of the site uses CSS3D transforms. The cube structure is abstracted out in a separate file so that it can be used as a component. The cube component requires a containerDiv, a placeholder that is rotated, and six inner divs, representing the six faces of the cube/cuboid. The six faces can be styled independent of the component; the cube.js only rotates them to look like a cube. The Cube is instantiated with the container div as the argument, and exposes functions to rotate and show the various faces. Note that cube.js also gracefully degrades to simply hiding/showing the six faces if CSS3d rotations are not permitted. Cube.js requires jquery and Modernizr.
The entire structure was written with backbone and each face of the cube is a Backbone view that is dynamically loaded and the cube is rotated on the Router's navigate function. Bootstrap powers the CSS and some components like the datepicker, typeahead, etc. Facebook Javascript SDK is also used for selecting friends, their birthdays and posting it to the facebook wall. Since there is no server side component to the site, the Facebook OAuth cookies are not stored anywhere but your browser. This also ensures that nothing is posted on Facebook on your behalf, without your knowledge.
Ticking surprises is a rewrite of a 5 year old project called scrapstimeout, that was built for sending scraps on orkut in a similar fashion. The rewrite was mostly in terms of the site interface and CSS3D transforms that did not exist then. The flash file is conceptually the same.
If you have tried it out, would love to hear your feedback and suggestions - http://nparashuram.com/scrapstimeout
