DioramaBeta
GitHub

Open sourceThree skills for your coding agent

Small worlds.
Made to move.

Lightweight SVG figures, detailed miniature worlds or dithered pixel art. Describe a place; your agent builds an animated scene and hands you one self-contained HTML file.

Explore Worlds Choose your skill
A small SVG town with streets, houses, a tram and a crane.

Diorama SVG

18 figures · 6 themes

Small, interactive illustrations for interfaces, docs and empty states. Crisp SVG, pointer reactions, no WebGL.

npx skills add educlopez/diorama --skill diorama -g
Explore figures SVG guide
An adult florist works on a bouquet in a detailed miniature flower stall, with a waiting customer.

Diorama Worlds

4 scenes · 4 finishes

Little places with a story. Articulated people, textured ground and coordinated action. Three.js and WebGL 2.

npx skills add educlopez/diorama --skill diorama-worlds -g
Explore Worlds Worlds guide
A pixel-art pier on dithered water: someone fishes from the end, a rowboat rocks beside it, a thatched shed stands on the shore.

Diorama Pixel

3 scenes · no WebGL

Tiny places in dithered pixel art. Textured materials, one clear action. A small canvas renderer, no WebGL.

npx skills add educlopez/diorama --skill diorama-pixel -g
Explore Pixel Pixel guide

Try an SVG figure.
It answers the pointer

This is the town, an example from the SVG skill, as the agent wrote it: one file, no build step. Try it before reading on.

Fig 1 · Alder Springshero · toyHover a house, the tower, a car or the tram.rest
Alder SpringsSix blocks of houses, shops, a park and a tower; cars, a bus and a tram keep the streets busy and the crane turns.herotoy131 lines ↗
  1. Move the pointer. The camera tilts a few degrees toward it and settles back on a spring. Nothing is a video: every frame is drawn as you watch.
  2. Hover a part. What answers lifts, lights or turns. The read-out in the corner names it, and the list under the figure says what else answers.
  3. Switch the theme. The chips swap the whole look without reloading: toy, soft, mono, line, night and print. A figure carries one; a page may pass another.
  4. Pause it. The still frame is the pose the figure chose for reduced motion and thumbnails. Play again and the loop picks up where its clock is.

Made with Diorama SVG.
Heroes, cards and minis

Three sizes, six themes, and a different place each time: an island, a launchpad, a coffee bar, a server, a mailbox, a desk. The gallery has all 18, live.

Fig 4 · Gull Rockhero · toyHover the boat, the lighthouse or the house.rest
Gull RockA boat circles the island and ties up at the pier, the lamp turns, gulls cross, the waves breathe.herotoy101 lines ↗
Fig 9 · Launchpadcard · nightHover the rocket to see its stages; tap the control room to launch now.rest
LaunchpadA rocket waits on its pad under floodlights; the arm swings away and it launches, on the clock or on your call.cardnight80 lines ↗
Fig 7 · Corner coffeecard · softHover the cart, the table or the cat.rest
Corner coffeeA barista pulls shots, a customer comes for a cup and goes, a cat minds the chair.cardsoft78 lines ↗
Fig 10 · Server roomcard · monoHover a rack and all its lights turn on.rest
Server roomThree racks blink in their own rhythms, the fan turns, a technician walks the aisle with a laptop.cardmono52 lines ↗
Fig 13 · Mailboxmini · toyrest
MailboxAn open letterbox with nothing inside. The flag lifts now and then to check, and settles again.minitoy46 lines ↗
Fig 16 · Deskmini · linerest
DeskA desk with a lamp, an empty tray and a mug; the chair swivels now and then and the mug steams.miniline37 lines ↗
Open the gallery

Describe the place.
Your agent builds the world

Every skill writes one HTML file. Your agent builds the scene, opens the real output in a browser and checks it before handing it over.

  1. Install the skill

    Choose SVG, Worlds or Pixel above. Each command installs the matching skill for Claude Code, Cursor or Codex; your agent follows its renderer-specific setup.

  2. Ask for a place

    “A harbour at dusk for our landing page”, “an empty state for the inbox”. The agent offers concepts, builds one, and looks at it.

  3. Drop in the file

    Serve the offline HTML, frame it, or mount the renderer in React. Embed SVG, Worlds or Pixel.

FAQs

Which skill should I choose?
Diorama SVG makes lightweight interactive illustrations for UI, docs and empty states. Diorama Worlds makes detailed 3D miniature stories with articulated people and four finishes. Diorama Pixel makes dithered pixel-art miniatures with no dependency. Same repository; separate renderers and install commands.
Is it free?
Yes. All three skills, their renderers and examples are MIT. Use them in personal or commercial projects. Your coding agent may have its own usage costs.
What do I need?
An agent that reads skills and Node.js 20+ for the build/check scripts. Browser checks need Chrome or Chromium. Worlds also installs its pinned build dependencies once and needs WebGL 2 in the viewer; Pixel installs one dev dependency for its browser checks. The install CLI may require a newer Node release; see each guide.
Does a finished file need a network connection?
No. SVG and Pixel include their small renderers; Worlds bundles Three.js and generated textures. SVG files are roughly 30–35 KB gzip, Pixel files about 55 KB uncompressed, Worlds files about 0.77 MB uncompressed. These are different size measures, not a like-for-like benchmark.
Does it work in React?
Yes. Every renderer mounts into an element and releases its resources on cleanup. Use the corresponding guide: their APIs and dependencies are deliberately separate.
Can I change the look?
SVG has six tunable themes. Worlds has miniature, pixel, halftone and blueprint finishes sharing the same action and clock. Pixel takes its palette, ramps and textures from the scene. All three honor reduced motion.