Yonkers Rises: A Hands-On Test of a Three.js Mecha Animation

AI coding tools' most-discussed capability over the past year is no longer just generating a function or completing code—it's whether they can turn a vague idea directly into a complete, runnable, watchable work. Developer Simon Willison's recent small experiment offers a rather vivid example: he had Claude Fable 5.2 turn the New York city of Yonkers into a giant mecha, striding and stomping between Manhattan, Queens, and Brooklyn.

The Starting Point: A Need to Remember a Geographic Location

At the start of the article, Willison admits he originally didn't know where Yonkers was, so he looked it up on Google Maps. To truly "burn" the city's location and outline into his memory, he decided to use a more visually striking approach—turning Yonkers into a giant mecha rising up from the map.

This was also a testing opportunity. He happened to want to try out Claude Fable 5.2's capabilities in 3D modeling and animation, so he issued a prompt using the Fable 5.2 Medium model, requesting a Three.js animation: Yonkers rises up in a cool pose to become a large mecha, then stomps around Manhattan, Queens, and Brooklyn, using OpenStreetMap map data.

The cleverness of this request lies in merging "learning a geographic fact" and "testing a model's capability" into a single task. The output isn't an abstract technical demo, but a complete scene with a concrete subject, spatial relationships, and action narrative.

Claude Fable 5.2 is described in the article as an AI coding model with 3D modeling and animation generation capabilities; Willison used its Medium tier. What distinguishes such models from traditional code completion tools is that they receive natural language goals rather than specific function signatures, and must infer the technical approach, choose libraries, organize data structures, and write complete runnable code on their own. Tier names like Medium typically correspond to trade-offs among speed, cost, and reasoning depth, with higher tiers better at handling long tasks requiring multi-step planning. For a request like this article's "describe a 3D scene with an action narrative in one sentence," the model must simultaneously complete solution design and code implementation—making it a suitable scenario for evaluating end-to-end task execution capability.

Typos in the Prompt and the Model's Error Correction

The most intriguing detail of this experiment is a typo in the prompt. Willison originally wrote "átomos around manhattan," which was clearly a mistouch from typing "stomps" on a mobile keyboard.

The model correctly inferred that "átomos" was a typo for "stomps" and completed the animation according to the meaning of "stomping." This detail seems small, but it reflects current models' practical ability to understand real user input: people making typing errors on phones is the norm, and if a coding model strictly executed every spelling error literally, its practical usability would be greatly reduced. Being able to correct input based on contextual intent is a sign of it moving from "code generator" to "task executor."

According to Willison's description, the final output was a playable Three.js animation video, in which Yonkers rises in mecha form and moves between New York's boroughs. The complete prompt and generation results were made public via Claude's share link, and the animation video was also attached to the original article as an mp4.

What the Combination of Three.js and OpenStreetMap Means

From a technical selection perspective, this task required the model to handle three layers of content simultaneously: acquisition and transformation of geographic data (OpenStreetMap), construction of 3D geometry (extruding the city outline into a mecha shape), and animation choreography (timing and camera work for rising, walking, and stomping).

Three.js is a common library for browser-side 3D rendering, while OpenStreetMap provides open geographic data. Combining the two means the model needs to understand how geographic coordinates map to three-dimensional space, and how to transform two-dimensional city boundaries into volumetric, articulated three-dimensional forms. This isn't simple code snippet assembly, but a cross-domain task decomposition.

It's worth emphasizing that the value of this kind of generation isn't in producing production-ready code that can go live directly, but in quickly validating whether an idea holds up. Willison's goal was always "to help himself remember Yonkers' location and shape"; the animation was merely the means. The model here plays the role of an executor that can immediately turn an idea into a visual result.

Three.js is an open-source JavaScript 3D library based on WebGL that encapsulates low-level graphics interfaces (shaders, buffers, matrix transformations) into high-level objects such as Scene, Camera, Mesh, and Material. Developers can use it to render three-dimensional geometry, lighting, and animation directly in the browser without touching the raw WebGL API. Three.js's core abstractions include geometry (vertex data determining shape), materials (determining surface appearance), and a rendering loop driven by requestAnimationFrame; animation is typically achieved by updating an object's position, rotation, or skeletal pose frame by frame.

OpenStreetMap (OSM) is an open map database collaboratively maintained by volunteers, providing vector data such as roads, building outlines, and administrative boundaries under the ODbL open license, freely downloadable and reusable. Its data is organized around three basic elements—nodes, ways, and relations—and developers can query specific geographic features by region and tag through the Overpass API. Compared with commercial map services, OSM's advantage lies in data being freely accessible and processable, suitable for visualization, path analysis, or—as in this article—converting city outlines into 3D models.

Some Observations on AI Coding Tools

This experiment was small in scale, yet it distills several typical uses of today's AI coding tools: describing a visually imaginative goal in natural language, letting the model choose the tech stack itself (Three.js + OpenStreetMap), tolerating noise in the input, and ultimately delivering a finished product that can be watched directly.

Willison tagged this experiment with three-js, llms, ai, generative-ai, and others, indicating he categorized it as a demonstration of generative AI capabilities rather than serious engineering practice. For developers wanting to evaluate a model's 3D and animation capabilities, this kind of "small task, big imagination" testing approach reveals more about how the model performs under real fuzzy requirements than running standard benchmarks.

One detail worth remembering is that the entire experiment started from just "I don't know where Yonkers is." When tools are handy enough, the boundary between learning a new fact and doing a technical validation becomes increasingly blurred.

One-line Summary

Simon Willison used Claude Fable 5.2 to generate a Three.js mecha animation of the city of Yonkers, serving as both a geographic memory aid and a model capability test.

Paragraph Summary

The article documents a small experiment by developer Simon Willison: he originally didn't know the location of the New York city of Yonkers, so to deepen his memory he had Claude Fable 5.2 generate a Three.js animation in which Yonkers rises in giant mecha form and stomps between Manhattan, Queens, and Brooklyn, using OpenStreetMap map data. The most notable detail of the experiment was the spelling error "átomos" in the prompt, which the model correctly inferred to mean "stomps" and executed accordingly. The author believes such tasks require the model to integrate geographic data, 3D geometry construction, and animation choreography—a cross-domain task decomposition; its value lies in quickly validating ideas rather than producing production-grade code, and it also demonstrates AI coding tools' practical ability under fuzzy requirements and noisy input.