pixelfx: 244 Pixel Art Effects and a Claude Code Skill to Make More

The open-source repository patch-gg/pixelfx, created October 30, 2026, ships 244 procedural pixel art effects written as small JavaScript functions plus a Claude Code skill for generating new ones, and had reached roughly 2,000 GitHub stars by November 1. The MIT-licensed library has no browser dependencies and works with canvas, Phaser, PixiJS, Kaplay and three.js, while a render tool exports transparent sprite sheets with Aseprite-style JSON for Godot, Unity, GameMaker, Defold, LÖVE and Bevy. The README credits the method as adapted from Hugo Duprez's work at Sprite Fusion, and the effects are grouped into roughly twenty categories, most with 12 to 13 effects.

If you build 2D games, prototypes or game-jam entries, pixelfx is worth a look today: a new open-source repo, patch-gg/pixelfx https://github.com/patch-gg/pixelfx?ref=explainx , that ships 244 pixel art effects, every one a small piece of code , plus a Claude Code skill for generating your own. GitHub shows it created on October 30, 2026, and it had reached roughly 2,000 stars by November 1. This guide covers what it contains, how to install it, how it compares with drawing sprites by hand, and what to watch out for. TL;DR | Question | Answer | |---|---| | What is it? | 244 procedural pixel art effects as small JavaScript functions | | License | MIT for code and effects; the Patch Pixel font is excluded | | Dependencies | None for browser use canvas, Phaser, PixiJS, Kaplay, three.js | | Other engines | Export transparent sprite sheets with Aseprite-style JSON for Godot, Unity, GameMaker, Defold, LÖVE, Bevy | | Claude Code | Plugin and skill: find, use, export and create effects | | Credit | The README says the method is adapted from Hugo Duprez's work at Sprite Fusion | | Maturity | Created October 30, 2026; one open issue when we read it | What does pixelfx actually contain? Instead of a folder of PNG animations, each effect is a function that draws frames from code. That has real consequences: you can recolor an effect through a palette option without touching its code, and you can ship a few kilobytes of JavaScript instead of a pile of sprite sheets. According to the README the effects are grouped into roughly twenty categories, most with 12 to 13 effects: moves, fire, explosions, water, ice 10 , lightning, sci-fi, melee, impacts, projectiles, spawn and death, arcane, holy, shadow, status, nature, weather, UI, pickups 11 , transitions 10 and critters. Character effects can also be played as full "acts", with a wind-up, a hit with a freeze frame, and a recovery, using createAct . The README says twelve moves chain effects into attacks. Game feel lives in those freeze frames and wind-ups, so it is good to see them treated as first-class. How do I install it? The README lists three routes. 1. As a library npm i github:patch-gg/pixelfx 2. As a Claude Code plugin inside Claude Code /plugin marketplace add patch-gg/pixelfx /plugin install pixelfx@pixelfx 3. As a plain skill: copy skills/pixelfx into ~/.claude/skills/ For browser games you import functions such as createFx and composite and draw each frame; the README says there are no dependencies. For other engines, export a sheet: node tools/render.mjs <id --sheet That writes a transparent sprite sheet with Aseprite-style JSON, a format Godot, Unity and others can import through common tools. What does the Claude Code skill do? The skill lets Claude search the effect catalogue, drop an effect into your game, produce several variants to compare, export sheets, and add a wind-up animation to an enemy. To create an effect from scratch, the repo provides tools/new.mjs , tools/render.mjs and tools/check.mjs , with a contact-sheet review loop: render the frames, look at them side by side, adjust, repeat. This is a good example of what a skill is actually for. The model does not draw pixels from nothing; it works inside a constrained toolkit with a render-and-inspect loop. If you want the general pattern, read our guide to the anatomy of a Claude Code skill https://explainx.ai/blog/anatomy-claude-code-skill-isometric-interactive-figures-wheresryan22-2026 , and see two other skill-driven projects: imozuru, a deep-research skill https://explainx.ai/blog/imozuru-claude-code-skill-deep-research-original-sources-no-summaries-guide-2026 and Lemo Opuscar, a skill that makes short films without a video model https://explainx.ai/blog/lemo-opuscar-claude-code-skill-short-films-no-video-model-43-styles-2026 . How is this different from drawing sprites or generating images? | Approach | Strength | Weakness | |---|---|---| | Hand-drawn sheets in Aseprite | Total control, unique style | Slow; every variant is more work | | Image-model generated sprites | Fast for static art | Inconsistent frames, hard to loop, palette drift | | pixelfx code-drawn | Deterministic, recolorable, tiny, exportable | A recognisable house style; you work within its 244 effects | Code-drawn effects are deterministic, so the same call produces the same frames every time, and an agent can check its work by rendering. That is why this approach pairs well with a coding agent: the loop is verifiable. We have seen the same logic in other "model writes code instead of pixels" projects, such as Sperid Iris, a pixel-space image model https://explainx.ai/blog/sperid-iris-3b-pixel-space-image-model-no-vae-2026 on the image-model side and a Qwen3.5 4B 3D coder https://explainx.ai/blog/qwen3-5-4b-3d-coder-threejs-open-preview-gguf-apache-2026 on the code side. Where does it come from? The README says the method is adapted from Hugo Duprez's work at Sprite Fusion. Duprez is known for the free, browser-based Sprite Fusion tilemap editor, which exports to Phaser; Phaser's August 2026 news post https://phaser.io/news/2026/08/sprite-fusion-tilemap-editor-phaser?ref=explainx describes his newer work on a pixel art generator for game developers. We could not find a public write-up of the specific effects technique, so we describe it only as the README does. Why do effects matter so much for game feel? Players rarely notice a good hit effect, but they always notice a missing one. A sword swing with no impact flash, no short freeze and no spark feels weightless, even if the damage numbers are identical. That is why the README's "act" structure is interesting: a wind-up telegraphs the attack, the hit freezes for a few frames to give it weight, and the recovery lets the player read what just happened. Those three beats are the same grammar used in fighting games and action platformers for decades. Packaging them as reusable, recolorable code means a small team can reach a consistent baseline quickly. A solo developer can spend the saved time on level design and enemy behaviour instead of animating the fifteenth variation of a spark. A sensible way to evaluate it in an afternoon Rather than reading all 244 effects, test the parts you would actually use. 1. Pick three categories that match your game, for example impacts, pickups and transitions. 2. Run the gallery or render a few effects to sheets with tools/render.mjs , and check how they look at your target resolution. 3. Recolor with the palette option to match your game's palette. If an effect still looks foreign after recoloring, that tells you how much restyling the library will cost you. 4. Hook one effect into your engine , either by calling the functions directly in a browser game or by importing an exported sheet in Godot, Unity or GameMaker. 5. Ask the skill for a variant and judge whether the contact-sheet loop produces something you would keep. This is the real test of the Claude Code part: does it save you time, or do you end up editing by hand? 6. Check the license notes and decide whether you need the Patch Pixel font at all. If the first four steps go well, the library is probably a fit. If they do not, you have lost an afternoon, not a project. What are people likely to ask next? Can the skill replace an artist? No, and the repo does not claim that. It produces effects within a defined visual style. An artist still sets direction, and your game's characters and tiles will define whether the effects blend in. Do I need Claude Code to use it? No. The library works on its own through npm or by copying src/core and the effects you want. The skill is a convenience layer, and the README presents the plugin as one of several install paths. Will it run well on mobile browsers? The README does not publish performance numbers, so we cannot say. Because the effects are drawn procedurally per frame, test on your lowest-end target device before committing, particularly if you stack many effects at once. How active is the project? It is days old. The one open issue and the quick star growth tell you about interest, not stability. Watch the releases and issue tracker for a week or two before building on it. Limitations and gotchas 1. Character-bound effects assume a stock body. Effects drawn on the character are built for a 24 by 38 dummy. If your character art differs and you ship those effects, regenerate them. 2. Sheets contain only the effect. To export a character performing an act, bake it separately with tools/act.mjs . 3. The font is different. The Patch Pixel font in gallery/fonts is outside the MIT license. Read NOTICE.md before bundling it. 4. It is brand new. Two days old means no track record, thin issue history and API churn risk. Pin a commit if you depend on it. 5. Skill trust. A skill or plugin from an unknown marketplace runs with your agent's permissions. Read skills/pixelfx and the tool scripts before enabling them, as you would with any code. Our guide to the official Claude plugins directory https://explainx.ai/blog/anthropics-claude-plugins-official-directory-structure-install-submit-trust-guide-2026 covers how to judge trust. Prompts to try After installing the skill, these requests match the examples in the README: - "Add a lightning strike effect to my Phaser game when the player picks up the orb." - "Generate five variants of the ice explosion in different palettes so I can compare them." - "Export the fire category as sprite sheets for Godot." - "Give my slime enemy a wind-up before its attack." - "Create a new effect for a poison cloud, render a contact sheet, and iterate until it loops cleanly." Keep your own game's sprite size in mind when you ask: effects scaled to a different resolution can lose the crisp look that pixel art depends on. Should you adopt it? For a game jam or prototype, yes: you get a catalogue of impact, pickup and transition effects in minutes, MIT licensed, with no asset pipeline. For a commercial game with a distinctive art direction, treat it as a starting kit and a reference for how to structure effects as code, and expect to restyle. Either way, the repo is a neat demonstration of a skill that wraps a deterministic toolchain, which is where agent skills tend to work best. Related reading Repository details, star counts and license notes are accurate as of November 1, 2026.