pixelfx: 244 free pixel art effects for your game and the Claude Code skill that creates your own

Claude can now make pixel art effects for your game. And it doesn’t have to start from zero: pixelfx is a free pack of 244 effects (fire, explosions, lightning, magic, rain… even coins and chests) with a Claude Code skill that creates whatever you’re missing.

The best part: none of them is an image. Each effect is a small piece of code, so you can recolor it, flip it and drop it into your game.

What pixelfx is

• Repo: patch-gg/pixelfx, by Patch.
• MIT license: free, commercial games included.
• Nearly 6,000 stars on GitHub (5,982 as of November 8, 2026).
• 244 effects across 21 categories: full attacks, fire, explosions, water, ice, lightning, sci-fi, melee, impacts, projectiles, spawn and death, arcane, holy, shadow, status effects, nature, weather, UI, items, transitions and critters.
• Hugo Duprez’s method: code is clay, trust your eyes and give it references.

1 · See them live

Open the gallery and play with them. The full catalog is in the repo’s docs/CATALOG.md.

2 · In a web game (canvas, Phaser, PixiJS, Kaplay, three.js)

Install it from GitHub (it has no dependencies):

npm i github:patch-gg/pixelfx

And use it in your game loop:

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 });

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

3 · In Godot, Unity, GameMaker, Defold, LÖVE or Bevy

Export sprite sheets:

git clone https://github.com/patch-gg/pixelfx && cd pixelfx && npm install
node tools/render.mjs ice/frost-nova --sheet   # transparent PNG + Aseprite-style JSON
node tools/sheets.mjs                          # exports the whole library to sheets/

The JSON includes each frame’s rect, the durations, fps, whether it loops and the pivot. Phaser’s atlas loader and the Aseprite importers for Godot and Unity can read it.

4 · Recolor or flip it

Any effect accepts a palette, a color ramp from dark to light. A blue fire:

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

In code, pass the options when you create it: palette for the color and flip: true to flip it.

5 · Acted attacks

An effect on its own looks like a sticker. What sells a hit is the body: the anticipation, the freeze on impact (hit-stop), the target recoiling and the recovery. The 61 effects with a character and the 12 full attacks come with that acting built in.

• To play it in full, with character and target, swap createFx for createAct.
• If you have your own character, the timings are stored as data in effect.act (or in meta.pixelfx.act in the sheet’s JSON): start your anticipation animation earlier and freeze everything during the impact.

6 · The Claude Code skill

Install it as a plugin inside Claude Code:

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

(Or copy the skills/pixelfx folder to ~/.claude/skills/.) Then ask it for whatever you want:

Add a frost nova to my mage’s ultimate ability.

Make five versions of a sparkle for picking up a coin and show me the best two.

Export the fire and explosion categories as sprite sheets for Godot.

This hit feels weak: make it punchier.

Give this spell an anticipation and make the enemy react.

7 · Create your own effects

node tools/new.mjs arcane/my-spell       # a starting point that already works (--loop for a loop)
node tools/render.mjs arcane/my-spell    # look at records/arcane/my-spell/contact.png
node tools/check.mjs arcane/my-spell     # leaks, clipping, unseeded randomness, slow frames

Iterate: look at the contact sheet, fix the worst part and render again. With --gif or --mp4 you can see the motion. node tools/serve.mjs opens the gallery locally with your effects included.

License

MIT, code and effects: use them in any project, commercial included. Parts adapt MIT effects by Hugo Duprez and Hollow Crown. The gallery’s “Patch Pixel” font belongs to Patch and is not covered by the MIT license (see NOTICE.md).

Checklist

• Gallery browsed and effects picked.
• Web game: npm i github:patch-gg/pixelfx. Other engine: sprite sheets with --sheet.
• Palette matched to your game’s colors.
• Skill installed in Claude Code for any missing effects.
• MIT license notice included in your game.