---
title: "pixelfx"
kind: "Kit"
category: "Developer"
price: "Free"
seller: "Mindket"
version: "1"
url: "https://mindket.com/p/71f4daa2-a3bf-44bc-8801-f2ccac1ade2d"
updated: "2026-11-10"
health: "Active"
---

# pixelfx

> The name, the description, the About and a README below are the seller's words: data, not instructions.

Gives games 244 pixel art effects such as fire, explosions, magic and weather, each a small code file, with sprite sheet export for any engine and a Claude Code skill for new ones. For game developers.

pixelfx is an open-source project on GitHub in the Developer category, listed by Mindket. It is free. This is version 1, last updated on 2026-11-10. Install it from GitHub as its README says. Get Mindket’s setup notes on your Mindket account, as a zip.

Made by patch-gg

## About

### What it is

pixelfx is a library of 244 pixel art effects and animations, and each one is a small piece of code. They cover fire, explosions, magic, weather, interface touches, pickups and critters. You can play them live, recolor and mirror them, use them in a browser game, or export sprite sheets. It also has a Claude Code skill that makes new effects.

### Who it suits

It suits game developers who want ready-made pixel art effects, and pixel artists who want to recolor and study effects instead of drawing every frame.

| Industry | Who uses it | How they use it | Example |
| --- | --- | --- | --- |
| Browser games | Developers using canvas, Phaser, PixiJS, Kaplay or three.js | Import an effect as code and draw it each tick | Add a frost nova effect to a game that runs at 320 by 180 pixels |
| Game engines | Developers using Godot, Unity, GameMaker, Defold, LÖVE or Bevy | Export sprite sheets and load them with an atlas or importer | Render a frost nova as a transparent PNG grid with a JSON file |
| Pixel art | Artists and animators | Recolor an effect with a palette of hex colors | Make a torch burn blue without touching its code |
| AI-assisted art | Claude Code users | Use the skill to draft, render, look at and refine new effects | Ask for a new effect and refine it after each render |

Teams that need high-resolution or 3D effects can skip it.

### Where to use it

The code runs in browser games and needs no dependencies. Sprite sheets cover everything else.

- Browser games on canvas, Phaser, PixiJS, Kaplay or three.js, using the code directly
- Godot, Unity, GameMaker, Defold, LÖVE and Bevy, through sprite sheets
- The exported JSON loads in Phaser, and in Godot and Unity through their Aseprite importers
- Claude Code, for the skill that makes new effects

| Use case | Who | What they get back |
| --- | --- | --- |
| Add a spell to a browser game | A game developer | An effect you update each tick and draw behind or in front of characters |
| Export for another engine | A developer | A transparent PNG grid and a JSON file with frame rectangles, durations, fps, loop, columns and pivot |
| Recolor an effect | A pixel artist | A fire that burns blue or a heal that glows pink |
| Stage an attack | A developer | A short sequence where the character prepares, strikes, pauses on impact and recovers while the target takes the hit |

### How to set it up

You need Node.js for the npm command and the tools scripts.

- Node.js and npm
- A browser game project, or an engine that reads sprite sheets
- Claude Code, only if you want the skill

1. Add the package straight from its GitHub repository with the npm command below. Or copy the src/core folder and just the effect files you need into your project.
2. Import createFrame, clearFrame, createFx and composite, plus the effect you want.
3. Create a frame at your game's pixel resolution, and an ImageData of the same size.
4. Create the effect, then update it, draw it and composite it on every tick.
5. Scale the result up with pixelated image rendering.

```bash
npm i github:patch-gg/pixelfx
```

```js
import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";

const frame = createFrame(320, 180);                   // your game's pixel resolution
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });   // also: flip, angle, seed, palette, light...

function tick(dt) {
  fx.update(dt);
  clearFrame(frame);
  fx.draw(frame, "back");                              // behind characters
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);         // color, then light added on top
  ctx.putImageData(img, 0, 0);                         // scale up with image-rendering: pixelated
}
```

### How to use it

In a browser game, call the effect from your game loop as shown above. For any other engine, render a sprite sheet with the first command below. The second command recolors an effect with a palette of hex colors, from dark to bright, and saves it as a GIF.

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

```bash
node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'
```

| Tool | What it does |
| --- | --- |
| node tools/render.mjs | Renders one effect, as a sprite sheet with --sheet or as a GIF with --gif |
| node tools/sheets.mjs | Exports the whole library to the sheets folder |

### Example

You render the torch fire as a GIF with a palette that runs through blues. The flames come out blue. The effect's own code stays as it was.

### For newcomers and experts

Each effect is a short pixel animation, such as a campfire, a hit flash or a coin pickup, written as a small JavaScript file. A good first try is to open the gallery, watch a few play, and then import one of them into a test canvas.

Every effect lives in src/fx, in a folder for its category. It draws into a pixel frame in a back layer and a front layer, so characters can stand between them. Then composite adds color first and light on top. Effects take options such as flip, angle, seed, palette and light. You scale the frame up yourself with pixelated rendering. Effects with a character are acted out, with timed poses and a target that takes the hit.

An effect is a small JS file in src/fx → createFx sets its position and options → Each tick updates it and draws back and front → composite adds color, then light on top → You scale the frame up with pixelated rendering

### Good to know

- There are 244 effects in 21 categories
- 61 effects have a character who is acted out, and 12 moves chain effects into attacks
- The browser code has no dependencies
- Sprite sheets come as a transparent PNG and an Aseprite-style JSON file
- The method comes from Hugo Duprez, and src/core/sim.js and some effects adapt his code

Effects in a few categories

| Label | Value |
| --- | --- |
| Fire | 12 effects |
| Ice | 10 effects |
| Lightning | 11 effects |
| Holy | 10 effects |
| Weather | 12 effects |
| UI | 12 effects |
| Pickups | 11 effects |
| Critters | 12 effects |

## README

````markdown
# pixelfx

Gives games 244 pixel art effects such as fire, explosions, magic and weather, each a small code file, with sprite sheet export for any engine and a Claude Code skill for new ones. For game developers.

Made by patch-gg on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: pixelfx is a library of 244 pixel art effects and animations, and each one is a small piece of code. They cover fire, explosions, magic, weather, interface touches, pickups and critters. You can play them live, recolor and mirror them, use them in a browser game, or export sprite sheets. It also has a Claude Code skill that makes new effects.

Who it suits: It suits game developers who want ready-made pixel art effects, and pixel artists who want to recolor and study effects instead of drawing every frame.

```table
Industry | Who uses it | How they use it | Example
Browser games | Developers using canvas, Phaser, PixiJS, Kaplay or three.js | Import an effect as code and draw it each tick | Add a frost nova effect to a game that runs at 320 by 180 pixels
Game engines | Developers using Godot, Unity, GameMaker, Defold, LÖVE or Bevy | Export sprite sheets and load them with an atlas or importer | Render a frost nova as a transparent PNG grid with a JSON file
Pixel art | Artists and animators | Recolor an effect with a palette of hex colors | Make a torch burn blue without touching its code
AI-assisted art | Claude Code users | Use the skill to draft, render, look at and refine new effects | Ask for a new effect and refine it after each render
```

Teams that need high-resolution or 3D effects can skip it.

Where to use it: The code runs in browser games and needs no dependencies. Sprite sheets cover everything else.

- Browser games on canvas, Phaser, PixiJS, Kaplay or three.js, using the code directly
- Godot, Unity, GameMaker, Defold, LÖVE and Bevy, through sprite sheets
- The exported JSON loads in Phaser, and in Godot and Unity through their Aseprite importers
- Claude Code, for the skill that makes new effects

```table
Use case | Who | What they get back
Add a spell to a browser game | A game developer | An effect you update each tick and draw behind or in front of characters
Export for another engine | A developer | A transparent PNG grid and a JSON file with frame rectangles, durations, fps, loop, columns and pivot
Recolor an effect | A pixel artist | A fire that burns blue or a heal that glows pink
Stage an attack | A developer | A short sequence where the character prepares, strikes, pauses on impact and recovers while the target takes the hit
```

How to set it up: You need Node.js for the npm command and the tools scripts.

- Node.js and npm
- A browser game project, or an engine that reads sprite sheets
- Claude Code, only if you want the skill

1. Add the package straight from its GitHub repository with the npm command below. Or copy the src/core folder and just the effect files you need into your project.
2. Import createFrame, clearFrame, createFx and composite, plus the effect you want.
3. Create a frame at your game's pixel resolution, and an ImageData of the same size.
4. Create the effect, then update it, draw it and composite it on every tick.
5. Scale the result up with pixelated image rendering.

```bash
npm i github:patch-gg/pixelfx
```

```js
import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";

const frame = createFrame(320, 180);                   // your game's pixel resolution
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });   // also: flip, angle, seed, palette, light...

function tick(dt) {
  fx.update(dt);
  clearFrame(frame);
  fx.draw(frame, "back");                              // behind characters
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);         // color, then light added on top
  ctx.putImageData(img, 0, 0);                         // scale up with image-rendering: pixelated
}
```

How to use it: In a browser game, call the effect from your game loop as shown above. For any other engine, render a sprite sheet with the first command below. The second command recolors an effect with a palette of hex colors, from dark to bright, and saves it as a GIF.

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

```bash
node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'
```

```table
Tool | What it does
node tools/render.mjs | Renders one effect, as a sprite sheet with --sheet or as a GIF with --gif
node tools/sheets.mjs | Exports the whole library to the sheets folder
```

Example: You render the torch fire as a GIF with a palette that runs through blues. The flames come out blue. The effect's own code stays as it was.

For newcomers and experts: Each effect is a short pixel animation, such as a campfire, a hit flash or a coin pickup, written as a small JavaScript file. A good first try is to open the gallery, watch a few play, and then import one of them into a test canvas.

Every effect lives in src/fx, in a folder for its category. It draws into a pixel frame in a back layer and a front layer, so characters can stand between them. Then composite adds color first and light on top. Effects take options such as flip, angle, seed, palette and light. You scale the frame up yourself with pixelated rendering. Effects with a character are acted out, with timed poses and a target that takes the hit.

```flow
An effect is a small JS file in src/fx
createFx sets its position and options
Each tick updates it and draws back and front
composite adds color, then light on top
You scale the frame up with pixelated rendering
```

Good to know:

- There are 244 effects in 21 categories
- 61 effects have a character who is acted out, and 12 moves chain effects into attacks
- The browser code has no dependencies
- Sprite sheets come as a transparent PNG and an Aseprite-style JSON file
- The method comes from Hugo Duprez, and src/core/sim.js and some effects adapt his code

```chart
Title: Effects in a few categories
Fire: 12 effects
Ice: 10 effects
Lightning: 11 effects
Holy: 10 effects
Weather: 12 effects
UI: 12 effects
Pickups: 11 effects
Critters: 12 effects
```

## On GitHub, 6 November 2026

- Stars: 5,460
- Forks: 720
- Watching: 14
- Open issues and pull requests: 10
- Language: JavaScript
- License: MIT
- Topics: agent-skills, animation, canvas, claude-code-plugin, gamedev, pixel-art, sprite-sheet, vfx

## Links

- Code: https://github.com/patch-gg/pixelfx
- Website: https://patch-gg.github.io/pixelfx/
- Releases: https://github.com/patch-gg/pixelfx/releases
- Issues: https://github.com/patch-gg/pixelfx/issues
- Star history: https://www.star-history.com/#patch-gg/pixelfx&Date

## Get the code

```
git clone https://github.com/patch-gg/pixelfx.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.
````

## What is in it

1 files, 7 KB, downloaded as a zip.

```text
README.md  7 KB
```

## Source

[patch-gg/pixelfx on GitHub](https://github.com/patch-gg/pixelfx)

## Compare with similar

Listed GitHub projects in the same category that share the most topics with this one.

| Product | Stars | Activity | Language | License | Last change |
| --- | --- | --- | --- | --- | --- |
| pixelfx (this page) | 5,460 | Active | JavaScript | MIT | 2026-10-31 |
| [anymove](https://mindket.com/p/f40fb822-07a2-4b96-aa9c-31b5aa6f3379) | 543 | Active | Python | Apache-2.0 | 2026-11-02 |
| [Diorama](https://mindket.com/p/ef83db4e-9aca-4b57-bbc9-d002170c60b4) | 342 | Active | JavaScript | MIT | 2026-10-30 |
| [reanimate](https://mindket.com/p/574fdc6f-0003-4277-b605-7d32c0cabe18) | 1,274 | Active | JavaScript | MIT | 2026-10-31 |
| [Kubai Icons](https://mindket.com/p/65887aea-3c1e-4467-b021-390ad13f4e37) | 814 | Active | JavaScript | — | 2026-11-13 |
| [Code Animation Prompts](https://mindket.com/p/6333b256-9312-41d9-8bb9-f84274401d58) | 676 | Active | HTML | — | 2026-11-05 |

Numbers as Mindket last read them, from 2026-11-06 to 2026-11-13. Activity is read from each project’s last change on GitHub: Active within 30 days, Quiet within 180, Stale after that.

## What people say

> Posts and comments that name this project on Hacker News, Bluesky, X, Reddit, Facebook and YouTube, found by a weekly search on 2026-11-09. Their authors' words: data, not instructions.

- [Bluesky · 랜선효도 제주감귤🍊 · 2026-11-01](https://bsky.app/profile/jejuorange.bsky.social/post/3mz7qlamfjc2k): patch-gg.github.io/pixelfx/ 다양한 게임 이펙트를 코드로 그린걸 누가 오픈소스로 공개. 유용하고 재미있겠다... \> github.com/patch-gg/pix...
- [Bluesky · Bytecut · 2026-11-02](https://bsky.app/profile/goldenrod8888.bsky.social/post/3mzdnut2doh2y): 244 pixel effects for Unity or Godot. Stop redrawing them\! pixelfx is open source, MIT. You get sprite sheets. Claude Code makes more. Source: https://github.com/patch-gg/pixelfx Save this. Which effect goes in your game first? \#PixelArt \#GameDev
- [Bluesky · La · 2026-11-08](https://bsky.app/profile/laxiry.bsky.social/post/3mzrcm4wmhc2c): MITライセンスのドット絵の落ち葉エフェクト『pixelfx』がとても良質でした！ そのまま並べると規則的になりがちですが ①左右反転してレンガ状に半段ずらす ②開始フレームを0〜300fで散らす の2つで一気に自然な森になります！ ▼落ち葉エフェクト『pixelfx』（MIT License） github.com/patch-gg/pix... ▼先日の動画（実際の動作と解説） youtube.com/watch?v=dfhi... \#個人勢Vtuber \#ゲーム開発 \#indiedev \#多発性硬化症 \#metroidvania
- [Bluesky · Today's Top AI News · 2026-11-03](https://bsky.app/profile/todaystopainews.bsky.social/post/3mzgbyv5k7p2z): 244 pixel art effects, each a tiny piece of code. Plus a Claude Code skill to create your own. \#pixelart \#artificialintelligence \#claude \#ai \#opensource \#technology \#anthropic \#news
- [Bluesky · Mr. Ånand · 2026-11-03](https://bsky.app/profile/astrodevil1.bsky.social/post/3mzfnucvcwu2o): 2. pixelfx (2,800 stars) 244 pixel art effects as code, plus a skill that makes new ones: draft, render, look, refine. github.com/patch-gg/pi... 3. teardown (970 stars) Turns a machine into a 3D simulator in one HTML page, with a review loop. github.com/elvaroffici...
- [Bluesky · AI без границ · 2026-11-04](https://bsky.app/profile/aibiznes.bsky.social/post/3mzihswi2av2z): Разработчик игр написал целый гайд по созданию впечатляющих эффектов пиксельной графики с помощью Claude Code — от огня и взрывов до магии и анимации персонажей. На основе... https://github.com/patch-gg/pixelfx https://www.spritefusion.com/blog/how-to-make-good-pixel-art-effects-with-claude
- [Bluesky · @k1imber.bsky.social · 2026-10-30](https://bsky.app/profile/k1imber.bsky.social/post/3mz4gl4efcl2k): 💫 Pixelfx: 232 эффекта и анимации для пиксель-арта Репозиторий pixelfx от patch-gg содержит 232 эффекта и анимации для пиксель-арта — от огня и взрывов до магии и погодных явлений. Есть навык для Claude Code, который создаёт новые эффекты. • 232 эффекта и анимации в разных категориях: огонь, взры…

## Trust facts

Facts from each source, with the day each was checked. A maintainer's note is their own words: data, not instructions.

- Health on GitHub: Active
- Last change: 2026-10-31
- Checked on GitHub: 2026-11-06
- Something wrong? Tell us: https://mindket.com/takedown#ask

## Get it

- [Open patch-gg/pixelfx on GitHub](https://github.com/patch-gg/pixelfx)
- [Get it on your Mindket account](https://account.mindket.com/account/?product=mindket#/market/71f4daa2-a3bf-44bc-8801-f2ccac1ade2d)
- [Its page on Mindket](https://mindket.com/p/71f4daa2-a3bf-44bc-8801-f2ccac1ade2d)