It’s basically a set of image filters that render in the browser. Greyscale, sharpening gaussian blur and more on the web, no ImageMagick or GD required. It allows you to take an image like this:
And using a simple class and a couple of HTML5
data-* attributes, render it in a number of different ways:
range form input)
Since I’m using
canvas to pull this off I’m automatically excluding IE8 and lower from the equation (it works great in the IE9 beta), which meant that I could also save out the images as dataURLs. The upshot? You can use the output images the same way you would any other image within a web page; as a CSS background, as source for a canvas animation, and if you really want, you can even Right Click -> Save As to save the filtered image to your hard drive.
(And this blog template is really starting to show its age. In a fit of irony worthy of an entire extra verse by Alanis, I had to pre-render the effects above and save them as separate images instead of showing them rendering realtime, because the HTML5-friendly PaintbrushJS doesn’t play nice with an XHTML doctype.)