A pixel-art effects library written in a single code file (the author claims 244 effects: fire, explosion, magic, weather, UI, pickups, etc.), which can be directly integrated into web games or exported as sprite sheets; it includes a Claude Code skill that helps you create new effects through a loop of "drafting, rendering, reviewing, and modifying".
Stars 1361 (+27 / 24h)
Reasons
- Each effect is a dependency-free JS file; effects involving characters are "animated": wind-up, release, hit-stop, recovery, with the target reacting to hits, plus 12 complete move sets that chain effects into a full attack sequence
- For web games (canvas, Phaser, PixiJS, three.js, etc.), import the code directly; for Godot, Unity, GameMaker, etc., use
node tools/render.mjs <category/effect> --sheetto export transparent PNG sprite sheets and Aseprite-style JSON - The approach is derived from Hugo Duprez's article on creating pixel effects with Claude, with some code adapted from his MIT-licensed effects; the check script verifies out-of-bounds issues, seams, unseeded random numbers, and slow frames
Usage
- Skill:
/plugin marketplace add patch-gg/pixelfx, then/plugin install pixelfx@pixelfx, or copyskills/pixelfxto~/.claude/skills/; then simply say "add a frost nova to the mage's ultimate" or "export fire and explosion effects as sprite sheets for Godot" - As a library:
npm i github:patch-gg/pixelfx; to create your own:node tools/new.mjs arcane/my-spell→node tools/render.mjs arcane/my-spell→node tools/check.mjs arcane/my-spell; online gallery: patch-gg.github.io/pixelfx
Risks
- The skill only documents installation for Claude Code; creating new effects requires multiple rounds of model rendering, reviewing, and modifying, with results depending on the model's image analysis capabilities
- The README states that the code and effects are MIT-licensed and available for commercial use, but GitHub does not recognize the license file, and the Patch Pixel font is not included in the license; the repository was created on 10 30