DioramaBeta
GitHub

BetaA Claude Code skill· 11 examples · 5 themes

Small 3D worlds that move, built by your agent

Install the skill, describe a place, get one HTML file: an animated isometric scene for a landing page, a doc or any spot in your app. Everything on this site was made with it.

Get the skillSee the examples
npx skills add educlopez/diorama -g

Play with one.
It answers the pointer

This is the town, the first example in the 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. 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 the skill.
Heroes, cards and minis

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

Fig 2 · 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.herotoy100 lines ↗
Fig 6 · Launchpadcard · nightHover the rocket, the gantry or the control room; wait for the launch.rest
LaunchpadA rocket waits on its pad under floodlights; every so often the arm swings away and it launches.cardnight70 lines ↗
Fig 5 · 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.cardsoft76 lines ↗
Fig 7 · 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 9 · Mailboxmini · toyrest
MailboxAn open letterbox with nothing inside. The flag lifts now and then to check, and settles again.minitoy45 lines ↗
Fig 11 · 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 figure is one HTML file your coding agent writes, checks in a browser and hands you. Three steps, no setup.

  1. Install the skill

    One command adds Diorama to Claude Code, Cursor or Codex: the kernel, the themes, 11 examples and the checks.

  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 HTML, frame it, or mount the figure in React with one call. Switch the theme with one field. See how.

FAQs

What is this, exactly?
A skill: a folder of instructions, a small three.js kernel, themes, examples and checks that a coding agent reads when you ask it for a 3D scene. We made it, and every figure on this site is its output. The site is the gallery and the manual.
Is it free?
Yes. The skill, the kernel and the examples are MIT. Use them in any project, commercial or not.
What do I need?
Claude Code or another agent that reads skills, Node.js 20 or later for the scripts, and Chrome or Chromium for the look. A finished page needs nothing: it loads three.js r128 from cdnjs or carries it inline.
Does it work in React?
Yes. The kernel takes a three.js instance and an element; mount a figure in an effect, destroy it on unmount, and pass a theme. Plain pages use two script tags.
Why is everything isometric and blocky?
On purpose. One camera, matte blocks, one sun with soft shadows and a few accents is what makes a scene read at a glance and stay cheap to render.
Can I change the colours?
Every theme is a set of fields: palette, accent, lights, shadows, finish, tone, edges, outline, stroke, glow. Override any of them in the figure or when you mount it, or start from mono and line for a one-colour or hairline look.