Diorama
Lightweight SVG illustrations for interfaces, docs and empty states. Six themes, sharp at any size, no WebGL.
Explore SVG figuresPart of DioramaLittle places.
Little places.
Full of life.
Flowers, fresh bread, clay and a telescope. Four little worlds, four live finishes, built by your agent.
Use the Worlds skillSame repository. A different kind of diorama.
Preparing the little world…A bouquet before closing
A florist gathers and turns a bouquet while a customer waits. A little care, made visible.
Not just a model.
A moment that repeats.
Hands find their work. Feet stay planted. A quiet setting gives the action somewhere to belong.
Switch the finish above. The scene stays the same: its characters, its clock, its little story. Miniature keeps the material detail. Pixel makes a crisp, dithered vignette; halftone brings warm printed dots, and blueprint traces the scene in blue ink.
Pixel-finish 3D, not voxel art or hand-drawn sprites. Halftone and blueprint are live image treatments, not physical print or technical CAD.
A place of your own.
Describe the setting and what happens there. Worlds gives your agent the kit, art direction and render checks.
Install Diorama Worlds
Install the Worlds skill for your coding agent. It includes the renderer, examples and browser checks; your agent installs the pinned build tools once.
npx skills add educlopez/diorama --skill diorama-worlds -gUse diorama-worlds to build a little street market. A florist ties a bouquet, a cyclist waits, and a cat sleeps beneath the awning. Pixel finish.Open the Diorama repository
Node.js 20+ runs the build tools; viewers need WebGL 2. See the Worlds guide for setup, invocation and embedding.
Two skills. One Diorama.
Diorama Worlds
Textured miniature settings, articulated people and shared action timelines. Three.js and WebGL 2; roughly 0.77 MB per standalone HTML.
One offline file, including its renderer. Pause controls, reduced motion and offscreen sleep are built in.