MengTo/kage: a five-chapter Kyoto temple walk built as a single Three.js HTML file

What Kage is, and the narrow problem it solves

Kage is an interactive five-chapter night walk through a Kyoto mountain temple, rendered live in Three.js and layered with cinematic generated imagery. The problem it addresses is not rendering performance or asset pipelines. It is the gap between a 3D scene and an editorial page: most WebGL demos live inside a canvas that scrolls independently of the text around it, and most scroll-driven sites fake depth with parallax images. Kage keeps the camera path and the lighting live while typography, scene plates and foreground cutouts sit in normal HTML layers above the canvas. The README describes section-specific fade and blur transitions binding the two together.

The audience is narrow. This is for creative coders, designers studying motion language, and engineers who want to read one long HTML document end to end and see how a scene, a scroll choreography and a responsive layout were assembled without a framework. It is not a library, and the README does not present it as one.

How the scroll drives a live camera through the temple

The repository layout is the architecture. index.html contains the document structure, CSS, procedural scene construction, scroll choreography and interaction logic. secret-pathways-assets/ holds the vendored three.min.js, a fonts.css, a generated/ directory of scene plates and a foreground/png/ directory of alpha-preserving cutouts. There is no bundler, no module graph and no import map in the listed structure.

The temple, torii, lanterns, moon, terrain, rain, leaves, fog and post-processing are constructed at runtime rather than loaded as models. Scroll position is the input that moves the camera; the README states that the camera moves through the mountain temple as the page scrolls. Above that canvas, the generated WebP scene plates and foreground cutouts are ordinary HTML elements with their own fade and blur transitions per section. That split is the interesting design decision: geometry and light stay procedural and reactive, while the heaviest visual detail arrives as flat images that the browser composites cheaply. The README also lists chapter navigation, a responsive mobile layout, reduced-motion behavior and a custom cursor for precise pointer devices.

Running Kage locally with python3 -m http.server

There is no build step, so running it means serving the repository root as static files. The README gives exactly one command, and it binds to loopback on port 4173:

python3 -m http.server 4173 --bind 127.0.0.1

After that, open http://127.0.0.1:4173/ in a browser. You should see the first chapter of the walk; scrolling moves the camera through the temple. The README notes that Python is used only to serve the static files locally and that any equivalent static server will work, so substituting another static server is fine as long as it serves the root rather than a subdirectory.

The README states there is no environment variable, analytics script or runtime network dependency, which means the page does not need a network connection once the files are on disk. That also means there is nothing to configure: no API key, no .env file, no dev server flags. If you want to change the experience, you edit index.html directly, and the PROMPT.md file at the repository root is the portable implementation brief describing the scene structure, layout system, motion language and quality constraints for rebuilding or reinterpreting it.

Where Kage stops being the right tool

The single-file approach has a cost that the README does not discuss. Everything lives in one HTML document, so there is no module boundary to isolate the camera logic from the layout logic, and no test surface. If you want to change the camera path, you are editing the same file that holds the CSS and the interaction handlers. For a study that is fine. For anything with more than one contributor, it becomes a merge problem.

Performance is the second boundary. The README describes a restrained bloom pipeline, rain, drifting leaves, fog and a vermilion moon all running at once, with generated WebP plates and foreground cutouts composited over the canvas. That is a lot of overdraw for a mobile GPU, and the README does not publish frame-rate targets or device support beyond mentioning a responsive mobile layout and reduced-motion behavior. Treat the reduced-motion path as the accessibility answer it is, not as a performance fallback.

Finally, there is no package to install. Kage is not published to npm, and the vendored Three.js build is pinned to r149 inside secret-pathways-assets/. If you need a maintained Three.js version, a bundler, or tree-shaking, this project is the wrong starting point. It is a finished artifact, not a scaffold.

The licensing boundary, and why it is not a template

The README is unusually direct here: no license is currently granted for reuse or redistribution of the original Kage code or artwork. The third-party Three.js runtime remains covered by its included MIT license notice. Those two facts point in opposite directions and you have to hold both. The rendering engine underneath is MIT and freely reusable. The scene construction, the scroll choreography, the generated scene plates and the foreground artwork are not licensed for reuse.

This matters because the README itself points to a reusable path. It lists Agent Skills as the skill library these pages are built with, including a falling-leaves technique and a pointer-trail emitter extracted from Kage. So the maintainer has separated technique from artifact somewhere else. If your goal is to learn the falling-leaves or pointer-trail approach and apply it in your own project, the README directs you to that library rather than to Kage's index.html. If your goal is to copy the temple, the licence does not permit it.

There is also an attribution note worth reading before you describe the project: Kage is an original, independent design study inspired by Japanese temple architecture and night gardens, and the README states it is not affiliated with a specific temple, cultural institution or tourism organization. The scene plates and foreground artwork were generated with GPT Image 2 and then art-directed and composed with the live Three.js scene.

Rebuilding from PROMPT.md instead of reading index.html

PROMPT.md is the alternative to reading the source, and it is the more portable artifact. The README describes it as a portable implementation brief covering the scene structure, layout system, motion language and quality constraints needed to rebuild or reinterpret the experience. That framing tells you what the maintainer expects: the HTML is the finished run, and the prompt is the specification you can hand to a different stack.

The trade-off is fidelity. A brief describes intent, and the shipped page is the result of art direction applied after generation. Reading index.html gives you the exact numbers, the exact easing and the exact layer order, but you are reading unlicensed code. Reading PROMPT.md gives you a lawful starting point that will not reproduce the page exactly. Which one you pick depends on whether you want to study the artifact or produce your own version of it.

MengTo/kage is a sibling of other single-file experiments by the same author, including Complete Shelf, a Three.js library of seven interactive clothbound hardcovers, and Sketchbook, a page-flipping sketchbook of Singapore with a draggable magnifier. The README frames all of them the same way: no build step, no framework, everything in one HTML document. That consistency is the clearest signal about what this project is for.

Editorial conclusion

Adopt Kage as a reading exercise or as a source of technique, not as a dependency: the README states that no license is granted for reuse or redistribution of the original code or artwork, while the vendored Three.js r149 build keeps its MIT notice. If you want to ship something similar, verify first that index.html carries every scene, motion and interaction rule you need, because there is no module boundary to copy from, and read PROMPT.md before deciding whether to rebuild from the brief or lift code you are not licensed to lift.

Frequently asked questions

Official sources

1. Issues
2. MengTo/kage on GitHub
3. Project website
4. README