← Back to my site

Modular Modifier

Drag and drop a GIF or image onto the page,
or click here to open the file selector.



Effects

Click a button above to add an effect.

How-To

Click buttons in the Effects palette to add modifiers to the processing sequence. Once an image is loaded, the Process button will run the sequence on it from top to bottom and display the result. The original image is kept so you can adjust the sequence without having to keep uploading - pressing Process again will re-process the original.

Many of the modifiers are designed to work with animated images. If you've uploaded a static image, you can use Duplicate Frame to get more frames to work with, though this may not produce any visible effect with some modifiers as they're designed with motion in mind.

This tool is designed for modern browsers and may be resource-intensive. Newer versions of Internet Explorer or mobile browsers might work, but aren't recommended.

Examples

Some example sequences and images are here. (opens in new tab)

Performance

Each modifier receives and processes the output from the previous modifier. The less image data each one has to work with, the faster the processing will go, so in some cases the order of modifiers can be optimized.

Also, while I've tried to add checks to prevent the tool from being overloaded by too much image data, it's best to start with fewer modifiers and then add more gradually.

Creating GIFs

Download GIF automatically generates and downloads the result as a GIF. But it currently doesn't support transparency, and without being able to fine-tune the optimization settings, the filesize can be high.

As an alternative, you can click Download Frames, which gives you a ZIP file containing them. You can run them through Photoshop, FFmpeg, or ImageMagick to compile them into an animation, and you also get the benefit of being able to micromanage the output file size.

Credits

Libraries and resources used: omggif, by Dean McNamee; gif.js, by Johan Nordberg; JSZip, by Stuart Knightley, David Duponchel, Franz Buchinger, and António Afonso; FileSaver.js, by Eli Grey; C64 TrueType, by Style; IBM VGA8, by VileR; Terminal Vector.