Repolode
Submit
JDhruv14

JDhruv14/ascii-diorama

A Claude Code skill that guides an AI agent in building tilt-shift miniature 3D scenes rendered as coloured ASCII glyphs with Three.js.

View on GitHub
Stars
92
Forks
3
Open issues
0
Last commit
5 days ago

What is it?

ascii-diorama is a Claude Code skill for building tilt-shift ASCII miniatures: small 3D scenes drawn entirely as coloured monospace characters. The camera looks steeply down on a Three.js diorama and sweeps back and forth while the top and bottom of the view blur, giving a scale-model look. Grass, water, stone and trees are each drawn with their own glyph set, and each glyph takes its colour from the 3D render.

The repository includes the skill instructions, a live preview server that rebuilds on reload, an asset fetch script, and a starter scene with terrain, a sea shader, instanced grass and flowers, props, a walking fox and drifting petals. The starter covers the main systems a new scene needs, and the scene content can be swapped for other settings such as a harbour or a hill village.

It runs live in the browser with WebGL 2 and Node.js 18+, and the output can be exported as a static page.

Key features

  • 01Renders 3D scenes as coloured ASCII glyphs chosen per surface type.
  • 02Provides a live preview server that rebuilds the scene on reload.
  • 03Includes a starter scene with terrain, water shader, grass, flowers and props.
  • 04Applies a tilt-shift blur to the top and bottom of the view.
  • 05Downloads its textures and models with a provided script.

Use cases

  • Creating an animated ASCII-style 3D miniature with Claude Code.
  • Prototyping a custom diorama such as a harbour, village or lighthouse.
  • Exporting a looping ASCII art scene as a static web page.

Quick start

  1. 1

    Clone the skill into your Claude Code skills folder

    git clone https://github.com/JDhruv14/ascii-diorama ~/.claude/skills/ascii-diorama
  2. 2

    Install the Three.js and esbuild dependencies in the scene folder

    npm i three esbuild
  3. 3

    Copy the starter scene into a new folder and fetch its assets

    mkdir -p my-scene && cp ~/.claude/skills/ascii-diorama/templates/scene/* my-scene/ && bash ~/.claude/skills/ascii-diorama/scripts/fetch-assets.sh my-scene
  4. 4

    Start the live preview and open http://127.0.0.1:5173/

    node ~/.claude/skills/ascii-diorama/scripts/serve.mjs my-scene

Things to know

  • Requires a browser with WebGL 2 and Node.js 18 or newer.
  • Asset downloads include CC BY 4.0 items that require attribution when the fox is shown.

In collections

Claude Code tools, skills & plugins

Topics

#claude-code#threejs#ascii-art#webgl#generative-art#skill

FAQ

What is ascii-diorama?
A Claude Code skill that guides an AI agent in building tilt-shift miniature 3D scenes rendered as coloured ASCII glyphs with Three.js. ascii-diorama is a Claude Code skill for building tilt-shift ASCII miniatures: small 3D scenes drawn entirely as coloured monospace characters. The camera looks steeply down on a Three.js diorama and sweeps back and forth while the top and bottom of the view blur, giving a scale-model look. Grass, water, stone and trees are each drawn with their own glyph set, and each glyph takes its colour from the 3D render.
Is ascii-diorama free to use? What license does it have?
ascii-diorama is open source under the MIT license. Check the license terms before using it in commercial products.
Is ascii-diorama still maintained?
Actively maintained. The last commit to ascii-diorama was on Nov 2, 2026.
What can I use ascii-diorama for?
Creating an animated ASCII-style 3D miniature with Claude Code. Prototyping a custom diorama such as a harbour, village or lighthouse. Exporting a looping ASCII art scene as a static web page.
How do I install ascii-diorama?
Clone the skill into your Claude Code skills folder: git clone https://github.com/JDhruv14/ascii-diorama ~/.claude/skills/ascii-diorama Install the Three.js and esbuild dependencies in the scene folder: npm i three esbuild Copy the starter scene into a new folder and fetch its assets: mkdir -p my-scene && cp ~/.claude/skills/ascii-diorama/templates/scene/* my-scene/ && bash ~/.claude/skills/ascii-diorama/scripts/fetch-assets.sh my-scene Start the live preview and open http://127.0.0.1:5173/: node ~/.claude/skills/ascii-diorama/scripts/serve.mjs my-scene
Where can I get ascii-diorama?
The source code and installation instructions are on GitHub: https://github.com/JDhruv14/ascii-diorama

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects