# Diorama

> Three coding-agent skills for animated scenes: Diorama SVG for lightweight interactive figures, Diorama Worlds for detailed narrative miniatures and Diorama Pixel for dithered pixel-art miniatures. Each delivers one self-contained offline HTML file. Separate renderers, setup and installation commands.

Repository: https://github.com/educlopez/diorama

## Diorama SVG
Install: npx skills add educlopez/diorama --skill diorama -g
Invoke: /diorama (or ask your agent to use the diorama skill)
Skill: https://github.com/educlopez/diorama/blob/main/skills/diorama/SKILL.md
Dependency-free SVG, no WebGL. 18 examples. Six themes (toy, soft, mono, line, night, print). Roughly 30–35 KB gzip per built file.

## Examples
- town (hero, toy): Six blocks of houses, shops, a park and a tower; cars, a bus and a tram keep the streets busy and the crane turns.
- harbour (hero, toy): A crane lifts containers off the ship one by one, a tractor carries them round the quay, a tug circles the basin.
- powder (hero, toy): Chairs climb the slope, two skiers ride up and carve back down, a ski class snakes the nursery and the shuttle waits at the lift.
- island (hero, toy): A boat circles the island and ties up at the pier, the lamp turns, gulls cross, the waves breathe.
- farm (hero, toy): A tractor laps the fields and stops at the barn, the windmill turns, sheep graze, the farmer walks the lane.
- warehouse (hero, toy): A truck circles the yard and docks, a forklift carries pallets to the racks, and the yard keeps its own time.
- cafe (card, soft): A barista pulls shots, a customer comes for a cup and goes, a cat minds the chair.
- kitchen (card, toy): The kettle steams and the toaster pops now and then; a cat minds the stool.
- launchpad (card, night): A rocket waits on its pad under floodlights; the arm swings away and it launches, on the clock or on your call.
- server (card, mono): Three racks blink in their own rhythms, the fan turns, a technician walks the aisle with a laptop.
- assembly (card, mono): Jobs ride the belt one at a time through the scanner and under the stamp; the belt holds when you ask.
- rack (card, mono): A three-level rack with nothing on it and a forklift waiting. Hover a level and the forks go to it.
- mailbox (mini, toy): An open letterbox with nothing inside. The flag lifts now and then to check, and settles again.
- seedling (mini, line): A pot of soil with nothing growing and a watering can that lifts and waters it now and then.
- observatory (mini, line): An observatory whose dome turns; now and then the telescope lifts, finds nothing yet, and settles.
- desk (mini, line): A desk with a lamp, an empty tray and a mug; the chair swivels now and then and the mug steams.
- turntable (mini, line): A record player with nothing on it and an empty crate; now and then the arm swings over, finds no record and goes back.
- vending (mini, print): A vending machine with every coil bare; now and then a coil turns and nothing drops into the tray.

## Diorama Worlds
A separate skill inside the same repository: skills/diorama-worlds/SKILL.md. Textured miniature places, articulated people and coordinated actions, with miniature, pixel, halftone and blueprint finishes. Three.js/WebGL 2 bundled into offline HTML (~0.77 MB), not the SVG kernel. Includes pause, playback rate, reduced motion, offscreen sleep, wall-clock and contact checks. Install: npx skills add educlopez/diorama --skill diorama-worlds -g
Invoke: /diorama-worlds (or ask your agent to use the diorama-worlds skill)
Skill: https://github.com/educlopez/diorama/blob/main/skills/diorama-worlds/SKILL.md
Node.js 20+ build tools; install pinned dependencies once. Fixed camera, flat irregular ground by default, four original showcase scenes.

## Diorama Pixel
A third skill in the same repository: skills/diorama-pixel/SKILL.md. Pixel-art miniatures from a dependency-free software renderer on a 2D canvas (no three.js, no WebGL): 320 x 240 enlarged with square pixels, 8 x 8 Bayer dithering, procedural materials (planks, thatch, paving, stone, grass, water, leaves), a ground that dissolves into the page, a shadow map, a jointed person rig with poses, hover and tap answers. About 55 KB per offline HTML; 24 fps, offscreen sleep, reduced motion. Install: npx skills add educlopez/diorama --skill diorama-pixel -g
Invoke: /diorama-pixel (or ask your agent to use the diorama-pixel skill)
Skill: https://github.com/educlopez/diorama/blob/main/skills/diorama-pixel/SKILL.md
- flower-stall: A florist ties a bouquet at a corner stall while a customer waits; the awning and the pennant move in the wind.
- pier: Someone fishes from the end of a small pier; the float bobs, the rowboat rocks and the flag over the shed swings.
- allotment: A gardener waters a raised bed of greens on a small allotment; the scarecrow flaps and the water falls in drops.

## Pages
- /svg: the Diorama SVG examples, live, in every theme
- /docs: SVG installation, prompts, themes, scripts and embedding
- /docs/worlds: Worlds installation, invocation, setup, finishes, browser checks and embedding
- /pixel: the Diorama Pixel examples, live, with the install command
- /docs/pixel: Pixel installation, prompts, checks and embedding
- /worlds: live miniature/pixel playground, four original scenes in miniature, pixel, halftone and blueprint finishes, installation and renderer tradeoffs