The yard fills the frame.
Hard pixels.

A forge, a lighthouse, a tea house and a windmill. Live yards on the Pixel kernel, with a finish of their own: closer tones, a hard shadow, a ground that fills the frame.

Use the Dither skillSame repository. The Pixel kernel, plus this finish.

The mountain forge

A smith strikes the anvil by a stone forge. Smoke leaves the chimney, and a mule waits with the cart.

Hover the smith or the mule; tap the smith to rest.

8 s loop · 70 KBOpen scene Source

The lighthouse

A plaster tower on a rocky islet. A hard ray crosses the water, and a small boat rocks beside the rocks.

Hover the keeper or the boat; tap the keeper to toggle the beam.

8 s loop · 68 KBOpen scene Source

The tea house

A timber tea house by a koi pond. Carp circle in the near water, and a tap shifts the hour from day to dusk.

Hover the host or a lantern; tap the host to change the hour.

8 s loop · 69 KBOpen scene Source

The windmill

A stone mill under a conical tile cap. The sails turn on the front shaft while the miller holds a sack.

Hover the miller or the carter; tap the miller to brake the sails.

8 s loop · 69 KBOpen scene Source

Not a new renderer.
A finish of its own.

Every frame is drawn at 360 by 280 and enlarged with square pixels. Surfaces use five close tones and a 4 by 4 ordered dither. The sun throws a hard shadow that darkens the ground's own colour. The yard, or the shore, fills the frame.

One or two people do one looping action. A tap toggles one state: the smith rests, the beam goes out, the hour changes, the sails brake. A lamp is a paper box. A beam is a thin box of hard pixels.

Pixel stays at 320 by 240 and 24 fps, with an 8 by 8 Bayer matrix and a ground that dissolves into the page. Dither keeps that kernel and changes the finish: 12 fps, a harder dither, a hard shadow, and a page held at or under 70 KB.

A yard of your own.

Name the yard, the one action, and the one thing a tap toggles. Dither gives your agent the finish, the support rule and the checks.

Install Diorama Dither

Install the Dither skill for your coding agent. It includes the finish on the Pixel kernel, four examples, a validator, a support check and browser checks. Built pages need nothing at all.

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

Use diorama-dither to build a stone forge in a mountain yard. The smith strikes the anvil, smoke leaves the chimney, and a mule waits with the cart.

Open the Diorama repository

Node.js 20+ runs the build and checks; Chrome or Chromium runs the look. See the Dither guide for setup, the support rule, the byte budget and embedding.

Four 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.

Explore Pixel

Diorama Dither

The Pixel kernel, with this finish: 360 by 280, a 4 by 4 ordered dither, a hard shadow and a yard that fills the frame. At most 70 KB.

You are here. Reduced motion holds the clock. The camera stays fixed.