pixelfx.

232 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.

open the gallery · catalog · 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.

what's in it.

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

use one.

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"]}'

the skill.

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."

make your own.

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. 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.

how it works.

• 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.
• Same frame shape as Sprite Fusion's VFX ({ w, h, ox, oy, color, light }), so both libraries can draw into one frame.

license.

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

Made by Patch.