Claude Generates a Three.js Hidden-Object Game from One Prompt: A Tree Appreciator Hands-On

The AI coding world has another interesting sample to chew on. Simon Willison ran an experiment using Claude's iPhone app: with a single prompt, he had Claude generate a Three.js mini-game called Tree Appreciator. The core gameplay is finding the differences between two algorithmically generated trees — similar to the classic spot-the-difference, but with noticeably more refined art and interaction.

One prompt, a 3-hour run

Simon's prompt was straightforward: build a Three.js game called Tree Appreciator that displays two algorithmically generated trees, with the core mechanic being to appreciate the differences between them — and to "think hard about how to make it fun and beautiful."

The result: Claude ran continuously for 3 hours and 7 minutes in the mobile chat mode, eventually delivering a spot-the-difference game complete with music, animation, and an achievement system. Simon himself admits that in a recent talk he mentioned telling Opus to "make sure it's fun" works surprisingly well. This experiment validates that once again.

Three.js is an open-source JavaScript 3D graphics library built on WebGL, released around 2010 by Ricardo Cabello (known online as mr.doob). It is currently one of the most mainstream solutions for browser-side 3D rendering. It wraps the complex low-level WebGL APIs — shaders, buffers, matrix math, and so on — into intuitive objects like Scene Graph, Camera, Material, and Light, so developers can build a 3D scene with lighting, shadows, and animation in just a few dozen lines of code. Three.js itself doesn't include a physics engine or game logic; it usually needs to be paired with model loaders (GLTFLoader), animation libraries, or third-party physics libraries. It's widely used for data visualization, product showcases, web games, and interactive art. Tree Appreciator uses Three.js to render two procedurally generated tree scenes on the same page, which places high demands on scene organization, lighting, and the animation loop.

What the game actually looks like

From the screenshot, Tree Appreciator has a dark-toned interface, with the tree species number and name labeled at the top, for example "No. 003 Acer autumnalis." In the middle are two 3D scenes stacked vertically, labeled Fig. i and Fig. ii, both rendering dark trunks, red-orange and pale peach foliage, falling leaves, golden grass, and distant hill silhouettes.

The differences between the two images are marked with blue circles: circle a is at the tree base, where Fig. i has small mushrooms and Fig. ii doesn't; circle b is in the right canopy, where Fig. i has a green leaf that turns red in Fig. ii. At the bottom there's a progress indicator "2 of 4," a reset button, a Hint button with a three-dot hint, and a score display. The overall feel is like a nature observation journal rather than an ordinary casual game.

Why this experiment is worth noting

A real sample of vibe coding

This case demonstrates the current capability boundaries of "vibe coding." Developers no longer write code line by line; instead, they describe the goal in natural language and hand off art style, interaction details, and gameplay rules all at once to the model. Frameworks like Three.js, which require handling 3D scenes, lighting, and animation, used to demand a fair amount of prompt engineering — but this time Claude completed the entire implementation from a single-round prompt.

Vibe coding is a term coined by Andrej Karpathy in early 2025, referring to developers no longer reviewing code line by line but instead describing intent in natural language, letting large models directly generate runnable programs, and judging results mainly by "vibe" and iterating with follow-up prompts. It differs from traditional AI-assisted programming (like Copilot completing a single line) in granularity: vibe coding often has the model produce an entire feature module or even a complete project at once. This lowers the barrier to entry but also brings issues around maintainability, security, and debugging difficulty — because the developer may not fully understand the internal logic of the generated code. Simon Willison is himself an active discussant of this concept, having repeatedly documented his experiments building small tools with LLMs without carefully reading the code. Tree Appreciator is yet another instance of this kind of practice.

"Fun" can be prompted

Simon mentions, somewhat embarrassingly, that directly telling the model to "make sure it's fun" works almost unnaturally well. The phrase looks vague, but in practice it pushes the model from a "complete the feature" mode into a "polish the experience" mode. The 3-hour generation time didn't buy a prototype — it bought a playable finished product with achievements and music.

Procedural generation refers to generating content at runtime using algorithms and random numbers, rather than relying on hand-modeled art. The trunks, branches, leaves, falling leaves, and grass details of the two trees in the article are likely generated by a fixed random seed plus parametric rules, which ensures the same tree remains largely consistent between Fig. i and Fig. ii, with differences deliberately planted in just a few spots. Procedural generation is common in Roguelike maps, vegetation, and textures; its advantages are small size and high variety, and its disadvantage is difficulty controlling the exact image. For spot-the-difference gameplay, procedural generation has a hidden advantage: the difference points can be recorded by the algorithm (e.g., locations a and b), automatically generating the blue circle markers and progress indicators without manual annotation.

The potential of mobile chat mode

One detail worth mentioning: this time it wasn't Claude Code, but the ordinary chat mode of the iPhone app. That is, without a toolchain specifically optimized for programming, the model could still complete a full Three.js project. For developers accustomed to casually building small things on their phones, that's a meaningful signal.

Claude Code is Anthropic's command-line/IDE-integrated coding agent, capable of directly reading and writing local files, running terminal commands, viewing errors, and self-correcting — it belongs to the category of "agentic coding" tools. By contrast, the ordinary chat mode in the iPhone app can only output text and cannot access the file system or execute code. So what's truly noteworthy about this experiment isn't the tool's capability, but that the model completed an entire Three.js project in a single long conversation without any external toolchain and without the ability to run or debug. This shows the model's knowledge of 3D library APIs, game loops, and visual details is quite solid — but it also means any runtime errors could not be automatically discovered and fixed. What Simon got was effectively a "blind-written" one-shot pass.

Takeaways for developers

Tree Appreciator is a small experiment in itself, but the trend it reflects is not small. The aesthetic requirements, gameplay goals, and emotional tone in the prompt are becoming part of the generated output. If you want the model to produce a fun game, describing the tech stack alone isn't enough — you have to write the word "fun" in there too.

Also, the 3-hour generation time shows that the cost of this kind of complex front-end project is still significant, and it's suited to being handed off to the model for a long run once requirements are clear, rather than interrupted repeatedly with follow-up questions. For developers wanting to reproduce similar results, they can reference Simon's prompt structure: tech stack plus gameplay description, plus an open-ended experience requirement.