跪拜 Guibai
← Back to the summary

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

Bottom line: First, let's correct a common misconception: Fable 5.2 is not some frontend framework; it's Anthropic's model, Claude Fable 5.2. Anthropic engineer Felix Rieseberg used it to generate a browser FPS called Saltline in one pass: a single index.html of about 1.42MB, with no images, no 3D models, and no audio/video files. Every texture and model is a "function"; all animation and sound effects are computed in real time from code. The key technical constraint: external libraries such as Three.js were disabled, which forced the model to implement ray tracing, fluid deformation, water reflections, fire flicker, and real-time physics from scratch, in pure HTML + CSS + JavaScript + WebGL2. What's actually impressive here? It isn't "AI can write frontend" — it's evidence of the power of "constraint-driven + procedural generation": formulas replace assets, and a few hundred bytes of functions can stand in for tens of megabytes of textures. But don't over-mythologize it either: a one-shot demo is not a production-grade product. AI lowers the implementation barrier, but not the bar for aesthetic judgment, constraint design, and acceptance criteria.

Table of Contents

1. One-Sentence Summary

Get an intuition first 🎭: this is like using a musical score instead of a recording — an MP3 takes several MB, but the score for the same melody might be just a few KB; when you want to hear it, the score plays back live. What Fable 5.2 does is write a "score" (functions) for the whole world, rather than stuffing it with "recordings" (images and models).

So here are the three layers to keep:

In one sentence: what it proves isn't "code can replace art" — it's that "constraints + math" can produce high-quality visuals at extremely low cost, and that's worth learning for every frontend engineer.

2. First, Clarify: What Fable 5.2 Is and Isn't

The most common confusion in online discussion:

Key parameters of the work (public information):

Parameter Value
File size About 1.42MB (single index.html)
External assets 0 (no images, no 3D models, no audio/video)
External libraries Disabled (no Three.js, etc.)
Tech stack HTML + CSS (about 31KB) + JavaScript + WebGL2
Textures/models All functions (procedurally generated)

💡 So the precise way to put it is: "Fable 5.2 (the model) generated a zero-asset visual work using the frontend trio" — not "Fable 5.2 is a frontend tool." Getting this straight is what lets you understand why the result is actually impressive.

References:

3. What's Inside the 1.4MB: Code Instead of Assets

"1.4MB is way too small" is most people's first reaction. A comparison shows how extreme this is:

Asset type Typical size Replacement
A 4K texture Dozens of MB A single noise function (a few hundred bytes)
A 3D model Several MB Geometry-generating code (a few KB)
Background music 3–5 MB Real-time Web Audio synthesis (a few KB)
Particle animation Video/sprite sequence, dozens of MB Math computed in real time (a few hundred bytes)

That's the core idea of procedural generation: replacing "generated results" with "generation rules."

An analogy 🎭: it's like a recipe versus a finished dish — a frozen meal (an image) takes up fridge space; a recipe (a function) is just one page, but you can cook a fresh meal from it anytime.

4. Why "No Assets" Can Still Render: Procedural Generation

So how do "functions" become "pictures"? Three things are core:

In one sentence: procedural = describing with math rather than storing.

💡 This is also why 1.4MB is possible — what it stores isn't "what the world looks like" but "the rules of the world," and rules are orders of magnitude smaller than snapshots. This is the same idea I covered in my column "Why Apple's Rounded Corners Look More Refined: Squircle and Continuous Curvature" — replace bitmaps with curve formulas, and smaller stays sharper.

5. Breaking Down the Four Visual Effects: Ray Tracing, Water, Reflections, Fire

Here's how each of the four effects works in pure code:

① Ray tracing (ray tracing / ray marching)

② Water surface

③ Reflections

④ Fire glow

Effect Core math/algorithm One-line principle
Ray tracing raymarching + ray-surface intersection Cast a ray per pixel to compute color
Water noise + sine waves + Fresnel Compute normals and perspective reflection
Reflections reflection vector + screen space reflection Sample the scene along the reflected direction
Fire noise + color mapping + bloom Noise flicker + bright areas bleeding

6. Sound Is Code Too: Web Audio Procedural Synthesis

Beyond visuals, the audio is also "computed," using the Web Audio API (the browser's audio API):

A gunshot ≈ a burst of noise with a fast-decay envelope; a footstep ≈ a low-frequency oscillator with a short envelope. No audio files needed.

An analogy 🎭: it's like a synthesizer versus a tape recorder — the recorder plays back recorded sound (audio files); the synthesizer builds sound live (code). Fable 5.2's work is a "synthesizer that performs the entire world."

7. What's Actually Impressive: Constraint-Driven Is the Key

The real technical takeaway isn't "AI can write code" — it's the power of constraint-driven development:

What this means for ordinary frontend engineers:

8. Where to Stay Calm: The Distance from Demo to Production

However impressive, look at it rationally — don't get carried away by the "1.4MB masterpiece" framing:

⚠️ One-sentence summary of the sober view: it proves "it can be done," not "this is how it should be done" — production still needs engineering discipline, and pretty ray tracing has to survive your users' actual devices.

9. Complete Runnable Code: Procedural Water and Fire in Pure Canvas

Below is a copy-paste-and-run HTML page that uses plain Canvas 2D (no images) to render "sky + water ripples + reflections + flickering fire" in real time — a minimal demonstration of the core idea behind the Fable 5.2 work (building visuals from functions). Save it as procedural-scene.html and open it in a browser.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Pure Code Procedural Scene: Water + Reflections + Fire</title>
<style>
  body { margin: 0; background: #000; }          /* black background to emphasize the scene */
  canvas { display: block; }                       /* canvas fills the window */
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
  const cv = document.getElementById('c');
  const ctx = cv.getContext('2d');
  cv.width = window.innerWidth;                    // canvas width = window width
  cv.height = window.innerHeight;                  // canvas height = window height
  const w = cv.width, h = cv.height;
  const horizon = h * 0.55;                        // horizon position (55% of height)
  let t = 0;                                       // time variable (drives the animation)

  // Simple noise: sine superposition (pure function, no textures)
  function noise(x, y) {
    return Math.sin(x * 0.01 + t) * Math.cos(y * 0.02 + t * 0.7) * 0.5;
  }

  function draw() {
    t += 0.02;
    // ① Sky: procedural gradient (color shifts slightly with time to simulate dusk)
    const sky = ctx.createLinearGradient(0, 0, 0, horizon);
    sky.addColorStop(0, '#1a1030');               // deep purple at the top
    sky.addColorStop(0.6, '#c85a3a');             // orange-red in the middle
    sky.addColorStop(1, '#f0a860');               // warm yellow at the horizon
    ctx.fillStyle = sky;
    ctx.fillRect(0, 0, w, horizon);

    // ② Water + reflections: drawn row by row, noise perturbs ripples and mirroring
    for (let y = horizon; y < h; y++) {
      const depth = (y - horizon) / (h - horizon);    // distance below horizon, 0 to 1
      const wave = noise(y * 4, t * 20) * 20 * depth;  // ripple strength grows with depth
      // Reflection: sample the sky color at the same position, darken by depth
      const r = Math.floor(240 * (1 - depth * 0.7));
      const g = Math.floor(160 * (1 - depth * 0.7) + wave);
      const b = Math.floor(90 * (1 - depth * 0.5));
      ctx.fillStyle = `rgb(${r},${g},${b})`;
      ctx.fillRect(0, y, w, 1);                      // one line per row forms the water
    }

    // ③ Fire: a flickering glow on the shore (noise drives radius and brightness)
    const flicker = 1 + noise(t * 50, 0) * 0.3;      // flicker factor 0.7 to 1.3
    const fx = w * 0.3, fy = horizon + 20;           // fire position (on the shore)
    const glow = ctx.createRadialGradient(fx, fy, 0, fx, fy, 120 * flicker);
    glow.addColorStop(0, 'rgba(255,200,80,0.9)');     // bright yellow core
    glow.addColorStop(0.4, 'rgba(255,120,30,0.5)');   // orange middle layer
    glow.addColorStop(1, 'rgba(255,80,0,0)');         // transparent edge
    ctx.fillStyle = glow;
    ctx.beginPath();
    ctx.arc(fx, fy, 120 * flicker, 0, Math.PI * 2);
    ctx.fill();

    requestAnimationFrame(draw);                      // animation loop
  }
  draw();
</script>
</body>
</html>

How to read this code: The whole scene contains no single image — the sky is a procedural gradient via createLinearGradient (matching section 4's "colors are computed"); the water is per-row fillRect plus noise() perturbation, with reflections implemented as "sample the sky color by depth and darken it" (matching section 5's "reflections = sampling by reflection"); the fire is a createRadialGradient radial glow whose radius flickers with noise(t*50) (matching "fire = noise flicker + bloom"). It's the smallest mirror of the Fable 5.2 work: functions make textures, time drives animation, zero assets.

10. Reference Table: Symptoms → Causes → Solutions

Symptom Cause Solution
Pages weigh tens of MB and load slowly Using images/video as visual assets Procedural generation; replace resources with functions
Want rich visuals but have no art assets Depending on textures and model files Shaders + math-driven visuals
Audio files are large and generate many requests Using audio files Web Audio procedural synthesis
Stuttering animation, bulky bundles Sprite sequences/video taking up space Real-time computation instead of pre-made animation
Envious of demos but can't reproduce them Can only assemble libraries, afraid of writing from scratch Practice with deliberate constraints (ban libraries)
One-shot output looks great but can't be maintained Demo has no engineering discipline Split modules and set a performance budget in production

11. Closing Judgment

When to learn this stuff: you want to build "high-quality, lightweight, visually striking" frontend work — data visualization, creative sites, product landing page ambiance. Procedural generation delivers strong feel at minimal size, and shaders, noise functions, and Web Audio are worth learning. When not to force it: ordinary business systems, admin dashboards, and performance-sensitive low-end devices — there, existing components and images are the more stable choice, and forcing ray tracing will only drag down the experience. One criterion decides it: is the visual the product's core selling point? If yes, build it with code; if not, don't sacrifice engineering health for flair.

This column, "Full Stack Development", covers frontend engineering, UI and interaction design, and developer tooling; each post comes with runnable code and practical explanations, updated continuously. To get fewer detours in "building visuals with code," subscribe on the column page.

References (combined):

Comments

Top 1 of 2 from juejin.cn, machine-translated. The original thread is authoritative.

用户2615679465532 1 likes

Is there the original 1.42MB HTML?

ENCI

Yes 👍 The original 1.42MB HTML is the complete product directly generated by Fable 5.2, I have it saved. If needed, I can put the online preview link and source file together in the article's resource section, or send it directly to you — tell me which form you prefer, and I'll arrange it.