Kage Operational

Kage is an immersive 3D interactive experience project open-sourced by designer Meng To. Built in a single HTML file, the tool uses Three.js to render scene assets generated by GPT Image 2 in real time, creating a fictional nighttime walk through a Kyoto mountain temple. Users control the camera path solely by scrolling the mouse, passing through five chapters including the mountain gate and tranquil garden, and experiencing a cinematic atmosphere where rain, mist, falling leaves, and a vermilion full moon intertwine. Kage runs directly when opened, serving as a frontend design example that combines AI-generated content with real-time WebGL.

Follow the WeChat account and reply “开源” to join the AI open-source project group
Scroll to navigate: Use the mouse wheel to guide the camera along a preset path through the mountain temple, with no buttons or menus. Scrolling is the only interaction method.
Real-time 3D rendering: Dynamically builds scenes featuring temples, mountain gates, rain, mist, falling leaves, and a vermilion full moon in the browser with Three.js.
AI asset integration: Layers GPT Image 2-generated scene panels and transparent WebP foreground elements into the real-time 3D world to enhance the cinematic feel.
Five-chapter narrative: Organized into five chapters, “Mountain Gate → Tranquil Garden → Craftsmanship → Afterglow → Manifesto,” with each scroll segment corresponding to a new compositional shot.
Single-file, zero-build setup: All logic, styles, and rendering are contained in one HTML file, with no npm, React, or build tools required.
Immersive visual atmosphere: Uses a restrained palette of near-black, midnight blue, warm amber, bone white, and vermilion, complemented by bloom, film grain, and vignette post-processing.
Accessibility support: Includes a reduced-motion option and supports responsive mobile layouts.

Online experience: Visit https://mengto.github.io/kage/ directly in a browser to enter the Kyoto mountain temple night tour.
Local deployment: Clone the repository and run any static server, such as python3 -m http.server. No build step is required.
Interaction: After opening the page, simply scroll the mouse and the camera will automatically travel through five chapters along the preset path.
Browser requirements: Use a modern browser that supports WebGL; otherwise, the scene cannot render.
Remixing: To recreate the experience, use PROMPT.md to generate new assets with AI. Do not directly reuse the original project's artwork.
Accessibility settings: When the system preference for “Reduce Motion” is enabled, the page automatically reduces animation intensity to help prevent dizziness.

Single-file architecture: All logic, styles, and 3D rendering are condensed into one HTML file, with zero build steps, zero dependencies, and instant usability.
Minimal interaction: Control the camera path solely through scrolling, with no buttons or menus and no learning curve.
AI-integrated rendering: Scene assets generated by GPT Image 2 are seamlessly layered with Three.js real-time 3D rendering, combining the texture of live-action footage with dynamic lighting and shadows.
Cinematic immersion: Five-chapter narrative structure, a restrained color palette, and post-processing effects create the cinematic feel of an interactive nighttime tour of a Kyoto mountain temple.
Designer-driven: The non-programmer creator led the work through prompts, demonstrating a new design-first frontend development paradigm for the AI era.
Lightweight and portable: With no backend, analytics scripts, or runtime network requests, it can be deployed in seconds on any static server.

Project website: https://mengto.github.io/kage/
GitHub repository: https://github.com/MengTo/kage

Personal portfolio/creative homepage: Designers or developers can replace traditional portfolios with a single-file immersive 3D experience, using scroll-based storytelling to present projects and create a much stronger visual impression than conventional websites.
Digital guides for cultural tourism: Adapt Kage's “night tour of a mountain temple” model to real attractions, letting visitors scroll through historic architecture and natural landscapes instead of reading static text and viewing images.
Brand launches/product teaser pages: Create an atmospheric, cinematic single-page experience before a new product launch. Automobiles, watches, and luxury goods can use chapter-based scrolling to reveal product details and brand stories.
Digital exhibitions for museums/history education: Recreate historical scenes, such as ancient cities and archaeological sites, allowing students or visitors to “walk into” history through scrolling while using AI-generated assets to reduce art production costs.
Frontend education and Three.js introductory case study: As an example of a single-file, zero-build project, Kage is well suited for source-code walkthroughs. Students can understand the core logic of 3D scenes, camera paths, and scroll-driven interactions without configuring an npm environment.