Frontend

1.42MB, Zero Assets: Everything in Claude Fable 5.2's Browser FPS Is Pure Math

By ENCI · Nov 11, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Procedural generation offers frontend teams a practical route to visually rich work at near-zero asset weight, with the caveat that the technique only pays off when the visual is the product's core selling point. The Saltline demo also makes a strong case for constraint-driven prompting, and an equally strong warning that single-pass demo output is not production code.

Summary

Claude Fable 5.2, an Anthropic model, generated Saltline, a browser FPS, in a single ~1.42MB index.html. The file holds no images, no 3D models, and no audio; ray-traced water, reflections, fire glow, and sound effects all come from functions running in WebGL2 shaders and Web Audio synthesis. Generation ran with external libraries banned, forcing pure HTML, CSS, JavaScript, and WebGL2. Anthropic engineer Felix Rieseberg shared the output.

Procedural generation is the core technique: noise functions replace texture maps (hundreds of bytes versus tens of megabytes), geometry-generating code replaces model files, and oscillator-plus-filter chains replace audio files. Constraints themselves acted as the prompt. Banning Three.js pushed the model to derive raymarching, Fresnel reflection, and fluid deformation from first principles.

A one-shot demo still isn't production code. Module boundaries, accessibility, cross-browser compatibility, and a GPU performance budget never entered the picture. The demo proves the technique can deliver striking visuals at near-zero asset cost; it doesn't tell you whether that approach fits any given product.

Takeaways

— Claude Fable 5.2 is an Anthropic model, not a frontend framework; it generated the browser FPS Saltline as a single ~1.42MB index.html.

— Saltline contains zero images, zero 3D models, and zero audio files; every visual and sound is computed from code at runtime.

— External libraries were banned for the generation run, including Three.js; the model implemented ray tracing, fluid deformation, reflection, and physics in pure HTML, CSS, JavaScript, and WebGL2, with roughly 31KB of CSS.

— Procedural generation replaces stored assets with generation rules: a noise function occupies a few hundred bytes where a 4K texture takes tens of megabytes.

— Four effects in the demo: raymarching for light, multi-layer noise plus sine waves plus the Fresnel effect for water, reflection vectors plus screen space reflection for reflections, and noise-driven color mapping plus bloom for fire.

— The Web Audio API synthesizes sound with oscillators, noise sources, filters, and envelopes; a gunshot is a noise burst with a fast-decay envelope, a footstep is a low-frequency oscillator with a short envelope.

— A standalone Canvas 2D demo draws sky, water, reflections, and flickering fire from roughly 50 lines of JavaScript with no image assets.

— AI lowers the implementation barrier but not the judgment barrier; aesthetic decisions, constraint design, and acceptance criteria still fall to humans.

Conclusions

The constraint-driven setup did the heavy lifting: with Three.js banned, the model derived raymarching, Fresnel reflection, and water deformation from first principles, producing a different class of output than library assembly. That turns "disable your tools" into a repeatable prompting technique.

The size comparison sells the story: a few hundred bytes of noise function against tens of MB of texture. But the economics only hold when the visual itself is the product; an admin dashboard gains nothing from procedural fire.

Single-shot demos carry no engineering signal. No module boundaries, no performance budget, no cross-browser pass, no accessibility pass; the demo proves feasibility and stops there.

Concepts & terms

Procedural generation

Building textures, geometry, and audio from mathematical rules and noise functions instead of storing pre-made image, model, or sound files. Storing the "laws" of a world costs orders of magnitude less than storing snapshots of it.

Raymarching

A GPU technique that steps each camera ray forward at intervals until it hits a surface, computing lighting along the way. It is the common browser-shader way to fake ray tracing without a physics/rendering engine.

Fresnel effect

An optical phenomenon where a surface reflects more at shallow viewing angles. It is what makes water look transparent straight-on but mirror-like at a glance; shader code models it to sell the water illusion.

Screen space reflection (SSR)

A reflection shortcut that samples already-rendered screen pixels to approximate what a reflected ray would see, avoiding a second full render pass.

Web Audio API

A browser API that synthesizes sound in real time using oscillators, noise generators, filters, and envelope shaping, instead of playing back recorded audio files.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗