[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-105319":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":10,"trendingCount":15,"starSnapshotCount":15,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},105319,"diorama","sloemo01\u002Fdiorama","sloemo01","Pixel-art diorama playbook and Three.js code kit: research-first build workflow, locked camera, palette snap, ordered dither, inked contour, animated toy-scale cast, per-entity frame QA.","",null,"JavaScript",206,16,51,0,75,225,86.94,"MIT License",false,"main",true,[24,5,25,26,27,28,29,30,31,32],"creative-coding","game-art","pixel-art","pixelation","procedural-generation","skill","three-js","threejs","webgl","2026-11-01 00:14:10","\u003Cdiv align=\"center\">\n\n# Diorama\n\n**A playbook and code kit for building small pixel-art dioramas in Three.js.**\n\n[![Stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fsloemo01\u002Fdiorama?style=flat-square&color=1d1d1f&logo=github&label=stars)](https:\u002F\u002Fgithub.com\u002Fsloemo01\u002Fdiorama\u002Fstargazers)\n[![Forks](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fsloemo01\u002Fdiorama?style=flat-square&color=1d1d1f&label=forks)](https:\u002F\u002Fgithub.com\u002Fsloemo01\u002Fdiorama\u002Fforks)\n[![Watchers](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fwatchers\u002Fsloemo01\u002Fdiorama?style=flat-square&color=1d1d1f&label=watchers)](https:\u002F\u002Fgithub.com\u002Fsloemo01\u002Fdiorama\u002Fwatchers)\n[![License](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fsloemo01\u002Fdiorama?style=flat-square&color=1d1d1f)](LICENSE)\n[![Skill](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fskill-v3.8.0-1d1d1f?style=flat-square)](SKILL.md)\n[![three.js](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fthree.js-r170-1d1d1f?style=flat-square&logo=three.js&logoColor=white)](https:\u002F\u002Fthreejs.org)\n\n\u003Cp>\n\u003Ca href=\"media\u002Fpikachu-vs-charizard.mp4\">\u003Cimg src=\"media\u002Fpikachu-vs-charizard.gif\" width=\"24%\" alt=\"Pikachu vs Charizard battle diorama, looping\">\u003C\u002Fa>\n\u003Ca href=\"media\u002Fdust-kings.mp4\">\u003Cimg src=\"media\u002Fdust-kings.gif\" width=\"24%\" alt=\"Dust Kings arena show diorama, looping\">\u003C\u002Fa>\n\u003Ca href=\"media\u002Fpool.mp4\">\u003Cimg src=\"media\u002Fpool.gif\" width=\"24%\" alt=\"Swimming pool diorama, looping\">\u003C\u002Fa>\n\u003Ca href=\"media\u002Fbank-job.mp4\">\u003Cimg src=\"media\u002Fbank-job.gif\" width=\"24%\" alt=\"Bank job diorama, looping\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Csub>\u003Cb>Pikachu vs Charizard\u003C\u002Fb>, 45 s  ·  \u003Cb>Dust Kings\u003C\u002Fb>, 38 s  ·  \u003Cb>Pool\u003C\u002Fb>, 26 s  ·  \u003Cb>Bank job\u003C\u002Fb>, 48 s\u003C\u002Fsub>\n\n\u003Csub>Four scenes built with this playbook. Click any tile for the full capture.\u003C\u002Fsub>\n\n[**Install it in one prompt**](#install-it)  ·  [What is in here](#what-is-in-here)  ·  [Start a diorama](#start-a-diorama)  ·  [Verification](#verification)\n\n\u003C\u002Fdiv>\n\nA diorama here is a tiny staged scene on a slab: a locked three-quarter camera, a\nflat cut-out against white paper, a 64 colour palette with ordered dither and an\ninked contour, and toy-scale people with real joint animation. The subject changes\n(pool, night market, bank job, arena battle); the slab, the cast and the\npresentation stay.\n\nEverything is deterministic. The scene is a pure function of `t`, so any frame can\nbe frozen, screenshotted and compared. A screenshot is evidence, not a lucky\ncapture.\n\n`SKILL.md` is the whole playbook: it carries a research-first workflow, the look\nand animation bars, the pipeline, the recipes, the QA harness and the pitfalls,\nin one self-contained file. Everything else here is copy-in code that supports it.\n\n## The scenes\n\n**Pikachu vs Charizard** is the fight at the top of this page: Leon throws a ball,\nCharizard bursts out of it and the ball comes back to his hand, four attacks trade\nacross the arena with their own wind-up and hit reactions, Pikachu takes a\nknockdown, and the red recall beam only appears once Charizard is beaten.\n\n**Dust Kings** follows one night's billing: cars on the arena floor, the billboard\nrunning through LIVE, NEW RECORD and THANK YOU, and a fire that gets away from\nthem.\n\n**Pool** is a slow afternoon: one swimmer working laps with a wake trailing behind,\none standing waist-deep by the ladder, one folding into a dive beside the board, a\nlifebuoy and a ball left floating, a lifeguard pacing the far edge, and a\nsunbather who does not move from the towel.\n\n**Bank job** runs in daylight: a sedan noses into the curb, a group in dark clothes\nclimbs the bank steps and the windows go red behind them, the sedan pulls away, two\ncruisers arrive and officers fan out across the street, then the street empties\nagain.\n\n## Install it\n\nPaste this into an agent that can run shell commands. It asks where to put the\nfolder, downloads the whole repository (playbook, templates, QA harness and every\nworked example), reads them, and reports what it learned before it builds\nanything. `SKILL.md` carries skill frontmatter (`name`, `description`, `version`),\nso an agent with a skills directory can load it by name later.\n\n```text\nInstall the Diorama playbook here, then use it to build scenes.\n\nRepo: https:\u002F\u002Fgithub.com\u002Fsloemo01\u002Fdiorama\n\n1. Ask me where the folder should go before downloading anything,\n   and wait for my answer. Propose ~\u002Fskills\u002Fdiorama as the default.\n   Do not pick a path silently.\n2. Download the whole repository, not just SKILL.md:\n     git clone https:\u002F\u002Fgithub.com\u002Fsloemo01\u002Fdiorama.git \"\u003Ctarget>\"\n   Without git:\n     curl -L -o diorama.tar.gz \\\n       https:\u002F\u002Fgithub.com\u002Fsloemo01\u002Fdiorama\u002Farchive\u002Fmain.tar.gz\n     tar xzf diorama.tar.gz && mv diorama-main \"\u003Ctarget>\"\n3. Prove the install before describing it: SKILL.md, README.md,\n   templates\u002F, verify\u002F and LICENSE at the root, and print the\n   commit hash (git -C \"\u003Ctarget>\" rev-parse --short HEAD) or the\n   archive date. If you have no shell or no network, say so and\n   stop. If the download failed or a file is missing, say so and\n   stop. Never describe this playbook from memory.\n4. If you have a skills directory or plugin folder, install it\n   there so you can load it by name in later sessions; otherwise\n   treat \"\u003Ctarget>\" as the folder.\n5. Read before you build: all of SKILL.md, then\n   templates\u002FDESIGN.md, templates\u002FSOURCES.md, templates\u002FCREDITS.md,\n   templates\u002Fqa\u002FREADME.md, the header comment of every file in\n   templates\u002F, and the worked examples under verify\u002F. SKILL.md is\n   the source of truth; the README is only a summary.\n6. Report back in this order: install path and commit, the Look\n   Contract in one paragraph, the Pipeline as ordered steps, the\n   QA scripts and what each one checks, and three rules from\n   SKILL.md with the section each came from.\n7. Then ask me what the first diorama should be. Do not ask me to\n   fill the design sheet. When I give you a subject, research it\n   first (frames, assets, motion), fill DESIGN.md from the\n   defaults, copy the modules you need into my project instead of\n   editing the installed copy, build through the Pipeline, and run\n   the QA scripts before you show me anything. Give me the paths\n   of the frames you kept and what each one proves.\n\nIf two parts of SKILL.md contradict each other, list them before\nyou build. A successful clone is not an install: 5 and 6 are it.\n```\n\nNeeds `git`, or `curl` and `tar` for the fallback. The QA scripts need Node with\n`three`, `esbuild` and `playwright-core`. The `media\u002F` previews are about 20 MB\nand can be deleted after the clone.\n\n## What is in here\n\n| Path | What it is |\n| --- | --- |\n| `SKILL.md` | The whole playbook: research gate, look contract, detail and animation bars, pipeline, recipes, QA, pitfalls. Start here. |\n| `templates\u002F` | Copy-in modules: palette, post pass, camera, lighting, geometry, props, rig, poses, vehicle transfer, paths, combat, creature, water, effects, build script. |\n| `templates\u002FDESIGN.md` | The design sheet you fill before modelling. |\n| `templates\u002FSOURCES.md` | The research log you fill before modelling: query, what was found, decision. |\n| `templates\u002FCREDITS.md` | The licence ledger for every imported model, clip or texture. |\n| `templates\u002Fcreature.js` | Rigged-actor combat: stage-local aiming, bone-space effect anchors, upright billboards, hit severities, send-out geometry. |\n| `templates\u002Fqa\u002F` | Eight verification scripts that check a build against frozen frames and printed numbers, including a per-entity frame recorder. |\n| `verify\u002Fwater\u002F` | A worked scene that exercises the water modules, with the screenshots the QA loop produced. |\n| `verify\u002Fclimb\u002F` | A unit test for the vehicle transfer maths. |\n| `verify\u002Fcreature-battle\u002F` | What a two-actor fight build proved: aiming, effect anchoring, send-out and hit numbers. |\n| `media\u002F` | The preview GIFs and source captures shown above. |\n\n## Start a diorama\n\n1. Read `SKILL.md`: `Research Before You Model`, `One Prompt, One Build`, `The Look\n   Contract`, `The Detail Bar`, `The Animation Bar`, `Pipeline`.\n2. Research first. Step the real subject into frames and write its motion grammar\n   down. Walk the sourcing ladder for every hero asset (already on disk, CC0,\n   CC-BY, then hand-build) and record each search in `refs\u002FSOURCES.md`. Imported\n   assets get a row in `CREDITS.md`.\n3. Copy `templates\u002FDESIGN.md` into the project as `DESIGN.md` and fill it. Premise\n   as a verb, cast, systems, five beats with timestamps, detail budget.\n4. Copy the modules you need into `src\u002Fcore\u002F` and `src\u002Fscene\u002F`, then a `config.js`\n   that holds the scene's numbers. `verify\u002Fwater\u002Fsrc\u002F` is the reference layout.\n5. Block out in grey at the locked camera before any production pass, then run the\n   pipeline: palette, materials, detail, animation, effects, post.\n6. Verify with `templates\u002Fqa\u002F` before calling it done, and check the research gate\n   in `Build And Ship` (reference sheets, `SOURCES.md`, `CREDITS.md`, per-beat\n   captures).\n\n## Research before you model\n\nThe playbook opens with four lookups, because a plausible silhouette that matches\nnothing is the most common way a commission fails:\n\n- **Shape.** Pull the real thing on video, step it into contact sheets at 8 to 12\n  fps, read them, and write the grammar down before touching geometry.\n- **Assets.** Check the user's disk, then the CC0 and CC-BY libraries (Quaternius,\n  KayKit, Poly Pizza, Kenney, Sketchfab with the downloadable plus CC0 filter,\n  Smithsonian, Poly Haven, ambientCG, Mixamo and the Quaternius animation\n  library). A rigged download beats four hundred lines of primitives at close\n  range. Licences that are NC, ND, ripped or unstated are a hard stop.\n- **Motion.** Search the verb, not the noun. Count frames at a known fps, convert\n  to seconds, and write wind-up \u002F contact \u002F follow-through \u002F recover before\n  animating.\n- **Proof.** Freeze every beat and compare the capture against the reference\n  frame for that beat.\n\n`templates\u002FSOURCES.md` and `templates\u002FCREDITS.md` are the two artifacts that make\nthat research visible in a project, and `Build And Ship` will not pass without\nthem.\n\n## How it works\n\n- **One camera solve.** The camera is fitted to the slab's bounding box once, at a\n  fixed three-quarter azimuth, with a `subjectScale` margin. No orbit controls.\n- **Two passes, one look.** The render is drawn into a small buffer, then gamma,\n  grade, a 64 entry palette snap, ordered dither, an ink contour and a nearest\n  neighbour upscale happen in that fixed order.\n- **Detail is a bar, not a mood.** Every hero prop carries a real silhouette,\n  chamfers, seams, hardware and a contact shadow; if it reads at a glance and\n  still holds at 1:1, it passes.\n- **Animation is five layers.** Idle, locomotion, secondary motion (clothes, hair,\n  tails, capes), glance and weight shifts, then the scripted acting on top.\n- **Everything is a function of `t`.** Actors, props, effects and camera are\n  evaluated from the beat sheet each frame, so `?t=12.4` is exactly the same\n  picture every time.\n\n## Verification\n\nThe `templates\u002Fqa\u002F` scripts drive Chromium through `playwright-core` against a\npage that exposes a debug handle:\n\n```js\nwindow.__diorama = {\n  THREE, scene, camera, renderer, post,\n  freeze(t) { \u002F* draw(t) synchronously *\u002F },\n  view(pos, tgt) { \u002F* optional debug camera *\u002F }\n};\nwindow.__dioramaReady = true;\n```\n\n| Script | What it checks |\n| --- | --- |\n| `shoot.mjs` | console errors, layout at each viewport, named frozen timestamps |\n| `audit.mjs` | flat glows, whole-group fades, early hides, teleports, margin leaks |\n| `portrait.mjs` | isolated figures through a debug camera |\n| `strip.mjs` | N-frame motion strips, fails on a frozen loop |\n| `frames.mjs` | per-entity frame series with a verdict each: FROZEN, TELEPORT, EMPTY, OFFSCREEN |\n| `sweep.mjs` | pairwise distances, jam and teleport verdicts |\n| `probe.py` | colour runs across an edge |\n| `tile.py` | tiles a motion strip into a contact sheet |\n\n`freeze(t)` has to draw synchronously. Without it a screenshot is a race, and a\nscreenshot that may show a different frame than you asked for is not evidence.\n\n`frames.mjs` is the one that pays for itself on a scene with more than two actors.\nIt records one dense series per entity, isolates it, fits a camera to its swept\nbounds, and scores it: a flat energy line means the actor is not animating, an NDC\njump means a state boundary is snapping instead of blending, and empty frames mean\nthe window is wrong. Each entity gets a contact sheet and a verdict, so a dead\nactor cannot hide behind a moving neighbour.\n\nThe worked examples under `verify\u002F` show the loop end to end, including the\ndefects the harness found and the numbers after the fix.\n\n## Using it as a skill\n\n`SKILL.md` carries skill frontmatter (`name`, `description`, `version`), so a\nskill-capable coding agent can load it as-is. It is self-contained: no external\nreference documents, everything needed to build a diorama is in the file plus\n`templates\u002F`.\n\nIf you just want to read it, start at `Research Before You Model`, then\n`One Prompt, One Build` and `The Look Contract`.\n\nLong builds will eventually compact the agent's context, and compaction is lossy.\n`SKILL.md` has a `Long builds and context` section for that: state lives in\n`DESIGN.md`, `SOURCES.md`, `CREDITS.md`, `report.json` and the beat table rather\nthan in the chat, and after a compact the agent re-runs `frames.mjs` and\n`shoot.mjs` instead of trusting its own summary of the last frame.\n\n## Licence\n\nMIT. See `LICENSE`. three.js is MIT as well.\n",2,"2026-10-31 04:26:25","CREATED_QUERY"]