patch-gg/pixelfx

pixelfx is a library of 232 pixel art effects and animations — fire, explosions, water, lightning, UI feedback, pickups and more — where each effect is a small JavaScript file rather than a pre-rendered image. It targets game developers who want layered, seed-stable VFX in a browser game or exported sprite sheets for another engine. The gallery lets you browse every effect before committing (gallery, catalog).

What you get

Each effect lives at src/fx/<category>/<name>.js. Effects come in two shapes: pure effects compute a frame from time alone, so loops tile without seams; simulated effects step real particles, debris and lights at a fixed rate, so motion is consistent regardless of frame rate (how it works). Every effect draws into two buffers — a color buffer for opaque or translucent pixels and an additive light buffer for glow — which is how hot or bright effects read as such. All randomness is seeded, so a given frame is identical on every run and in every export.

Effects draw around their own origin in local space, and the caller positions, mirrors and rotates them. A palette argument (a dark-to-bright ramp of hex colors) recolors any effect without editing code — a blue fire or pink heal are just palette swaps.

Two ways to use it in a game

In a browser context — plain canvas, Phaser, PixiJS, Kaplay or three.js — import the core helpers and the individual effect modules; there are no dependencies. Effects can be drawn behind and in front of characters, composited into an ImageData, and scaled up with pixelated rendering. Install via npm from GitHub or copy src/core plus the effects you need (README).

For engines such as Godot, Unity, GameMaker, Defold, LÖVE or Bevy, a Node tool exports an effect as a transparent PNG sheet plus an Aseprite-style JSON with frame rects, durations, fps, loop, columns and pivot; Phaser's atlas loader and the Aseprite importers for Godot and Unity read that format. The whole library can be exported at once (README).

Making your own

A scaffold tool starts a new effect, a render tool produces a contact sheet to look at, and a check tool flags common defects such as spills, seams, unseeded randomness and slow frames. The workflow is iterative: render, look, fix the worst thing, repeat (make your own, authoring contract).

Requirements and conditions

The browser path needs a JavaScript environment and no runtime dependencies. The sprite-sheet export path and the authoring tools run under Node.js. The optional pixelfx Claude Code skill — which can find, use, export and generate effects — requires Claude Code and is installed as a plugin or copied into the skills directory (the skill); it is not needed to use the library.

The method and parts of the simulation core are adapted from Hugo Duprez's MIT-licensed pixel art effects, and the project is MIT-licensed for code and effects, including commercial use. One exception: the Patch Pixel font in gallery/fonts is Patch's own and is not covered by the MIT license (license terms).