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.

Pete Harris

I am an ex London-based (now living in the country) web designer and front-end developer with 20+ years industry experience. This has spanned working for large creative agencies, co-founding a venture-backed startup, and various other roles.

I am not currently taking on new projects.