61KB HTML Delivers Real-Time WebGPU Ocean: Generated from a Single Claude Code Prompt

A 61 KB HTML file can render a real-time ocean with a sunset effect right in the browser — complete with FFT wave simulation, whitecaps, a physical sky, and sun glints. This isn't a demo from some game engine; it's a WebGPU scene that developer Noniv built from scratch using Claude Code (Opus 5.5) in about 30 minutes.

Core Highlights: Single File, Zero Dependencies, Pure WebGPU

According to the original Reddit post, the most surprising thing about this project isn't the visuals themselves, but its size and how it was made. The entire scene is packed into a 61 KB HTML file with no engine and no third-party libraries — the renderer is written entirely by hand from scratch.

Noniv's prompt to Claude Code was just one sentence: build the most realistic water surface scene you can using WebGPU, with a camera that can freely float around. The model then autonomously built out the rendering pipeline, shaders, and wave physics.

Technically, the scene comprises at least four layers of systems: FFT-based wave spectrum simulation, whitecap breaking effects, a physical sky model with clouds, and specular sun glints on the ocean surface. Normally, these each require a graphics engineer to manually tune parameters one by one — here, they were all produced in a single prompt's output.

WebGPU is the W3C-led next-generation web graphics and compute API, considered the successor to WebGL. It maps directly to modern low-level graphics interfaces like Vulkan, Metal, and D3D12, exposing concepts such as explicit render pipelines, compute shaders, and bind groups to JavaScript. This allows it to squeeze far more performance out of the GPU and also supports general-purpose compute tasks. The trade-off is an API that's closer to the hardware and lower-level in abstraction — writing even a minimal triangle requires far more boilerplate than WebGL. Because of this, the graphics community has long considered it high-barrier and its ecosystem immature. The fact that this scene can hit hundreds of frames per second in a browser is precisely thanks to WebGPU's low overhead and compute shader capabilities.

FFT-based ocean wave simulation originates from Tessendorf's classic method: first generate the wave energy distribution in the frequency domain using a statistical model (such as the Phillips or JONSWAP spectrum), add time-evolving phases, then convert the spectrum into a spatial-domain height field via the fast Fourier transform. Compared to directly summing a large number of sine waves, FFT can generate waveforms rich in detail and statistically consistent with a real ocean surface at O(N log N) cost, and it naturally supports per-frame updates using compute shaders on the GPU. Whitecaps are typically generated based on wave steepness or height thresholds, physical skies mostly use analytical atmospheric scattering models like Preetham or Hosek-Wilkie, and sun glints come from the specular highlight term between the ocean surface normal and the view direction.

Self-Review: A Subagent Cross-Scoring Workflow

Even more noteworthy is Noniv's verification approach. Claude Code captures screenshots of the rendered output itself, then hands those screenshots to an independent subagent for critical evaluation — rather than letting the same instance that wrote the code grade its own work.

This separation of self-evaluation from external evaluation neatly sidesteps the "self-confirmation bias" common in AI programming — the tendency of a model to believe its own code is correct. Having another agent review based on screenshots effectively introduces a visual-level acceptance step.

According to the post, the whole process from prompt to final product took about 30 minutes. That time cost, placed in a traditional graphics development workflow, might not even be enough to manually tune a single version of wave parameters.

Subagent refers to a subordinate agent spawned by a main agent, with its own independent context window. Tools like Claude Code allow the main agent to delegate a task (such as the visual review here) to a subagent, which does not inherit the main agent's full reasoning process and instead independently reaches conclusions based only on the input it receives (here, a rendered screenshot). This isolation brings two benefits: first, it prevents the main agent from being biased by having "seen its own code"; second, the review task and the generation task use different contexts, effectively forming a process similar to separating "the person who writes the code" from "the person who accepts it." In rendering projects that lack unit tests, this kind of visual-artifact-based review is a pragmatic alternative.

Hardware Requirements and Runtime Conditions

WebGPU's adoption rate means this project isn't something everyone can run. The developer explicitly notes that experiencing it requires a GPU with WebGPU support, and recommends using Chrome.

On laptops, you also need to manually force Chrome to use the discrete GPU, otherwise you may encounter poor performance or even a complete failure to run. As a performance reference, Noniv achieved about 260 FPS at 2560×1440 resolution on an RTX 5070 Ti.

The interaction is relatively simple: click the canvas to look around, WASD to move, and press H to bring up the settings panel. The scene is free to experience online, and the repository also provides an uncompressed, more clearly structured version for reference.

Forcing Chrome to use the discrete GPU is a common troubleshooting step on laptops. Most dual-GPU laptops default to having the integrated GPU drive the browser to save power; while the integrated GPU may support WebGPU, its compute power is far from sufficient to drive heavy real-time scenes like an ocean. On Windows, you can set Chrome to high-performance mode via "Settings → System → Display → Graphics," or select the discrete GPU for chrome.exe in the NVIDIA Control Panel under "Manage 3D settings"; on macOS, no intervention is usually needed, as the system automatically switches based on load. If it still won't run, you can check WebGPU's actual enablement status on the chrome://gpu page.

A Profile of AI's Programming Capabilities

The value of this case lies in how it makes the question "can AI write graphics code?" concrete. Graphics rendering has always been a field extremely sensitive to mathematics, hardware characteristics, and engineering details, and WebGPU is an even younger API whose documentation and ecosystem are far from mature.

Producing a complete, runnable scene at high frame rates from a single prompt shows that the model has some depth in cross-domain knowledge integration. That said, it's important to note that results like this depend heavily on the developer's judgment in acceptance — Noniv's design of a screenshot review process is itself an expression of not fully trusting the model's output.

For readers wanting to reproduce this, the real barrier may not be prompt engineering tricks, but rather whether you can identify problems in the rendered result and build a closed loop that lets the model self-verify.

Project repository: github.com/Noniv/web-ocean; Live demo: ocean-noniv.vercel.app