diorama-pixel

Installation
SKILL.md

Diorama Pixel: a pixel-art miniature that moves

You are making one small place, a stall, a pier, a garden plot or a doorway, seen from a fixed isometric camera and drawn as pixel art: the whole frame is rendered at 320 x 240 and enlarged with nearest-neighbour pixels, every surface is quantized to a short ramp of muted colours through an 8 x 8 Bayer matrix, the materials carry procedural texture (plank lines, thatch streaks, stones, stippled grass, blotchy water), the ground's edge dissolves into the white page, the sun throws soft shadows, and one or two tiny people do one clear thing in a loop. The three scenes in examples/ are the bar, and they are in the format you will write.

This skill is one of three. diorama draws vector SVG illustrations (UI scenes, line art, empty states, themes); diorama-worlds renders detailed Three.js worlds with articulated people and four finishes. Use this one when the person wants pixels, dithering, a retro or 16-bit feel, or a pixel scene that must stay small and dependency-free.

You write one thing: the scene, a .js file. The kernel (kit/pixel.js) and the page (kit/page.html) are fixed. Never edit them, never paste a changed copy, and never write again what the kernel gives you (the camera, the light, shadows, textures, dithering, the ground, a person rig, trees and bushes, a clock that sleeps offscreen, the pointer).

Every file named below is in this skill's folder. Write the scene and the built page in the person's working directory, and run the scripts from there by their path in this folder.

1. Concept

Write the concept in one line before any code:

Name. The place and what is in it. The one action a person does, and what else moves. What the pointer and a tap do.

Pick a place with a story and a use: a market stall, a jetty, a bakery door, an allotment, a bus stop, a rooftop garden. One action carries the scene (tying a bouquet, fishing, watering, kneading), with anticipation and a pause, and two or three quiet loops around it (cloth, water, leaves, a flag). Then write the parts list in four lines: ground (zones: grass, paving, water, sand, soil, a path), structure (what stands: a stall, a shed, a fence), people (who, where, facing where, doing what), life (what sways, bobs or shimmers). A scene runs to 10–25 objects. If the list reads thin, the scene will too.

Offer two or three concepts when there is someone to ask, and wait. If there is nobody to ask, take the one with the strongest still frame and say which.

Installs
1
GitHub Stars
3
First Seen
7 days ago