Repolode
Submit
patch-gg

patch-gg/pixelfx

A library of 232 pixel art effects (fire, explosions, magic, weather, UI) as small JavaScript modules, plus a Claude Code skill for making new ones.

View on GitHubWebsite
Stars
5,802
Forks
758
Open issues
0
Last commit
8 days ago

What is it?

pixelfx is a collection of 232 pixel art effects and animations, each written as a small piece of JavaScript. Categories include fire, explosions, water, ice, lightning, magic, weather, melee, pickups, status effects and UI feedback. Effects can be previewed in a live gallery, recolored with a custom palette, and mirrored or rotated.

The effects can be used in two ways. In a browser game built on canvas, Phaser, PixiJS or similar, the code is imported directly with no dependencies. For other engines such as Godot, Unity, GameMaker, Defold, LÖVE or Bevy, the project exports transparent PNG sprite sheets with Aseprite-style JSON metadata, including frame timing, loop settings and pivot.

The repository also includes a Claude Code skill that helps find, use, export and author effects, along with tools to render contact sheets, GIFs and MP4s and to check for common quality problems. Effects are deterministic: randomness comes from a per-effect seed, and simulated effects step at a fixed 120 Hz.

Key features

  • 01Ships 232 effects across 20 categories such as fire, ice, weather and UI.
  • 02Runs directly in browser games with no dependencies.
  • 03Exports transparent sprite sheets with Aseprite-style JSON for other engines.
  • 04Accepts custom color palettes to recolor any effect without editing its code.
  • 05Provides a Claude Code skill for finding, exporting and creating effects.
  • 06Produces deterministic frames from seeded randomness.

Use cases

  • Adding hit, spell or pickup effects to a 2D browser game.
  • Exporting a set of explosions or fire animations as sprite sheets for Godot or Unity.
  • Prototyping new pixel art effects with an AI assistant in Claude Code.
  • Recoloring an existing effect, such as turning a fire into a blue flame, for a different character or theme.

Quick start

  1. 1

    Install from GitHub into your project

    npm i github:patch-gg/pixelfx
  2. 2

    Render a sprite sheet of an effect

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

Things to know

  • Built for JavaScript canvas and browser games; other engines need exported sprite sheets.
  • The Patch Pixel font in gallery/fonts is not covered by the MIT license.

In collections

Claude Code tools, skills & pluginsAI agent skill libraries

Topics

#pixel-art#game-dev#animation#sprite-sheet#canvas#vfx#javascript#claude-code#agent-skills#claude-code-plugin

FAQ

What is pixelfx?
A library of 232 pixel art effects (fire, explosions, magic, weather, UI) as small JavaScript modules, plus a Claude Code skill for making new ones. pixelfx is a collection of 232 pixel art effects and animations, each written as a small piece of JavaScript. Categories include fire, explosions, water, ice, lightning, magic, weather, melee, pickups, status effects and UI feedback. Effects can be previewed in a live gallery, recolored with a custom palette, and mirrored or rotated.
Is pixelfx free to use? What license does it have?
pixelfx is open source under the MIT license. Check the license terms before using it in commercial products.
Is pixelfx still maintained?
Actively maintained. The last commit to pixelfx was on Oct 31, 2026.
What can I use pixelfx for?
Adding hit, spell or pickup effects to a 2D browser game. Exporting a set of explosions or fire animations as sprite sheets for Godot or Unity. Prototyping new pixel art effects with an AI assistant in Claude Code. Recoloring an existing effect, such as turning a fire into a blue flame, for a different character or theme.
How do I install pixelfx?
Install from GitHub into your project: npm i github:patch-gg/pixelfx Render a sprite sheet of an effect: node tools/render.mjs ice/frost-nova --sheet
Where can I get pixelfx?
The source code and installation instructions are on GitHub: https://github.com/patch-gg/pixelfx

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects