pixelfx

244 pixel art effects and animations, every one a small piece of code. Fire, explosions, magic, weather, UI, pickups, critters and more. Play them live, recolor and mirror them, drop them into a browser game, or export sprite sheets for any engine. Plus a Claude Code skill that makes new ones the way a picky pixel artist would: draft, render, look, refine.

Every effect that involves a character is acted out: he winds up, lets go, freezes on contact and recovers, and a target takes the hit. Twelve whole moves chain the effects into attacks from wind-up to recovery.

open the gallery · catalog · acting · the skill · make your own · how it works

The method is Hugo Duprez's, from How to make (good) pixel art effects with Claude: code is clay, trust your eyes, feed your references. His open-source effects at Sprite Fusion set the bar, and src/core/sim.js and the effects that say so at the top adapt his code. This repo is our take on the idea at library scale, with a skill to keep going.

Every effect is a file in src/fx/<category>/<name>.js. The catalog lists them all.

In a browser game (canvas, Phaser, PixiJS, Kaplay, three.js), use the code. No dependencies.

import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";

const frame = createFrame(320, 180);                   // your game's pixel resolution
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });   // also: flip, angle, seed, palette, light...

function tick(dt) {
  fx.update(dt);
  clearFrame(frame);
  fx.draw(frame, "back");                              // behind characters
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);         // color, then light added on top
  ctx.putImageData(img, 0, 0);                         // scale up with image-rendering: pixelated
}

Install from GitHub with npm i github:patch-gg/pixelfx, or copy src/core and the effects you want.

In any engine (Godot, Unity, GameMaker, Defold, LÖVE, Bevy), use sprite sheets:

node tools/render.mjs ice/frost-nova --sheet

That writes a transparent PNG of every frame in a grid and an Aseprite-style JSON (frame rects, durations, and meta.pixelfx with fps, loop, columns and the pivot). Phaser's atlas loader and the Aseprite importers for Godot and Unity read it. node tools/sheets.mjs exports the whole library to sheets/.

Any effect takes a palette (a dark-to-bright ramp of hex colors), so a fire can burn blue and a heal can glow pink without touching its code:

node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'

An effect on its own looks like a sticker. What sells a hit is the body around it: the wind-up that says something is coming, the freeze on contact, the target rocking back, the recovery. So the 61 effects with a character, and the 12 moves, say what the body does and when:

export const act = {
  target: { x: 58 },
  poses: [
    [-0.55, GUARD],            // he starts before the effect does (t = 0 is the effect's first frame)
    [-0.3, WIND_UP],
    [0, CUT, "snap"],          // "snap" holds the last pose and jumps on the key
    [0.06, FOLLOW_THROUGH, "snap"],
    [0.86, GUARD],
  ],
  hits: [{ t: 0.06, stop: 0.14, shake: 0.18, amp: 2, push: 2.8, straw: 18 }],   // freeze for 0.14 s on contact
};

Play the whole thing, character and target included, by swapping createFx for createAct:

import { createFrame, clearFrame, createAct, composite } from "pixelfx";
import * as slash from "pixelfx/fx/melee/sword-slash";

const act = createAct(slash, { x: 80, y: 140 });

function tick(dt) {
  act.update(dt);                                  // holds still by itself during a freeze
  clearFrame(frame);
  act.draw(frame);                                 // { body: false } and { target: false } leave them out
  composite(frame, img.data, backgroundColor);
  const [sx, sy] = act.shake;                      // throw the picture this far
  ctx.putImageData(img, sx, sy);
}

Got your own character? Effect ids haven't changed and a sprite sheet is still the effect alone, so existing games keep working. (Effects drawn on the body paint the stock dummy, so regenerate those if you ship them.) The timing is plain data: read slash.act, or meta.pixelfx.act in a sprite sheet's JSON (windup, recovery, hits with t and freeze, poses). Start your own wind-up animation that long before the effect, and stop updating everything for freeze seconds at each hit.

Effects drawn on the body (frost, poison, a scan line) are written against the standing character and follow him wherever he goes: each pixel of a pose knows which pixel of the standing body it came from. node tools/act.mjs <id> --sheet bakes a whole act, character included, into a sprite sheet.

The body is yours to use too: skeleton(pose) gives you every joint of a pose in 3D, to hang your own things on, and posedParts(pose) gives you each part drawn on its own.

The pixelfx skill teaches Claude Code to find, use, export and make effects. Install it as a plugin:

/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx

or copy skills/pixelfx into ~/.claude/skills/. Then ask for what you want:

• "Add a frost nova to my mage's ultimate."
• "Make five takes on a coin pickup sparkle and show me the best two."
• "Export the fire and explosions categories as sprite sheets for Godot."
• "This hit effect feels floaty. Make it punchier."
• "Give this spell a wind-up and make the enemy react to it."

node tools/new.mjs arcane/my-spell       # a working starting point (add --loop for a loop)
node tools/render.mjs arcane/my-spell    # records/arcane/my-spell/contact.png: look at it
node tools/check.mjs arcane/my-spell     # spills, seams, unseeded randomness, slow frames

Then go round: look at the contact sheet, fix the worst thing, render again. --gif and --mp4 show the motion, --all shows every frame. node tools/act.mjs arcane/my-spell shows an act as consecutive 12 fps steps, because motion bugs don't show in samples. docs/AUTHORING.md has the contract, the drawing API and the quality bar. node tools/serve.mjs runs the gallery locally with your effects in it.

• Two kinds of effect, no images. Pure effects export draw(p, t, o), the frame at t seconds from t alone, so loops tile with no seam. Simulated effects export create(o) and step real particles, debris and lights at 120 Hz, so sparks bounce and smoke rolls the same at any frame rate.
• Two buffers. color takes pixels: opaque, dithered or truly translucent. light takes additive glow, added on top. Hot things look hot because of the light buffer.
• Seeded everything. Every random number comes from the effect's seed, so frame 40 is the same every time.
• Local space. Effects draw around their own origin; the painter places, mirrors and rotates them. Directional effects face right. A 24×38 stock character stands in for status effects, auras and hits.
• A real skeleton, drawn down to pixels. The grey dummy is neutral on purpose, so the eye goes to the move and any effect's colors read on it. He's a 3D skeleton with fixed-length bones, pelvis to spine to shoulders, rendered in a few flat tones with one clean ink line, the way Dead Cells makes its sprites. So he can twist, bend and really turn round, and depth decides what's in front. Poses hold on 12 fps steps, the way hand-drawn sprites do, while particles run at full rate.
• Same frame shape as Sprite Fusion's VFX ({ w, h, ox, oy, color, light }), so both libraries can draw into one frame.

MIT, code and effects. Use them in anything, commercial included. Parts are adapted from Hugo Duprez's MIT effects and from Hollow Crown's MIT source, and the Patch Pixel font in gallery/fonts is Patch's own and not covered: see NOTICE.md.

Made by Patch.