Pixel Effects as Code: 244 JavaScript FX with a Live Gallery and a Claude Code Skill
Pixel game developers can stop hand-tweaking animation frames and instead treat effects as live, editable code with built-in combat timing. The Claude Code skill hints at a workflow where assistants modify effect logic directly, not just pixel output.
Finding game-ready pixel effects usually means digging through sprite sheets and re-coloring frames by hand. pixelfx instead ships each effect as a small JavaScript file that draws itself frame by frame. The library currently holds 244 effects, grouped into fire, explosion, water, ice, lightning, magic, weather, items, and UI motion, all browsable in a live gallery where you can tweak speed, colors, orientation, and even random seeds.
The code is split into per-effect modules and core utilities. Effects declare metadata plus a draw function; `Painter` handles low-level pixel, line, circle, and glow drawing with a separate glow layer; `createFx` manages playback via `update(dt)` and `draw(frame)`. The same code can export sprite sheets and JSON for engines like Godot or Unity.
A notable design choice is attaching attack timing data to some effects: wind-up, hit-stop, and target recoil are recorded, so a slash or fireball can align with character animations rather than float over a static sprite. The project also bundles a Claude Code skill for editing or generating new effects, and everything is MIT licensed.
Encoding attack timing as data alongside visuals is a deliberate attempt to bridge the gap between VFX libraries and character animation, which most effect packs ignore.
The fixed random seed per effect makes deterministic playback and reproducible sprite exports, a practical necessity that also simplifies testing and debugging.
This is an example of effects-as-code gaining ground in game dev circles, where the tradeoff between runtime flexibility and engine compatibility is handled by offering sprite-sheet export as an escape hatch.