Pixel art explosion animation: make an explosion sprite sheet in your browser

The explosion below is a Pixelbolt recipe: a short JSON file that runs a small simulation of heat and smoke and bakes it into palette pixels, the same pixels every time. The smaller bursts after it use plain particles instead.

Open either in the Pixelbolt playground, change the blast or the sparks, and download a sprite sheet, an atlas for your engine or a GIF. It is free and runs in your browser, with nothing to install.

Pixelbolt 0.9.1 · 25 October 2026 · On this page: Explosion with fireball and smoke · Small bursts: sparks, embers, dust, leaves and shatter

Reading the field names below: an effect's settings sit under effects → its name. An emitter (a source of heat, smoke, liquid or particles) is one entry in its emitters list, found by its "name" where it has one. Frames count from 0 (the playground's frame counter starts at 1), and x and y are pixels from the top-left corner.

Explosion with fireball and smoke

A white flash grows into an orange fireball that rises, cools to red and turns into grey smoke, while sparks streak outwards.

64 × 64 pixels, 32 frames of 60 ms. It is a one-shot: Pixelbolt's GIF export plays it once, and the atlas JSON marks it "loop": false. This preview repeats it after a 0.6 s pause, as the playground does. Shown at 4×.

Open the explosion in the playground

Make it yours

These sit under effects → explosion in the recipe.

• expand on the blast-1 to blast-6 emitters (1.6 to 3.2): how fast each blast pushes outwards while it is active. Raise them together for a bigger fireball.
• temperature on the blast emitters (1.8 to 2.8): the heat each one adds. Heat picks the colours in the last look layer, from R at 0.28 up to W at 2.4.
• cooling (0.16): the share of heat lost each frame, so how soon the fireball turns to smoke.
• dissipation (0.1375): the share of smoke lost each frame, so how soon the smoke clears.
• seed (7): picks the pattern of the random noise, flicker and sparks. Any other number gives a different explosion that is just as repeatable.

Small bursts: sparks, embers, dust, leaves and shatter

This recipe uses plain particles rather than a simulation, which suits small, sharp effects. It holds five animations: sparks (shown), embers, dust, leaves and shatter. Pick one from the playground's Animation menu. The playground lists it as Particle effects.

48 × 40 pixels, 9 frames of 55 ms. It is a one-shot: Pixelbolt's GIF export plays it once, and the atlas JSON marks it "loop": false. This preview repeats it after a 0.6 s pause, as the playground does. Shown at 4×.

Open the particle bursts in the playground

Make it yours

These sit under effects → sparks, on the emitter whose "name" is "burst".

• Its burst field (12): how many particles it throws at once.
• angle ([205, 335]) and speed ([1.8, 3.4]): the launch direction in degrees, clockwise from right (270 is straight up), and the speed in pixels per frame. Each particle picks a value between the two numbers.
• gravity ([0, 0.32]): the pull added to each particle every frame.
• floor (36) and bounce (0.35): particles never go below y = 36, and keep this share of their downward speed when they reach it.
• shapes (hot, warm, cool, ash): the symbols each particle shows over its life, from white-hot to red.

Make your sprite sheet in four steps

1. Open an effect above with its Open … in the playground button. The link carries the whole recipe and names Pixelbolt 0.9.1, and the playground renders it in your browser. There is nothing to install and no account.
2. Change a value in the Recipe JSON box. The preview renders again after each edit. If the JSON breaks, it says what is wrong, usually with the line number.
3. Choose a scale for the frame PNG and the GIF, from 1× to 16×. The sheet and atlas stay at the art's own size (see below).
4. Download the files you need (listed below). Copy link makes a link to your edited version.

Export for your game engine

• Sheet PNG: every frame on one transparent sprite sheet.
• Atlas PNG + JSON: the same sheet plus a TexturePacker-style JSON hash with each frame's rectangle, its duration in milliseconds and the named animations. Phaser loads it with load.atlas. In Godot, Unity or another engine, slice the sheet as a grid of equal cells; the game integration notes explain how.
• GIF: the animation for a devlog, a store page or a chat, at the scale you chose. Before you download it, the playground shows its size in pixels and its number of frames.
• Frame PNG: the frame on screen, at the scale you chose.
• Recipe JSON: the recipe itself, to keep, edit or share.

Sheets come at the art's own size, one pixel per pixel. For a bigger sheet, set "scale" in the recipe's top-level "sheet" (add "sheet": { "scale": 4 } if it has none; whole numbers from 1 to 16), or scale it in your engine with nearest-neighbour filtering. Every PNG the playground exports carries its recipe, so you can open it in the playground later (Open file, or drop it on the page) and carry on editing.

The same from the command line

With Node.js 20 or newer, save the recipe (the playground's Recipe JSON button saves it as explosion.fluid.json, or open it from the 0.9.1 package and save it), then run:

npx -y pixelbolt@0.9.1 compile explosion.fluid.json --out explosion.json
npx -y pixelbolt@0.9.1 gif explosion.json --scale 4 --out explosion.gif
npx -y pixelbolt@0.9.1 render explosion.json --out explosion

Run them in the folder where you saved the recipe; Pixelbolt won't overwrite existing files unless you add --force. compile runs the simulation and writes the result as an ordinary recipe of frames. gif writes the animation as a GIF. render writes a folder with the sprite sheet, its atlas JSON, every frame as a PNG, an animated PNG, CSS classes, a small Canvas player, a preview page and the recipe. For the particle bursts, save effects.fx.json, compile it the same way and pick one of its five animations with --animation:

npx -y pixelbolt@0.9.1 compile effects.fx.json --out effects.json
npx -y pixelbolt@0.9.1 gif effects.json --animation sparks --scale 4 --out sparks.gif

For AI agents: Pixelbolt also runs as a local MCP server, whose pixel_compile tool compiles these recipes. See Connect an agent through MCP in the README.

Licence

Pixelbolt is free and open source under the MIT licence. The example recipes on this page ship in its MIT-licensed npm package, and its README says the included artwork is original and covered by the same licence.

Want them ready-made?

Elemental FX is a pack of 27 animated pixel-art effects made with Pixelbolt: elemental powers, impacts, fire, smoke, goo, lava and magic, as transparent sprite sheets with JSON atlases and Godot 4 SpriteFrames files. $4.99 or more on Gumroad.

More pixel art effect guides

• Fire: a campfire, a torch and a hand-drawn flame
• Smoke and steam: a cartoon smoke puff, a steam vent and a dust wave
• Water: a waterfall, a splash, a drip and a dam break
• Slime and honey: a squashing slime, a bursting slime, pouring honey and a honey drop
• Magic: a spell swirl and a bubbling potion

All guides · The playground · Pixelbolt home

Comparing effect tools? See Pixel FX Designer alternatives: 7 pixel-art effect tools compared. For agents: pixel art MCP servers compared.