What we think, we become. Gautama Buddha

Recently I’ve been exposed to several examples of word fade-in effects on the web, reflecting the kind of visual effect you might associate with certain kinds of fantasy or suspense films. So far the solutions I’ve seen have all required a lot of markup and some heavy lifting with frameworks, but I realised that the effect could easily be recreated with JavaScript and the Web Animation API:

While playing around with the it occurred to me that it might also be used for line animations; I decided to apply it to an interactive roadtrip passing through three locations in my home country of New Zealand.

This interactive is also progressive on mobile, in the sense that smaller devices do not attempt to show the map and locations in their limited viewports, but only show the location details.

Pedestrians crossing a rain-slick street intersection at night, covered by umbrellas A neon-lit shopping district in Japan Japanese lanterns lining an alleyway at night An outdoor dining area at night A view of video billboards at night in a Japanese shopping district A view of video billboards at night in a Japanese shopping district, with pedestrians below

Inspired by a popular Mac OS X screensaver theme and using the incredible photographs of Liam Wong, I’ve made this automated presentation for sites, suitable for portfolios and marketing. It combines some of the oldest principles of web development - progressive enhancement - with some of the newest: the .