← All prompts
ReferencedWebsitesHard

Kage — a Three.js night walk through a Kyoto mountain temple

Reported by the author — we did not run this. What that means

Output

Opus 5 on Kage — a Three.js night walk through a Kyoto mountain temple
Opus 5

The prompt that built Kage

Prompt32 lines · EN
Create a single-page, cinematic WebGL experience called **Kage**: a five-chapter night walk through a fictional Kyoto mountain temple. The result should feel like an editorial art book moving through a live 3D world, not a conventional product landing page.

## Experience

- Use a fixed full-viewport Three.js canvas as the environmental layer.
- Build the temple, torii, stairs, lanterns, moon, terrain, trees, fog, rain, drifting leaves, embers, and atmosphere procedurally.
- Drive one continuous camera path from page scroll. Each section should feel like a new composed shot rather than a hard scene replacement.
- Add restrained bloom, film grain, vignette, depth haze, warm shoji light, cold moonlight, and a large vermilion moon.
- Keep the palette near-black, blue-charcoal, warm amber, bone white, and vermilion.

## Layout

- Structure the page as a hero, temple threshold, still gardens, sacred craft chapters, afterlight closing, and manifesto footer.
- Use oversized left-aligned English headings, large vertical Japanese display type, small technical labels, chapter numbers, fine rules, and generous negative space.
- Layer generated cinematic stills into editorial cards and use alpha-preserving WebP cutouts of grass, maple branches, sakura, stones, walls, ruins, bushes, hills, pines, and lanterns at the bottom of the active viewport.
- Foreground layers should arrive at full visual opacity, remain pinned while their section is active, then fade and blur away during the handoff.
- Center any play icon within the image frame itself, excluding the caption area.

## Motion

- Reveal headings word by word and supporting elements individually.
- Use slow, precise section transitions, subtle parallax, and eased camera interpolation.
- Let the navigation, chapter rail, cards, and foreground layers respond to the active section.
- Include reduced-motion behavior that preserves the complete reading experience.

## Interaction and quality

- Use a custom cursor only for fine pointer devices.
- Provide working anchor navigation, mobile navigation, responsive layouts, semantic landmarks, and accessible labels.
- Keep runtime assets local and use relative paths so the site works under a GitHub Pages repository subpath.
- Avoid frameworks, build tooling, analytics, trackers, remote fonts, placeholder imagery, generic glassmorphism, excessive glow, and decorative motion without narrative purpose.
- Verify at desktop and approximately 390 × 844, check all assets for 404s, parse every inline script, inspect the browser console, and test one complete scroll/navigation interaction before shipping.
sha256 a4760c45dbb98adaa9a2428548a45160e733fdd6b8120a721c66959680d804ab

Runs

ModelHarnessStatusCostDurationOutputTrustArtifact
Opus 5claude-opus-5claude-codeCompletednot measurednot measurednot measuredReportedopen

What this is, and what it proves

Create Kage: a single-page, cinematic WebGL night walk through a fictional Kyoto mountain temple, five chapters, one continuous scroll-driven camera path, procedural temple and rain, a vermilion moon. The build prompt is published in full in the open-sourced repo; the author built it with Claude Code (desktop) running Opus 5, under 1 MB of Three.js and code, 290 KB gzipped. No token or cost figures were stated.

The prompt behind "Kage — a Three.js night walk through a Kyoto mountain temple" is published in full, and was run by 1 model: Opus 5. 1 of 1 finished, on figures reported by the author.

Models
1
Completed
1 of 1
Cheapest completed run
not measured

Figures reported by Meng To. Not independently verified.

Reported, not measured

Announced on 8 August 2026: the Kage landing page and its three.js skills were open-sourced (repo github.com/MengTo/kage, skills github.com/MengTo/skills). The quoted post from 7 August states the stack: 'I used Claude Code (desktop) with Opus 5, Higgsfield for images, and http://canvasui.dev for the cloth effect on them.' The repo README credits the cinematic stills to GPT Image 2 instead of Higgsfield — both attributions are the author's own, and the discrepancy is left as published. The build prompt is published verbatim as PROMPT.md in the repo and reproduced here. The author reports the site weighs 922 KB on disk (290 KB gzipped), 'under 1mb of three.js and code', '3mb with the hq png images', and says it 'took a lot of tokens and prompts' — no exact token or cost figures, so nothing on this page is measured. The clip is the first eight seconds of the announcement video (34 s, 4:3).

threejswebglscrolllandingopen-source