Skip to content
Get Friday PicksSubmit

pixelfx: 232 pixel-art effects in code, and a skill to make more

A free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up.

In short: A free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up. It is a free skill for people who use Claude Code and want help with motion graphics.

Checked on · Added

Works with

Agent / toolAccess / costLink
Claude CodePaid Claude plan or APIclaude.com/claude-code
GitHub repoOpen source · ★ 147patch-gg/pixelfx
pixelfx: 232 pixel-art effects in code, and a skill to make more

Image: from the GitHub README, shown with credit.

Reference videos (1)

Real videos made with this skill, credited to their creators. Hover to preview.

pixelfx: 232 pixel-art effects, all written in code thumbnailMOTION0:40

pixelfx: 232 pixel-art effects, all written in code

A 40-second reel of the library: lightning, freezes, respawns and explosions on a pixel character, the full grid of 232 effects, one frost nova recoloured and reseeded in code, sprite-sheet export, and the skill taking an explosion from first draft to done.

pixelfx@rehan_shei♥ 728

Try it in 60 seconds

/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx
npm i github:patch-gg/pixelfx

Install command copied from the project README. Check the README for the latest version.

What it does

A free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up.

pixelfx is two things. First, a library of 232 pixel-art effects in 20 groups, each a short JavaScript file with no images: campfires, explosions, frost novas, lightning, portals, coin pickups, screen transitions,…

Short excerpt from the README of patch-gg/pixelfx. Read the full README on GitHub.

Inside the repo

what's in it.use one.the skill.make your own.how it works.license.

A prompt to try

Make five takes on a coin pickup sparkle and show me the best two.

From the original post, credited below.

Step by step

  1. Open the GitHub repo and play the effects in the gallery.
  2. In Claude Code run /plugin marketplace add patch-gg/pixelfx, then /plugin install pixelfx@pixelfx (or copy skills/pixelfx into ~/.claude/skills/).
  3. Ask for what you need, e.g. add a frost nova to my mage's ultimate, or export the fire effects as sprite sheets for Godot.
  4. For a new effect, let it render the contact sheet and run its checks, then ask for changes like make it punchier.

Watch out for

Built for Claude Code. Effects target small pixel resolutions and canvas-style games; for engines you export sprite sheets. Several effects adapt open code from Sprite Fusion and say so at the top of the file; keep that credit if you reuse them.

Docs, demos & materials

Common questions

What does pixelfx do?

A free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up.

Which AI agents can use pixelfx?

It works with Claude Code. The code is on GitHub at patch-gg/pixelfx.

Is pixelfx free?

Free & open source (MIT). No images or paid services; making new effects uses your own Claude tokens.

How do I install pixelfx?

Run the install command from the README: “/plugin marketplace add patch-gg/pixelfx”. Check the README on GitHub for the latest version, then follow the steps on this page.

Is pixelfx safe to install?

We read 288 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine.

Sources & credit

All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.

Related skills and use cases in Motion Graphics

See all Motion Graphics entries →

Related

Motion Prompt: name the motion you want, then hand it to your agent thumbnailSKILL

Motion Prompt: name the motion you want, then hand it to your agent

A clickable library of 192 named effects (motion-graphics moves, camera moves and transitions, UI parts, landing-page effects, photo looks), each with a moving sample and an example request. Its skill opens the gallery, lets you tick the ones you like and sends their specs and reference code straight to your agent.

Claude Code logoCodex logoClaude Code +1★ 849
HyperFrames: write HTML, get a video thumbnailSKILL0:56

HyperFrames: write HTML, get a video

Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.

Claude Code logoCodex logoClaude Code +1★ 63.8k
/brag: turn a finished project into a launch video thumbnailSKILL0:34

/brag: turn a finished project into a launch video

Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.

Claude Code logoCodex logoClaude Code +1★ 16k
Anatomy: interactive isometric illustrations thumbnailSKILL0:28

Anatomy: interactive isometric illustrations

Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.

Claude Code logoCodex logoClaude Code +1★ 10.6k
video-shotcraft: product films from your real screens thumbnailSKILL

video-shotcraft: product films from your real screens

A Remotion video skill that captures your real product pages, picks shots from a library of 150+ tuned motion recipes, storyboards the film, cuts it to the beat with sound design and hands back an MP4 plus the source you can keep editing.

Claude Code logoCodex logoClaude Code +1★ 13.7k
img2threejs: one image into an editable Three.js 3D model thumbnailSKILL

img2threejs: one image into an editable Three.js 3D model

Show your agent one picture of an object or character and it rebuilds it as plain Three.js code, pass by pass, checking its own renders against the picture, so you get a 3D model you can rotate, animate and keep editing instead of a mesh file.

Claude Code logoCodex logoClaude Code +1★ 18.8k

Free newsletter

Friday Picks

New AI tools you can use right away, in plain words. Every Friday.

Free. No spam. Unsubscribe anytime.