The project's README from github.com/patch-gg/pixelfx. As one markdown file: README.md.
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.
| category | effects | some of them |
|---|---|---|
| fire | 12 | brazier, campfire, candle, fire breath, fire ring, fire tornado… |
| explosions | 12 | barrel explosion, big explosion, cartoon pow, dirt explosion, firework burst, firework rocket… |
| water | 12 | bubbles, drip, fountain, geyser, rain splash, ripples… |
| ice | 10 | blizzard vortex, freeze, frost breath, frost nova, ice crystal, ice lance… |
| lightning | 11 | ball lightning, chain lightning, charge up, electrified, lightning strike, plasma ball… |
| sci-fi | 12 | emp blast, energy core, force field, glitch, hologram, jetpack… |
| melee | 12 | claw swipe, dagger flurry, double slash, hammer smash, heavy cleave, scythe reap… |
| impacts | 11 | blunt hit, bullet impact, critical hit, ground slam, heavy landing, hit flash… |
| projectiles | 13 | arrow, bullet tracer, cannon shot, energy disc, signal flare, homing missile… |
| spawn & death | 10 | coin drop, disintegrate, dissolve burn, egg hatch, poof, respawn beam… |
| arcane | 12 | arcane beam, arcane missiles, arcane orb, blink in, blink out, magic circle cast… |
| holy | 10 | blessing, divine shield, feather burst, halo, heal, healing ring… |
| shadow | 12 | black hole, curse, dark explosion, eclipse, grasping hands, hex sigil… |
| status | 13 | bleeding, burning, charmed, confused, cursed, frozen… |
| nature | 13 | acid splash, boulder, earth spike, healing bloom, leaf storm, poison cloud… |
| weather | 12 | aurora, blizzard, cherry blossoms, clouds, falling leaves, fireflies… |
| ui | 12 | achievement, coin collect, combo counter, confetti, countdown, crit number… |
| pickups | 11 | chest open, coin spin, collect burst, crystal shard, gem spin, heart pickup… |
| transitions | 10 | blinds, burn away, crt off, diamond wipe, glitch wipe, iris… |
| critters | 12 | bat, bird, butterfly, eyeball, fish school, flying skull… |
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"]}'
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:
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.
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.color takes pixels: opaque, dithered or truly translucent. light takes additive glow, added on
top. Hot things look hot because of the light buffer.{ 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 the Patch Pixel font in gallery/fonts is Patch's own and not covered: see NOTICE.md.
Made by Patch.
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.