Tiny places.
Pixel by pixel.

A flower stall, a pier and an allotment. Live pixel-art miniatures, drawn by a small renderer with no dependency.

Use the Pixel skillSame repository. No three.js, no WebGL.

The flower stall

A florist ties a bouquet at a corner stall while a customer waits; the awning and the pennant move in the wind.

Hover the stall, the florist or the customer; tap the customer to wave.

4.8 s loop · 53 KBOpen scene Source

Fishing off the pier

Someone fishes from the end of a small pier; the float bobs, the rowboat rocks and the flag over the shed swings.

Hover the fisher, the boat or the shed; tap the fisher to strike.

6 s loop · 54 KBOpen scene Source

Watering the allotment

A gardener waters a raised bed of greens on a small allotment; the scarecrow flaps and the water falls in drops.

Hover the gardener, the scarecrow or the barrow; tap the gardener to wave.

4 s loop · 53 KBOpen scene Source

Not a filter.
Pixels from the start.

Every frame is drawn at 320 by 240 and enlarged with square pixels. Planks show their grain, thatch its streaks, paving its stones; grass is stippled and water moves in dithered blotches. The ground fades into the page dot by dot.

The sun throws real shadows, the people hold a pose that reads at six pixels a head, and the pointer lights what it touches. A tap answers: a wave, a strike, a pour.

A software renderer on a 2D canvas, about 4 ms a frame at 24 fps. Different from the Worlds pixel finish, which renders a Three.js scene at low resolution: Pixel trades articulated contact poses for textured surfaces and a page about fifteen times smaller.

A tiny place of your own.

Describe the place and the one thing that happens there. Pixel gives your agent the renderer, the art direction and the checks.

Install Diorama Pixel

Install the Pixel skill for your coding agent. It includes the renderer, three examples, a validator and browser checks. Built pages need nothing at all.

npx skills add educlopez/diorama --skill diorama-pixel -g

Use diorama-pixel to build a tiny bakery front at dawn. The baker carries a tray of loaves to a stall while a cat watches from the step.

Open the Diorama repository

Node.js 20+ runs the build and checks; Chrome or Chromium runs the look. See the Pixel guide for setup, prompts and embedding.

Three skills. One Diorama.

Diorama SVG

Lightweight SVG illustrations for interfaces, docs and empty states. Six themes, sharp at any size, no WebGL. Roughly 30–35 KB gzip.

Explore SVG figures

Diorama Worlds

Textured miniature settings, articulated people and shared action timelines. Three.js and WebGL 2; roughly 0.77 MB per standalone HTML.

Explore Worlds

Diorama Pixel

Dithered pixel-art miniatures from a small software renderer on a 2D canvas. No three.js, no WebGL; about 55 KB per standalone HTML.

You are here. Reduced motion, offscreen sleep and a 24 fps step are built in.