This experimental playground is best viewed with the latest version of Chrome or Safari.
Navigation 'caterpillar' - uses CSS3 transitions (namely scale & skew), laid out in keyframes, and controlled with JS.
A vendor-specific animation-end callback lets the JS know when a 'step' has ended.
Scroll to the bottom of the page to activate the mexican-waving contact icons.
When this section is scrolled into view, recent tweets are pulled in using the Twitter API (more JSON).
These 'notes' are CSS3 (gradients, drop shadow, keyframe animation and property transition), with some JS to load 'em up and play the sounds.
A completely CSS3 effect here (JS is only used to apply & remove the class on reaching page bottom).
Image position, y-translation and opacity change, with a tiny delay on each child's nodes execution, creates the wave.
Each ant is an instantiated JS object (get it?), drawn using a HTML5 canvas 2D-context.
The LCD controller is a custom JS object that performs some API lookups (Yahoo weather + others) to generate some dynamic info. Then it caches this info in a 'playlist' and animates through it.
Each ant has its attributes (leg-length, step-cadence, gait, body-size & height) randomly assigned.
Wireframe mode shows the underlying construction of the ants. With 'track mouse' on, keep the mouse still and the ants will move towards it.
Currently the ants are autonomous, but collision detection and individual targeting, as well as a more efficient movement calculation using vectors, are all possibilities.
Custom photo gallery (another JS object) uses the Instagram API to pull my photo stream info (in JSON), then randomises the picture order (using a Fisher-Yates shuffle algorithm), before loading up each img source as needed. Yet more CSS3 transitions & animations liven things up.