In these demos, SVG noise is used as a filter to distort geometric canvas animations.

Inhale for 4 seconds, hold for 7 seconds, exhale for 9 seconds.

It’s a different icon than the one I created for this site.

Used as an initial test for this site’s theme picker icon.

A bespoke developer tool that I created to choose the additive (dark theme) and subtractive (light theme) color palettes for this website.

This wasn’t designed for public consumption, but the code is open-source if you want to remix it with your own fonts. I recorded a quick session of myself using it if you’re curious.

I made this demo UI to show how a mixer might help keep your levels in check. Does this exist yet?

Works with touch, touchpad, mouse, and arrow keys.

Used as part of an online treasure hunt I made.

This was a proof-of-concept for a keyboard glove, which was implemented in hardware by mapping the trie to a directory tree.

Adapted from Virtuoso.

Each experiment was built using a web tool I created in the spirit of OpenFrameworks and TouchDesigner. I wanted libraries close at hand with a simple API for drawing to <canvas>, SVG, etc.

Each row is placed to line up visually with the row above it, which causes a subtle shearing effect.

(Subtle effect on mousemove)

Abandoned UI experiment; seeing a large list is useful for large sets. Also, quicksort would work better here.

I was interviewed for this work by NPR, the CBC, and PCMag.

:facepalm:

Works best with MIDI keyboards, but you can use your computer keyboard too.

Hard press = UPPERCASE, soft press = lowercase.

Though the line’s formula stays consistent as it spirals out, the tile grid doesn’t increase in size.

Changing the timing function on this one is extremely satisfying.

n͖͙͍͔o̴̰̤͈͙̘̥w͉̮ ̩w̺̘i̠̲͉̘̪t̟̜͉͓͈͞h̩͚̺̕ ̧͉̹̮̠ͅm̻̰͔̜͚o̲̥̘r̶͕̟͇͇̟̭e̠ ̩̺̖̟g̪̬̰̺̟̪͈͜l͇͉͚̬͞i̡ṭ̠̲̰̦ͅc̨̣ͅh̰̲̯̺͕̼͈͜e̷͕̜͎̱s̢̩

I’m sure someone else discovered this effect long before I did.

Could be done far more efficiently by scaling / translating a fixed amount of concentric circles, but math-ing it was more fun :)

This layout was rather difficult before flexbox came along.

Super quick demo trying (failing, mostly) to capture the perspective effect.

Includes a few variations.

Drag your mouse over it, and click for something special.

From the project page: “there is confusion in the mixed layers of metaphors. This is not an obfuscated code repository; not really. In some ways, it is the opposite.”

I was hoping for a more convincing gradient; the weight calculation could use some work.

Written originally as a bookmarklet in 2013.

An excuse to write git push it to-the-limit into the console.

Built hastily between speakers on the last day of the festival; requires login with Twitter to protect attendees’ identity.

Requires a bit of JS on page load. Just CSS and SVG after that.

Used to live at the epic phone numbers +1.480.360.MATH (US) and +1.647.360.MATH (Canada).

Creates a shadow based on mouse position.

Includes an audio visualizer built with the Web Audio API.

Implemented with the Web Audio API using custom oscillators.

Probably doesn’t work cross-browser.

Created as a proof of concept for TextSecure’s browser extension layout.

Type “help” for command list.

Never used.

Demo involved patching Adobe Web Platform’s balance-text polyfill.

Inspired by Kung-Fu Chess.

*This is a proof-of-concept and won’t actually steal anything.

Built with a custom raycaster / collision engine.

Currently doesn’t work on iOS < 8 since they mess with scroll events. If you use this in production, look into iScroll.

Bad interaction tbh.

Supports my blog post of the same name.

Part of “Stealing history with CSS binary trees”.

Created with friends at Hacker School. I was in charge of the mobile + WebSocket controller framework and the server.

This used to be on Chrome Experiments but it’s offline now :(

Lowercase alphanumeric, length [1, 198).

Cross-device, cross-browser.

Fun with gradients and background-clip: text.

A follow-up article has since been written to show more robust techniques.

There’s actually some cool stuff going on in here, so I’ve commented it thoroughly.

This was my first CodePen to hit the front page :)

Features a terrible mash-up of Watermelon Man and Mos Def’s Beef freestyle that I threw together in Audacity…

The perspective effect can be added to anything; a site where each content block was extruded could look interesting.

Chrome only as of 2018.

Demo built for web browsers and Wacom tablets. Installation involved creating a large infrared plane behind a flexible display and sensing deformations using Community Core Vision.