Your game needs a fireball, a coin pickup, and a sword hit that actually lands. Drawing every frame by hand takes days, and asking an image generator for a sprite sheet gives you frames that do not line up, colours that drift, and a hit that looks like a sticker pasted on a character. This guide covers how to make pixel art effects with Claude Code, using a free library and skill that treats every effect as a small piece of code: no image files, no re-rolling, and a sprite sheet you can export when the effect looks right.

What pixelfx is

Pixelfx is a free, MIT-licensed library of 244 pixel art effects and animations, plus a Claude Code skill that finds, uses, exports, and makes new ones. Every effect is one small JavaScript file, not a picture. Fire, explosions, magic, weather, user-interface pops, pickups, and critters are all drawn by code at run time, so you can play them live, recolour them, mirror them, and reseed them without redrawing anything.

The catalogue is organised into 21 categories, including 12 full moves such as arrow shot, dash strike, earth stomp, and fireball throw. Twelve effects per category is typical: fire has campfire and fire tornado, ice has frost nova and ice lance, lightning has chain lightning and plasma ball, and the user-interface group has coin collect, combo counter, and confetti. The README counts 61 effects with a character, and those are the ones where the acting matters most.

The idea behind the library comes from Hugo Duprez's guide to making pixel art effects with Claude, summarised in the README as "code is clay, trust your eyes, feed your references." Pixelfx adapts some of Duprez's MIT-licensed effects and some MIT source from Hollow Crown, and its own code and effects are MIT too, including commercial use. One carve-out matters: the Patch Pixel font in the gallery fonts folder is Patch's own work and is not covered by the MIT licence, so do not treat the font as free to reuse.

Under the hood, each effect draws into two buffers: colour for opaque, dithered, or translucent pixels, and light for additive glow, which is why hot things look hot. Pure effects are a function of time alone, so loops tile with no seam. Simulated effects step real particles, debris, and lights at 120 Hz, so sparks bounce and smoke rolls the same at any frame rate. Every random number comes from the effect's seed, so frame 40 is the same every time you render it.

Install and use

The commands below are quoted verbatim from the README; they were not executed in this run, so verify them on your machine (unverified).

Install the skill as a Claude Code plugin:

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

Or copy skills/pixelfx into ~/.claude/skills/. Then ask for what you want, in the README's own example words: "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", or "Give this spell a wind-up and make the enemy react to it."

To use an effect in a browser game, install the library from GitHub:

npm i github:patch-gg/pixelfx

Then, following the README example, create a frame, create the effect, and draw it behind and in front of your characters each tick:

import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";
const frame = createFrame(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });
fx.update(dt);
fx.draw(frame, "back");
drawCharacters();
fx.draw(frame, "front");

For any other engine, export a sprite sheet instead:

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

That writes a transparent PNG of every frame in a grid plus an Aseprite-style JSON file with frame rects, durations, and pixelfx metadata such as frames per second, loop, columns, and pivot. The README says Phaser's atlas loader and the Aseprite importers for Godot and Unity read it, and that node tools/sheets.mjs exports the whole library to a sheets folder. Any effect also takes a palette, a dark-to-bright ramp of hex colours, so a fire can burn blue and a heal can glow pink without touching its code.

To make your own effect, the README gives a three-command loop: start one, render its contact sheet, and check it:

node tools/new.mjs arcane/my-spell
node tools/render.mjs arcane/my-spell
node tools/check.mjs arcane/my-spell

Then go round again: look at the contact sheet, fix the worst thing, and render again. The check step looks for spills, seams, unseeded randomness, and slow frames.

Where it fits, and where it does not

Pixelfx fits best when you want game feel without an art pipeline: a browser game or game-jam entry that needs readable hits, pickups, and weather today, or a Godot or Unity project that can take sprite sheets. The acting system is the reason to prefer it over a pile of loose effects. An effect on its own looks like a sticker, the README warns, but a hit sells because of the body around it: a wind-up that says something is coming, a freeze on contact, the target rocking back, and a recovery. The 61 character effects and 12 moves carry that timing as data, including hit times, freeze lengths, and poses, so you can start your own wind-up animation that long before the effect and freeze everything for the stated seconds at each hit.

It does not fit every art direction. These are small-resolution pixel effects for canvas-style games, not high-resolution video or 3D particle systems, and the stock character is a neutral grey dummy drawn in a few flat tones with one clean ink line. Effects drawn on the body paint that dummy, so the README warns you to regenerate those if you ship them with your own character. If your game already has a finished art style, budget time to recolour with palettes and to re-time acts to your own sprites rather than expecting a drop-in match.

Two cautions from the project's age. It was created on 2026-10-30 and had only 8 commits when checked on 2026-11-05, so treat the catalogue as young and fast-moving: pin the version you ship, and re-check the README before upgrading. And because the skill makes new effects by writing code, review what it writes as you would any generated code, especially the seeded-randomness rule.

FAQ

How do I make pixel art effects with Claude Code? Install the pixelfx skill with /plugin marketplace add patch-gg/pixelfx followed by /plugin install pixelfx@pixelfx, or copy skills/pixelfx into ~/.claude/skills/. Then describe the effect you want, for example "Add a frost nova to my mage's ultimate", and let the skill find an existing effect or draft a new one through its render, look, and refine loop. The commands in this guide were quoted from the README, not executed here.

How do I install pixelfx? As a skill, use the plugin commands above or copy the skill folder. As a library for a browser game, run npm i github:patch-gg/pixelfx, or copy src/core and only the effects you want. There is no published npm package name in the README; the install route is GitHub.

How do I export pixelfx effects as sprite sheets for Godot or Unity? Run node tools/render.mjs <category>/<effect> --sheet, for example node tools/render.mjs ice/frost-nova --sheet. That writes a transparent PNG grid plus an Aseprite-style JSON file, which the README says Phaser's atlas loader and the Aseprite importers for Godot and Unity read. To export everything, the README gives node tools/sheets.mjs.

Can I use pixelfx effects in a commercial game? Yes, according to the README: MIT, code and effects, including commercial use. Keep two exceptions in mind. Parts are adapted from Hugo Duprez's and Hollow Crown's MIT source, so keep the credits those files carry, and the Patch Pixel font in the gallery fonts folder is not covered by the MIT licence.

Do pixelfx effects use image files? No. Every effect is a small code file that draws into colour and light buffers, with no images. That is why effects can be recolored, mirrored, reseeded, and exported to sprite sheets, and why a loop can tile with no seam. The only image-like outputs are the ones you export yourself, such as sprite-sheet PNGs and contact sheets.

Why do pixelfx hits feel better than a plain effect? Because the character acts, not just the effect. A move chains a wind-up, a cut, a freeze on contact, a target reaction, and a recovery, with hit timing stored as data. If a hit feels floaty, ask the skill to make it punchier, and check the freeze length and target push in the act data before changing the effect itself.

See the skill's directory entry for install, platforms, and quick start: Pixelfx on aiskills.one.