97KB Single-File HTML Underwater World: A WebGPU Experiment in AI Programming

A developer shared a project called Abyssal Garden on Reddit: in a single 97 KB HTML file, code generates a swimmable, explorable underwater world featuring kelp forests, a shipwreck, a whale-tail sculpture, manta rays and schools of fish, and light rays streaming down from the surface. The entire project uses no images, 3D models, audio files, or third-party libraries—everything is generated in real time by code at load time.

A Complete World Driven by a Single Prompt

The starting point of this project is remarkably pure: a single prompt typed into Claude Code. The prompt has been published as prompt.txt in the code repository, specifying the scene setup, technical constraints (WebGPU, no engine, fully procedural generation), and frame-time targets for the author's PC. More importantly, the prompt includes built-in self-checking mechanisms: a sub-agent looks only at the rendered output and reports visual defects, while GPU timing measures performance over a 60-second flythrough.

All code was written by Claude, including WGSL shaders, the seabed sculpted on the GPU, roughly two million kelp blades and plants, and Web Audio sound effects. Subsequent prompts gradually added a start menu, rock collision, and low/medium/high detail levels. This "prompt-as-spec" workflow lets AI autonomously complete complex implementations within clearly defined boundaries.

How the "sub-agent self-check" and GPU timing work

The sub-agent mentioned in the prompt is a mechanism that lets the AI coding assistant verify its own work: after the main agent finishes the code, a separate agent receives only rendered screenshots or scene descriptions—not implementation details—and specifically hunts for visual defects (clipping, abnormal lighting, floating objects). This "implementer/checker separation" reduces the main agent's blind spots about its own code. GPU timing uses the browser's query interface to measure per-frame GPU time, sampled over a 60-second automatic flythrough, using real performance data to judge whether the prompt's frame-time targets are met. Together, these effectively bake "acceptance criteria" into the prompt, letting the AI complete multiple iterations without human intervention rather than relying on manual eyeballing after a one-shot output.

Technical Choices Behind Fully Procedural Generation

The project chose WebGPU over WebGL, meaning it targets the graphics capabilities of modern browsers. The developer recommends Chrome for the best experience, but the project itself is open source (MIT license) and free to try. The core advantage of procedural generation is size: with no textures, models, or audio assets, the final product is a single HTML file kept at 97 KB. The seabed is sculpted on the GPU, and the number of kelp blades reaches roughly two million—converting these to traditional assets would inflate the file size by orders of magnitude.

Sound effects are likewise procedurally synthesized via the Web Audio API, consistent with the generation logic of the visual content. This full-stack procedural approach makes "one file is the whole world" possible.

Key differences between WebGPU and WebGL

WebGPU is the new generation of browser graphics APIs, closer to the capabilities of modern GPU hardware than WebGL, supporting compute shaders, finer-grained resource binding, and explicit memory management. WebGL is based on the older OpenGL ES specification and lacks general-purpose compute, so large-scale parallel operations like seabed sculpting and kelp blade animation typically had to be done via "workarounds" in vertex/fragment shaders. WebGPU lets developers write WGSL shaders directly and offload seabed generation and the motion of roughly two million kelp blades to the GPU's general compute pipeline, achieving complex real-time effects within a single file. The cost is relatively new browser support: Chrome is the most complete, while Safari and Firefox are still catching up—which is why the author recommends Chrome.

Why procedural generation can stay at 97 KB

The size of a traditional 3D scene comes mainly from three parts: textures, geometry, and audio files. A single high-resolution texture can be several MB, and a detailed model can range from hundreds of KB to several MB. Procedural generation replaces these assets with "generation rules"—the seabed is sculpted in real time on the GPU by noise functions, kelp blade positions, bending, and swaying are computed by mathematical formulas and shaders, and sound effects are synthesized with oscillators and filters via the Web Audio API. The rules themselves are only tens of lines of code, so the final product fits in a single HTML file. The cost is that everything must be computed in real time on each load, which places demands on GPU and CPU, and the richness of the output is limited by algorithm design, making it hard to directly reuse art assets.

Mobile Usability and Performance Trade-offs

The project also runs on phones. The author candidly notes that weaker phones will have lower frame rates, but the page loads and remains playable at the low quality setting. This is thanks to the three detail levels, letting different hardware find an acceptable balance. For WebGPU applications, mobile compatibility remains a challenge, but this project demonstrates that a single-file, dependency-free 3D experience is basically feasible in mobile browsers.

Implications for AI-Assisted Development

This case shows the actual capability boundaries of current AI coding tools in complex graphics projects. Claude not only generated shader and geometry code but also self-checked against the performance targets in the prompt, iterating via the sub-agent's visual feedback and GPU timing. Embedding verification mechanisms in the prompt goes a step beyond simply describing requirements—it effectively equips the AI with "acceptance criteria."

For developers, Abyssal Garden offers a reusable pattern: define the scene, constraints, and metrics in natural language, let AI handle implementation details, while retaining room for human review and follow-up prompt refinement. The project is open source on GitHub, and the MIT license allows others to learn from it, modify it, or even use it in commercial projects—potentially spawning more single-file, procedurally generated web experiences.

(Note: Fable 5.2 appears only in the title of the original material with no further explanation, so this article does not elaborate on it.)