Skip to content
AI Primer
release

Meng To opens Kage Three.js landing page repo with 922 KB build

Meng To released the Kage landing page repo and reusable Three.js skills after building the 3D scrolling site with Claude Code, Opus 5, and image tools. He cites a 922 KB build and mobile fixes.

6 min read
Meng To opens Kage Three.js landing page repo with 922 KB build
Meng To opens Kage Three.js landing page repo with 922 KB build

TL;DR

  • Kage is a released source drop, not just a demo; the Kage release links the live site, repo, and three reusable skills.
  • The size claim is the hook: the original Three.js demo put non-image code at 922 KB on disk and 290 KB gzipped, while the Kage release says the Kage page stays under 1 MB of Three.js and code, or 3 MB with HQ PNGs.
  • The workflow was reference-driven: MengTo's workflow reply says he gave the agent a URL reference, recreated it in Three.js, then refined it over many prompts.
  • The mobile pass happened after launch; MengTo's mobile fix reply says mobile was fixed, and MengTo's iPhone reply says it ran smoothly on iPhone.
  • The license has a caveat: the release post calls it open-sourced, but the Kage README says no reuse or redistribution license is granted for the original Kage code or artwork.

The Kage README makes the neat part plain: one index.html holds the document, CSS, procedural scene construction, scroll choreography, and interaction logic. The build prompt reads like an art-direction checklist, down to a 390 × 844 mobile test. The scroll-world skill turns the trick into three modes: video scrub, Three.js world, and HTML/data/type.

922 KB scroll world

MengTo framed the first demo as an asset-budget swap: replace a scrolling video page with real-time Three.js. The comparison in the post was specific, 922 KB on disk and 290 KB gzipped outside images, versus 20 to 100 MB for a 1080p scrolling video page, depending on length.

His tool stack was Claude Code on desktop with Opus 5 for coding, Higgsfield for images, and Canvas UI for the cloth effect. The same post says textures, lighting, and alpha masking still needed prompt iteration.

The creation loop was not one-shot prompting. MengTo's workflow reply says the agent got a URL reference, recreated it in Three.js, then went through many refinement prompts; another reply says he often shaves the result after the initial concept.

Image generation was cheap in his telling. When someone guessed a higher cost, MengTo's cost reply put image generation at $2 at most.

One HTML file

The release post shipped three things at once: the live Kage page, the repo, and the Skills link. The repo README describes Kage as a deliberately small static site with no package manager, build step, environment variable, analytics script, or runtime network dependency.

The build inventory is short:

  • index.html: document structure, CSS, procedural scene construction, scroll choreography, interaction logic.
  • secret-pathways-assets/three.min.js: vendored Three.js r149.
  • Runtime world: temple, torii, lanterns, moon, terrain, rain, leaves, fog, and post-processing.
  • HTML layers: optimized WebP scene plates and foreground cutouts.
  • Local run command: python3 -m http.server 4173 --bind 127.0.0.1.

The live Kage page is a five-chapter night walk through a fictional Kyoto mountain temple, with chapters around hidden gates, still gardens, sacred craft, night rituals, and afterlight.

Agent skills

The release post named three extracted skills: build-threejs-scroll-worlds, falling-leaves, and pointer-trail-emitter. The public Skills repo currently exposes the broader scroll-world-storytelling playbook, plus separate falling-leaves and pointer-trail-emitter skills.

The reusable layer is a workflow contract, not a prompt snippet:

  • scroll-world-storytelling: choose one primary renderer before building, video scrub, Three.js world, or HTML/data/type.
  • falling-leaves: make leaves tumble edge-on, couple lateral slip to the tumble, vary parameters per leaf, and pause invisible work.
  • pointer-trail-emitter: emit motes by distance traveled, not by timer, so fast flicks stay continuous.

MengTo also told one commenter the approach works best with a model like Opus, which he called extremely good at Three.js in the Opus reply.

Build prompt

The Kage build prompt is a compact production spec for a single-page WebGL art book.

Its core requirements:

  • Fixed full-viewport Three.js canvas as the environmental layer.
  • Procedural temple, torii, stairs, lanterns, moon, terrain, trees, fog, rain, drifting leaves, embers, and atmosphere.
  • One continuous camera path driven by page scroll.
  • Restrained bloom, film grain, vignette, depth haze, shoji light, moonlight, and a vermilion moon.
  • Oversized English headings, vertical Japanese display type, chapter numbers, rules, and negative space.
  • Generated cinematic stills plus alpha-preserving WebP cutouts for foreground layers.
  • Reduced-motion behavior that preserves the complete reading experience.
  • Relative local assets so GitHub Pages subpaths work.
  • No frameworks, build tooling, analytics, trackers, remote fonts, placeholder imagery, generic glassmorphism, or decorative motion without narrative purpose.
  • Desktop and 390 × 844 verification, including asset 404s, inline script parsing, console inspection, and a full scroll/navigation pass.

That last checklist is the quiet gold for creator-engineers. It captures the boring QA that makes a scroll world feel finished.

Mobile and distribution

The public QA loop happened in replies. MengTo's mobile fix reply says the site was fixed for mobile, and MengTo's iPhone reply says it was tested on iPhone and felt smooth.

The distribution path is split between free source, templates, and education. MengTo's template reply says this one is free while paid templates are also underway, and MengTo's Design+Code reply says the material is coming to Design+Code.

Tutorial demand was already showing up. In one Kage reply, MengTo asked whether a commenter meant they needed a tutorial, and another reply says a long-form course is coming soon.

Sketchbook sibling

Kage sits beside earlier single-file interaction studies. In MengTo's sketchbook demo, the same Claude Code desktop workflow produced a page-flipping Singapore sketchbook with drag-to-paginate, shadow fixes, clipping fixes, alpha masks, page logic, and a magnifying glass that moves out of the way during a page flip.

That project used GPT Image 2 for the Singapore sketches. He later posted source links to requesters in one sketchbook source reply and another sketchbook source reply.

License caveat

MengTo used “open-sourced” in the release post, but the Kage README currently says no license is granted for reuse or redistribution of the original Kage code or artwork. The third-party Three.js runtime remains under its included MIT license notice.

The repo is readable source with a build prompt and local assets. The explicit reuse grant has not landed.

Further reading

Discussion across the web

Where this story is being discussed, in original context.

On X· 4 threads
TL;DR1 post
922 KB scroll world2 posts
Mobile and distribution5 posts
Sketchbook sibling2 posts
Share on X