Loading
All projects
Agent · 2026
pixel-anims
An Agent Skill that turns a short description into a looping 16-bit pixel-art animation: one self-contained HTML file, with no assets and no libraries.
- Role
- Design & development
- Platform
- Agent Skill · Web
- Version
- v1.0.0
- License
- MIT
pixel-anims.drisdev.io
Overview
The problem
Ask a coding agent for a pixel-art animation and you usually get blurry scaling, gradients, colours from nowhere and a loop that jumps at the seam. Doing it properly takes an indexed palette, integer pixels, a fixed timestep and a last frame that returns exactly to the first, which is a lot to hold in one prompt.
The solution
pixel-anims packages all of that as an Agent Skill. The agent writes only the scene into a frozen engine template, follows hard rules for the 16-bit look, and checks its own frames in headless Chrome before it hands over a single HTML file that runs anywhere.
Features
What it does
From a brief to a loop
Describe a character and what it does; the agent plans the palette, states and timing, then writes one HTML file in vanilla JS and Canvas 2D.
A genuine 16-bit look
A locked palette of 16 to 32 colours and integer pixels only, with no gradients or blur; glows come from dithering and palette lookups.
Loops that never jump
A fixed 60 Hz step and seeded randomness make every tick reproducible, and the engine compares the last frame with the first.
Agents check their own work
A snapshot script renders any tick in headless Chrome and fails on page errors, a broken loop seam or an edited engine.
81 pieces from 31 countries
Legends from Lạc Long Quân and Âu Cơ to Heracles and Sadko, each with its prompt, timings and a timeline of its states.
Works with 70+ agents
Install it as a Claude Code plugin, or with npx skills add for Codex, OpenCode, Cursor, Gemini CLI and more.
How it works
From brief to looping file
- 01
Plan
A short design note: palette ramps, states with durations and easing, and the key moment with its effects.
- 02
Scaffold
A script copies the engine template with every scene region emptied, and never overwrites an existing file.
- 03
Build
The agent fills in the scene, poses, props, particles and camera, drawing only into indexed buffers.
- 04
Check
Up to three rounds of rendering chosen ticks to PNG, reading them back and fixing what looks wrong.
Highlights
Engineering notes
A frozen engine
The engine must stay byte-identical to the template or the snapshot script fails, and a contract check at boot rejects bad state tables and loops that don't close.
Deterministic by design
The same tick always renders the same frame, which is what drives the checks, the posters, the still frames and the README GIFs.
Nothing allocated per frame
Particles and springs live in typed arrays, and the frame loop creates no objects, closures or strings.
A showcase that stays smooth
Tiles show a poster first, start live previews two at a time and pause off screen; re-sorting moves previews without reloading them.
Under the hood
Stack & timeline
- Agent Skills
- Vanilla JS
- Canvas 2D
- Node.js
- Headless Chrome
- Vite
- Vercel
v1.0.0
Scene controls and state timelines, stories for every legend, a page per piece and the 1.0 release.
Worlds
Thirty legends from around the world, a night-sky redesign and a site in nine languages.
Showcase
About 30 pieces, install for any agent, posters, filters and animated GIFs in the README.
Launch
The skill, a Claude Code plugin marketplace and a landing page with four animations.
Gallery
A closer look
pixel-anims.drisdev.io
pixel-anims.drisdev.io
pixel-anims.drisdev.io
pixel-anims.drisdev.io
