Diorama / Pixel
A tiny place.
In pixels.
Build animated pixel-art miniatures: low resolution enlarged crisp, Bayer dithering, procedural planks, thatch, paving, grass and water, a ground that dissolves into the page and tiny people with one clear action. One offline HTML file of about 55 KB, no dependency.
Install
npx skills add educlopez/diorama --skill diorama-pixel -g--skill diorama-pixel selects Pixel; the others are --skill diorama (SVG) and --skill diorama-worlds. All three live under skills/ in the same repository. Add -a claude-code or -a codex to target one agent. Omit -g for a project-local install.
Node.js 20+ runs the build and the validator. The look (browser screenshots and checks) needs Chrome or Chromium and the skill’s one dev dependency, installed once with npm ci --ignore-scripts --prefix <skill-folder>. Built pages need nothing: no WebGL, no CDN, no network.
Ask for a place
/diorama-pixel a tiny bakery front at dawn for our blog header. The baker carries a tray of loaves to a stall; a cat watches from the step.In agents without slash commands, ask “Use the diorama-pixel skill…”. Name the place, the one action, and where it will live. The agent writes a concept and a parts list, builds the scene, validates it and opens the captures before handing it over.
What you get
| Part | What it does |
|---|---|
| resolution | 320 x 240 internally, enlarged by a whole number with square pixels. |
| materials | Planks with grain, thatch in rows, paving and stone, stippled grass, dithered water with sparkles, round leaf clumps; each a ramp of muted colours. |
| dithering | An 8 x 8 Bayer matrix between ramp steps on every surface; narrower on small plain things. |
| ground | An irregular outline whose edge dissolves into the white page; zones for grass, paving, water, sand, soil and paths. |
| light | One warm sun, a real shadow map and contact shadows. |
| people | A jointed rig with poses (stand, work, hold, carry, sit, wave) and props in their hands. |
| pointer | Hover lights a part and names it; a tap answers. A read-out says what is happening. |
Build and check
node <skill-folder>/scripts/build.mjs bakery.js
node <skill-folder>/scripts/validate.mjs bakery.js pixel-bakery.html
node <skill-folder>/scripts/look.mjs bakery.js work/bakery-lookThe validator checks the declaration, the clock (no timers, no randomness), self-containment, the kernel byte for byte, the size and the pointer. The look opens the page with the network blocked and writes the still, four loop moments, hover, press and mobile captures; it checks motion, the loop seam, picking, reduced motion and the frame cost. Open the images too: checks do not judge the picture.
Embed
<iframe
src="/pixel-bakery.html?embed"
title="A baker carrying loaves at a tiny bakery front"
style="width:100%;aspect-ratio:4/3;border:0"
></iframe>?embed fills the frame with the canvas and leaves the words to your page; the read-out stays in a corner. To mount without a frame, load the kernel and the scene as two scripts and call Pixel.mount(Pixel.scenes.at(-1), canvas); the scene API reference has a React component and the runtime contract.
Know the tradeoffs
A frame costs about 4 ms on a laptop; the loop runs at 24 fps, sleeps offscreen and in hidden tabs, and holds a still frame under reduced motion. Performance has not been certified across physical phones.
People are small box figures with poses, not the articulated adults with hand contacts of Diorama Worlds. Trees are leaf clumps, water does not reflect, and the camera is fixed. For crisp vector UI illustrations and themes, use Diorama SVG.
Read the Pixel skill source