Claude Fable 5 Creates a Music-Synchronized Fluid Simulation

1. What fluid simulation actually requires

Simulating the behavior of a fluid — water, smoke, oil — is one of the most computationally demanding things you can ask a computer to render in real time. The reason is physics: fluids do not move in simple, predictable trajectories. Their motion is governed by the Navier-Stokes equations, a set of partial differential equations that describe how velocity, pressure, viscosity, and external forces interact continuously throughout a fluid volume.

The core intuition is that every point in a fluid has a velocity (how fast it is moving and in which direction) and a pressure (how much it is being squeezed by neighboring fluid). The Navier-Stokes equations say, in essence, that the change in velocity at any point depends on three things: the pressure gradient pushing it, the viscosity diffusing it, and any external forces acting on it. Solving these equations for every point in a two-dimensional grid sixty times per second is not something you can do analytically — you need numerical methods.

The most common approach for interactive simulations is the finite difference method, which replaces the continuous fluid domain with a discrete grid of cells, and replaces continuous derivatives with differences between neighboring cells. Each simulation step computes the new velocity field from the old one, then adjusts pressures to keep the fluid incompressible (a constraint that says “fluid doesn’t pile up” — any fluid entering a cell must also leave it). The iterative solver that enforces this constraint — typically a Jacobi or Gauss-Seidel iteration — is the performance bottleneck, and it is why GPU acceleration via WebGL or compute shaders is essentially required for real-time work. On the GPU, all grid cells can be updated in parallel instead of sequentially, which reduces what would take hundreds of milliseconds on a CPU to a few milliseconds on modern hardware.

The result is a velocity field that churns and swirls convincingly. To render it, you advect (carry along) a dye or density field through that velocity field — each pixel of color gets moved to where the fluid would have carried it. The combination of incompressible Navier-Stokes physics, GPU-parallel solving, and density advection produces the hypnotic, ink-in-water aesthetic that fluid simulations are known for.

2. How music synchronization works in code

The second layer of complexity in Fable 5’s demo is that the fluid does not just run on its own — it responds to music in real time. Understanding how this works requires knowing a little about how audio is represented computationally.

A digital audio signal is a sequence of pressure samples, typically 44,100 per second. In that raw form, the signal is difficult to use for visualization because all the frequency content is mixed together. To separate bass from treble, you need a Fast Fourier Transform (FFT). An FFT takes a short window of audio samples — say, the last 1,024 samples — and decomposes it into its constituent frequency components, yielding a frequency spectrum: an array where each index corresponds to a frequency band and each value represents how much energy is present at that frequency right now.

With the frequency spectrum available at every animation frame, beat detection becomes a signal processing problem. The simplest approach watches for sudden increases in energy in low-frequency bands (roughly 20–200 Hz, the bass range). When the cumulative energy in the bass band spikes above a running average by a threshold amount, a beat is detected. More sophisticated approaches use onset detection functions that look at multiple frequency bands simultaneously and apply peak-picking algorithms to find onsets even when the tempo is not steady.

Once you have real-time frequency data and beat detections, the parameter mapping from audio to fluid becomes a design problem. A natural mapping is: low-frequency energy (bass, kick drum) → large, explosive disturbances injected into the velocity field; high-frequency energy (hi-hats, treble) → fine, rippling disturbances with short decay. Beat onsets trigger impulse forces at random positions, creating the synchronized “pulse” that makes music-reactive visuals feel physically connected to the sound. In the Web Audio API — the browser standard for audio processing — all of this is available natively: the AnalyserNode provides real-time FFT data from any audio source, and JavaScript callbacks let you read it every animation frame alongside requestAnimationFrame.

The challenge is calibration. The range of FFT values is logarithmic and varies enormously between different music styles. A heavy EDM track has much higher sustained bass energy than a string quartet. A practical implementation normalizes the FFT output against a rolling maximum, so the visual parameters stay proportional across different audio levels. Getting this mapping to feel “musical” rather than merely reactive is a creative tuning problem as much as a technical one.

3. Mathematical music — creating sound without hearing it

Perhaps the most striking aspect of Fable 5’s demonstration is the detail that the classical music EDM remix was itself produced by Fable 5 “using code, having never heard music before.” This deserves careful unpacking, because it reveals something important about what large language models do when they operate at their capability frontier.

Fable 5 cannot hear. It has no auditory system, no experience of what a bass drop sounds like, no memory of the emotional arc of a classical piece. What it has is a vast training corpus that includes music theory, digital audio synthesis, signal processing literature, and code that produces audio. When asked to produce music, it draws on this structural knowledge to write code that instantiates oscillators, envelope generators, rhythm sequencers, and filters — the building blocks of synthesis that human electronic musicians have documented extensively in text.

The result is mathematical music: sequences of numbers that, when converted to audio by a digital-to-analog converter, produce waveforms that human listeners recognize as musical. Fable 5 constructed this by reasoning about frequency ratios (which create harmonic intervals), about amplitude envelopes (which shape the attack and decay of notes), about rhythmic patterns (which create meter and groove), and about frequency spectra (which distinguish the warmth of a bass synth from the brightness of a lead). It never needed to experience the result to reason correctly about its structure.

This is analogous to how a mathematician can derive that a particular equation will produce a spiral before ever plotting it. The structural relationships are accessible through reasoning alone. The fact that Fable 5 produced music this way — and that the music was recognizable as music with a discernible beat for the fluid simulation to react to — is a demonstration of the depth of structural musical knowledge that can be encoded in a language model.

4. Creative coding as a discipline

What Fable 5 demonstrated is not just a technical achievement — it is an example of creative coding, a discipline that treats software as an expressive medium. Creative coders work at the intersection of algorithms and aesthetics: they write code that generates visual art, music, interactive experiences, and data visualizations, with the goal of producing something that is beautiful or emotionally resonant, not just functional.

The lineage of creative coding runs through artists like John Whitney (who pioneered computer animation in the 1960s), through the Processing programming language (which made creative coding accessible from the early 2000s), and into the contemporary ecosystem of tools like p5.js, three.js, Tone.js, and WebGL shaders. The discipline requires fluency in both mathematical thinking (understanding how parameters affect visual or sonic output) and aesthetic judgment (knowing what looks or sounds good). These are skills that are rarely taught together in formal education, which is part of why creative coding has historically been a niche that requires unusual combinations of expertise.

Fable 5’s ability to bridge these domains — implementing physically correct fluid dynamics, synthesizing audio with appropriate rhythmic structure, and connecting the two through a coherent parameter mapping — represents a significant capability for assisting creative coders. It can now serve as a collaborator who understands both the physics and the aesthetics, can implement complex technical systems quickly, and can iterate on parameters when the visual or sonic result needs tuning.

🧠 Check your understanding

5 questions · your answers are saved in this browser only

1. 1. What do the Navier-Stokes equations describe in the context of fluid simulation?

   The color and transparency of fluid particles How velocity, pressure, viscosity, and external forces interact throughout a fluid The number of grid cells needed to represent a fluid volume The file format used to store simulation data

   The Navier-Stokes equations are partial differential equations that govern how velocity and pressure fields in a fluid evolve over time, accounting for viscosity and external forces.

2. 2. What does an FFT (Fast Fourier Transform) do to an audio signal?

   It compresses the audio to reduce file size It converts stereo audio to mono It decomposes a signal into its constituent frequency components It synchronizes the audio to a video timeline

   An FFT takes a window of audio samples and decomposes them into frequency components, yielding a spectrum that shows how much energy is present at each frequency band — enabling beat detection and frequency-to-visual parameter mapping.

3. 3. Why does real-time fluid simulation typically require GPU acceleration?

   GPUs have more RAM than CPUs GPUs can update all grid cells in parallel rather than sequentially GPUs are better at loading large audio files CPUs cannot perform floating-point arithmetic fast enough

   The iterative solver that enforces fluid incompressibility must update every grid cell each simulation step. The GPU can do this in parallel across all cells simultaneously, reducing what would take hundreds of milliseconds on a CPU to a few milliseconds.

4. 4. How did Claude Fable 5 produce music 'without ever hearing it'?

   It sampled royalty-free music from the internet It used structural knowledge of synthesis, rhythm, and frequency ratios from its training It asked human musicians to record tracks for it It replayed music it had memorized verbatim from training data

   Fable 5 drew on structural knowledge — music theory, synthesis techniques, envelope generators, rhythm patterns — encoded in its training data, and used this to write audio synthesis code that produces waveforms humans recognize as musical, without needing to experience the sound.

5. 5. In a music-reactive fluid simulation, which audio frequencies would most naturally drive large explosive disturbances?

   High frequencies (hi-hats, cymbals) Mid-range frequencies (vocals) Low frequencies (bass, kick drum) Ultrasonic frequencies above human hearing

   Low-frequency energy — bass and kick drum hits — carries the most energy and represents the strongest beats in music. Mapping these to large velocity disturbances in the fluid creates the visceral, synchronized feel that makes music-reactive visuals compelling.

Reset quiz

🛠️ Build it yourself

Follow these exact steps to reproduce it yourself · estimated time: ~25 minutes

Prerequisites

• A modern web browser
• Claude or another capable AI assistant
• Basic familiarity with HTML files

Step 1 — Define a creative vision

Open a conversation with Claude and describe a generative art concept you find interesting. A good starting point: “I want a particle system where particles are attracted to the mouse cursor, orbit it, and leave color trails. The colors should shift slowly over time.” Be specific about what you want to see and feel — the aesthetic is the spec.

Step 2 — Ask Claude to implement it as a single HTML file

Say: “Implement this as a single self-contained HTML file using an HTML5 canvas. No external libraries — only vanilla JavaScript.” A single file is ideal because you can open it instantly in any browser without a build step.

Step 3 — Open it in your browser and observe

Save the file Claude provides and open it in your browser. Watch what happens. Note anything that does not match your vision: particles moving too fast, colors not shifting the way you imagined, the canvas feeling empty. Be specific about what you see.

Step 4 — Iterate on parameters

Go back to Claude with concrete feedback: “The particles feel too sluggish — can you double the attraction force and reduce particle mass by half?” or “The color shift is too fast — slow the hue rotation by a factor of 10.” Each iteration refines the parameters.

Step 5 — Add an audio layer (optional)

Once the visual is working, ask Claude to add a Web Audio API synthesizer that plays a beat, and to make the particle attraction force respond to the beat detections. You will have created your own music-reactive generative art piece.