Action FX

An archive of the little marks cartoonists draw to show what a character feels, turned into feedback for things people do on a page. Most of the names come from Mort Walker's The Lexicon of Comicana (1980). Press any button.

Tweak it

Size 1× Speed 1× Ink Button reacts Loop (press again to stop)

Use it

<script src="actionfx.js" defer data-bind="button, .btn"></script>

// pick the effect per button
<button data-afx="briffits" data-afx-from="left">Send</button>
<button data-afx="off">Quiet</button>

// or from code
ActionFX.bind('button', { effect: 'emanata', shape: 'corners' });
const h = ActionFX.play('squeans', el, { loop: true });   // h.stop() when done
ActionFX.agitrons(passwordField);
ActionFX.play('emanata', { x: 200, y: 120 });            // at a point
ActionFX.draw(ctx, t, { effect: 'plewds', x, y, w, h }); // pure function of t, for video

One file, no dependencies, about 7 KB minified and gzipped. Marks draw on one shared overlay canvas that only runs while something is playing. Ink takes the surrounding text color and outlined shapes are filled with the page background, so it works on light and dark pages. With reduced motion on, each mark appears in place and fades, and buttons don't move. Enter and Space trigger it too.