pixelfx: 244 ready-made pixel art effects, and hits that finally land

What it is and why it matters

You're making a pixel game with Claude. The character moves, the enemy loses health, but the hit is a flat flash: no sparks, no smoke, no weight. Animating them by hand is slow, and if you ask Claude for one in a single message it usually comes out mediocre.

pixelfx is a library of 244 pixel art effects, each one a small code file: fire, explosions, magic, coins, weather and much more. No images: every effect draws itself, so you can recolor it, mirror it and export it as a sprite sheet, the image with every frame in a grid that any game engine can animate. On top of that there's a skill, a package of instructions for Claude Code, that uses the library and makes new effects.

It's free, under the MIT license. It appeared on GitHub on October 30, 2026 and passed 1,600 stars in two days. It's for people who make games on their own, in the browser or in Godot, Unity and the like.

1. Look at them in the gallery first

Before installing anything, open the gallery, https://patch-gg.github.io/pixelfx/: all 244 moving, with a search box. Click an effect:

• palette changes the colors with a ready-made palette: fire turns blue in one click.
• new seed makes another take; mirror flips it; character hides the grey dummy.
• sprite sheet gives you the image with every frame, ready to save, with its sizes and speed.
• At the bottom there's the code to copy.

If the effect you need is already there, save the sprite sheet and go to step 4.

2. Install the skill in Claude Code

You need Claude Code and Node.js; ffmpeg only for the GIF and MP4 previews. In Claude Code, send these two lines, one at a time:

/plugin marketplace add patch-gg/pixelfx

/plugin install pixelfx@pixelfx

The first adds the marketplace, the catalog the plugin comes from. The second opens its page: choose "Install for you" and it works in all your projects. If it asks, run /reload-plugins.

Without the plugin: copy the repository's skills/pixelfx folder into ~/.claude/skills/. It's the same skill.

The node tools/... commands aren't in the plugin: they run in a copy of the repository. If it can't find one, Claude clones it with git next to your project; on your own: git clone https://github.com/patch-gg/pixelfx.

3. Requests to copy for your game

Open Claude Code in your game's folder and change the parts in [ ].

Add [a frost wave around the feet] to [my mage's ultimate]. First search the pixelfx library for the best-suited effect. Put it in the game with its acting: wind-up before the blow, freeze on contact, enemy reacting.

Make five takes on [a sparkle when I pick up a coin] and show me the best two, with an animated preview. Put the one I choose in the game.

Export pixelfx's fire and explosions categories as sprite sheets for [Godot], then explain how to import them: pivot, the filter that keeps pixels sharp, frames per second.

When an effect isn't there, Claude makes it, looks at how it came out and fixes it:

Use pixelfx to make a new effect: [a poison bubble that swells, bursts and leaves a green puddle]. First look at the closest effects in the library. Make three drafts, render them, look at them and fix the worst flaw each time. At the end, run the check and show me the best one.

The skill asks for at least three rounds of rendering and fixing. Once the game exists, try these too:

• "This hit effect feels floaty, it has no weight. Make it punchier."
• "Give this spell a wind-up and make the enemy react to it."

4. Put them in your game

A browser game: the code

For a JavaScript game (canvas, Phaser, PixiJS, Kaplay, three.js) you use the code, which has no dependencies. Install it from GitHub, or copy src/core and the effects you need:

npm i github:patch-gg/pixelfx

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

const frame = createFrame(320, 180);
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");
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);
  ctx.putImageData(img, 0, 0);
}

The effect draws behind and in front of the characters; then scale the canvas up with image-rendering: pixelated.

Godot, Unity and other engines: sprite sheets

For Godot, Unity, GameMaker, Defold, LÖVE and Bevy, run this in your copy of the repository:

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

You get a transparent PNG with the frames in a grid and an Aseprite-style JSON, which Phaser and the Aseprite importers for Godot and Unity can read. For some categories, or for the whole library in sheets/:

node tools/sheets.mjs fire explosions

1. Set the pivot to meta.pixelfx.pivot from the JSON.
2. Import with nearest-neighbour filtering and no compression: no blurry pixels.
3. Play the animation at meta.pixelfx.fps.

The glow is baked into the image and works over dark backgrounds: in a bright scene, recolor the effect.

5. Recolor without touching the code

Every effect takes a palette: hex colors from darkest to brightest. In the gallery you pick it from the menu; in the terminal you pass it with --opts. The torch, blue:

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

The healing ring, pink, straight to a sprite sheet (the colors are an example):

node tools/render.mjs holy/heal-aoe --sheet --opts '{"palette": ["#301","#614","#a26","#e5a","#fad","#fff"]}'

The ready-made palettes have names (ice, poison, holy, arcane, gold, neon and more), and telling Claude "make the fire blue" is enough.

6. The acting: why your hits look fake

An effect on its own looks like a sticker: what sells a hit is the body around it. pixelfx's 61 effects with a character and its 12 complete moves write it into the code, in four beats:

1. The wind-up, in the opposite direction to the blow.
2. The release: a sharp change of silhouette.
3. The freeze: on contact everything stops, from 0.03 to 0.2 seconds, longer for heavier blows.
4. The recovery: the target rocks back, the character returns to guard.

With the library's grey dummy you use createAct instead of createFx, which holds still on its own during the freeze. For an engine, node tools/act.mjs with the effect's name and --sheet bakes everything into a sprite sheet, character included.

With your own character, the sprite sheet is still the effect alone: the acting comes as data and the animation is yours. In meta.pixelfx.act, in the JSON, there are windup, recovery and hits, with the moment of the hit (t) and how long the freeze lasts (freeze). Start your attack windup seconds before the effect, and at each hit stop everything, effect and characters, for freeze seconds. The freeze works on any effect.

Common mistakes

• Asking for a new effect in one message and keeping the first version: make Claude work in rounds.
• Importing the sprite sheet with linear filtering or compression: the pixels go blurry.
• Adding the effect with no wind-up and no freeze: it stays a sticker.
• Using the effects drawn on the body, like frost and poison, without checking them: they paint the grey dummy, not your character.

Checklist

• I found the effects I need in the gallery
• I installed the skill in Claude Code
• I tried one of the requests in my game
• I recolored an effect with a palette
• I added the wind-up before the attack and the freeze on the hit

Frequently asked questions