# Pixelfx

Make pixel art effects and sprite animations in code with the pixelfx library, which...

- Repository: https://github.com/patch-gg/pixelfx (2496 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add patch-gg/pixelfx --skill pixelfx -g -a claude-code -y`
Codex: `npx skills add patch-gg/pixelfx --skill pixelfx -g -a codex -y`
Cursor: `npx skills add patch-gg/pixelfx --skill pixelfx -g -a cursor -y`
Gemini CLI: `npx skills add patch-gg/pixelfx --skill pixelfx -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add patch-gg/pixelfx`

## Description

Make pixel art effects and sprite animations in code with the pixelfx library, which has 244 ready-made ones, acted out by a character who winds up, freezes on contact and recovers (fire, explosions, water, ice, lightning, sci-fi, melee, impacts, projectiles, spawn and death, arcane, holy, shadow, status, nature, weather, UI, pickups, transitions, critters) to drop into a game, recolor, export as sprite sheets or remix, plus a draft, render, look, refine loop that makes new ones look hand-animated. Use when someone wants pixel art VFX, sprite animations or sprite sheets, game juice, a specific effect ("a frost nova for my mage", "a coin pickup sparkle"), wants to use or export a pixelfx effect in Godot, Unity, Phaser or a canvas game, or wants their pixel effects to look better.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# pixelfx

Pixel art effects as code. Each effect is one file, `src/fx/<category>/<name>.js`, that draws into two buffers:
**color** (pixels: opaque, dithered or truly translucent) and **light** (additive glow). No images, so an effect
can be played live, recolored, mirrored, reseeded and rendered to a sprite sheet for any engine.

The method is Hugo Duprez's ([How to make (good) pixel art effects with
Claude](https://www.spritefusion.com/blog/how-to-make-good-pixel-art-effects-with-claude)): code is clay, trust
your eyes, feed your references. One-shot prompts make mediocre effects. Drafts you render, look at and refine
make good ones.

## Before anything

1. Work in a pixelfx checkout. If the working directory has no `tools/render.mjs`, clone one next to the
   project: `git clone https://github.com/patch-gg/pixelfx`. No install step: the tools use only Node.
2. Check it runs: `node tools/render.mjs fire/torch` writes `records/fire/torch/contact.png`. Open that PNG with
   your image-reading tool. That contact sheet is how you see every effect from now on.

## 1. Look for an existing effect first

`node tools/list.mjs <words>` searches ids, names, tags and descriptions (`node tools/list.mjs frost`,
`node tools/list.mjs slash loop`). `docs/CATALOG.md` lists everything by category. Render the candidates and
look at them before choosing. Most requests are an existing effect with different options:

The rest: https://github.com/patch-gg/pixelfx/blob/HEAD/skills/pixelfx/SKILL.md