diff --git a/.DS_Store b/.DS_Store
index 8d99209..5457efb 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/README.md b/README.md
index f0f5d82..76138d5 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,12 @@ A self-contained, GPU-accelerated reimagining of the classic XScreenSaver *Fluid
 
 No install, no server, no build step, it runs entirely in your browser.  
 <br/>
+**The two showcase presets are built in — no download needed.** Scroll to "Interaction & Tools" -> Preset,  
+pick one, and hit Apply. **Synaptic Cascades** (the mode it boots into) is mesmerizing, and  
+**Ocean Chasing Its Tail** is fun to watch too. Did I mention you can record videos 🎥 ?
+
+Every other preset in the `presets` folder can be downloaded and loaded the same way  
+via "Interaction & Tools" -> Import .json.
 **Check out the `presets` folder in this repository, downlaod the json files,  
 then in FluidBallsJS scroll all the way to "Interaction & Tools" -> Import .json**
 `pressure_networks_like_synaptic_cascades.fluidballs.json` is mesmermizing,  
diff --git a/presets/ocean_wave_chasing_its_own_tail.fluidballs.json b/presets/ocean_wave_chasing_its_own_tail.fluidballs.json
index 629ef66..20a919f 100644
--- a/presets/ocean_wave_chasing_its_own_tail.fluidballs.json
+++ b/presets/ocean_wave_chasing_its_own_tail.fluidballs.json
@@ -12,7 +12,7 @@
     "compliance": 0.00052,
     "gravityMode": "rotate",
     "gravityStrength": 340,
-    "gravityAngle": 21,
+    "gravityAngle": 26,
     "gravityCycleTime": 16,
     "gravityTransitionTime": 5,
     "windStrength": 10,
@@ -21,14 +21,14 @@
     "elasticity": 1.2,
     "wallBounce": 1.2,
     "airDrag": 0.11,
-    "contactViscosity": 0.46,
+    "contactViscosity": 0.3,
     "clumpAffinity": 850,
     "splitEnergy": 200,
     "renderMode": "metaball",
-    "fusionThreshold": 0.1,
+    "fusionThreshold": 0.9,
     "edgeSoftness": 0.005,
-    "fieldRadius": 2.3,
-    "specFusion": 12,
+    "fieldRadius": 2.5,
+    "specFusion": 10.5,
     "colorMode": "mono",
     "baseHue": 216,
     "hueSpread": 273,
@@ -36,25 +36,25 @@
     "pressureScale": 0.8,
     "pressureDiffuse": false,
     "glow": 0,
-    "bloomStrength": 0,
-    "trailPersistence": 0,
-    "exposure": 2.72,
+    "bloomStrength": 1.12,
+    "trailPersistence": 0.145,
+    "exposure": 3,
     "backgroundColor": "#02050b",
-    "bloomEnabled": false,
+    "bloomEnabled": true,
     "vignette": false,
     "msaa": true,
-    "lightAngle": 69,
+    "lightAngle": 27,
     "lightWidth": 0.87,
-    "lightSoftness": 0.87,
-    "ior": 2.19,
-    "clarity": 0.94,
-    "translucency": 0.91,
-    "lightFalloff": 5.15,
-    "bandPosition": 0.85,
+    "lightSoftness": 0,
+    "ior": 1,
+    "clarity": 0,
+    "translucency": 1,
+    "lightFalloff": 6,
+    "bandPosition": 0.52,
     "bandWidth": 0.15,
     "tintColor": "#2aa6ff",
     "tintStrength": 0,
-    "mouseMode": "vortex",
+    "mouseMode": "attract",
     "mouseStrength": 4500,
     "mouseRadius": 500
   }
diff --git a/presets/ocean_wave_preset.fluidballs.json b/presets/ocean_wave_preset.fluidballs.json
deleted file mode 100644
index 8657f8d..0000000
--- a/presets/ocean_wave_preset.fluidballs.json
+++ /dev/null
@@ -1,61 +0,0 @@
-{
-  "version": 1,
-  "app": "fluidballs",
-  "settings": {
-    "ballCount": 3500,
-    "sizeMode": "mixed",
-    "radius": 4,
-    "radiusMin": 3,
-    "radiusMax": 4,
-    "solverIterations": 3,
-    "physicsHz": 60,
-    "compliance": 0.00042,
-    "gravityMode": "rotate",
-    "gravityStrength": 340,
-    "gravityAngle": 21,
-    "gravityCycleTime": 18,
-    "gravityTransitionTime": 4,
-    "windStrength": 10,
-    "windAngle": 45,
-    "windTurbulence": 0.16,
-    "elasticity": 0.74,
-    "wallBounce": 0.84,
-    "airDrag": 0.06,
-    "contactViscosity": 0.4,
-    "clumpAffinity": 1300,
-    "splitEnergy": 240,
-    "renderMode": "metaball",
-    "fusionThreshold": 0.19,
-    "edgeSoftness": 0.005,
-    "fieldRadius": 2.5,
-    "specFusion": 11,
-    "colorMode": "mono",
-    "baseHue": 216,
-    "hueSpread": 281,
-    "colorSpeed": 0,
-    "pressureScale": 0.8,
-    "pressureDiffuse": false,
-    "glow": 0.38,
-    "bloomStrength": 0.2,
-    "trailPersistence": 0,
-    "exposure": 3,
-    "backgroundColor": "#02050b",
-    "bloomEnabled": false,
-    "vignette": false,
-    "msaa": true,
-    "lightAngle": 180,
-    "lightWidth": 1.5,
-    "lightSoftness": 0.61,
-    "ior": 2.5,
-    "clarity": 0.85,
-    "translucency": 1,
-    "lightFalloff": 2.2,
-    "bandPosition": 0.14,
-    "bandWidth": 0.15,
-    "tintColor": "#2aa6ff",
-    "tintStrength": 0.55,
-    "mouseMode": "vortex",
-    "mouseStrength": 4500,
-    "mouseRadius": 500
-  }
-}
\ No newline at end of file
diff --git a/webgl/.DS_Store b/webgl/.DS_Store
index 9a525f0..330a8e2 100644
Binary files a/webgl/.DS_Store and b/webgl/.DS_Store differ
diff --git a/webgl/fluidballs-webgl-single.html b/webgl/fluidballs-webgl-single.html
index eb7d0c9..0cb0724 100644
--- a/webgl/fluidballs-webgl-single.html
+++ b/webgl/fluidballs-webgl-single.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
   <meta name="color-scheme" content="dark">
-  <title>FluidBallsJS v1.0 WebGL</title>
+    <title>FluidBallsJS v1.0 WebGL</title>
   <style data-inlined-from="style.css">
     /* Any rule that sets `display` outranks the UA's [hidden] { display: none },
        so the attribute silently stops working. Guard it once, globally. */
@@ -576,6 +576,8 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
         <label class="select-row">
           <span>Preset</span>
           <select id="presetSelect">
+            <option value="synaptic">Synaptic Cascades</option>
+            <option value="oceanTail">Ocean Chasing Its Tail</option>
             <option value="classic">Classic blue</option>
             <option value="mercury">Mercury</option>
             <option value="lava">Lava lamp</option>
@@ -682,6 +684,37 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
       });
 
       root.PRESETS = Object.freeze({
+        // Flagship showcase preset (full settings) — also the startup default (main.js).
+        // Ball count / solver passes tuned down for broad hardware (iPad). physicsHz 90
+        // is the FLOOR where the emergent "synaptic" pressure patterns crackle to life
+        // reliably — at 60 they only flicker intermittently. Do not lower it.
+        synaptic: {
+          ballCount: 2500, sizeMode: 'mixed', radius: 11.5, radiusMin: 4, radiusMax: 8, solverIterations: 2, physicsHz: 90, compliance: 0,
+          gravityMode: 'cardinal', gravityStrength: 30, gravityAngle: 21, gravityCycleTime: 6.1, gravityTransitionTime: 1.2,
+          windStrength: 10, windAngle: 45, windTurbulence: 0.16,
+          elasticity: 1.14, wallBounce: 1.15, airDrag: 0.06, contactViscosity: 0.49, clumpAffinity: 890, splitEnergy: 300,
+          renderMode: 'sphere', fusionThreshold: 0.1, edgeSoftness: 0.12, fieldRadius: 2.45, specFusion: 12,
+          colorMode: 'pressure', baseHue: 272, hueSpread: 298, colorSpeed: 1, pressureScale: 0.8, pressureDiffuse: false,
+          glow: 0.06, bloomStrength: 0.14, trailPersistence: 0.085, exposure: 2.58, backgroundColor: '#02050b', bloomEnabled: false, vignette: false, msaa: true,
+          lightAngle: 224, lightWidth: 0.97, lightSoftness: 0.73, ior: 1.93, clarity: 0.85, translucency: 0.91, lightFalloff: 6, bandPosition: 0, bandWidth: 0.15,
+          tintColor: '#2aa6ff', tintStrength: 0,
+          mouseMode: 'vortex', mouseStrength: 4500, mouseRadius: 500,
+        },
+        // Second showcase preset (full settings). Slow rotating gravity drags the
+        // metaball sheet around after itself, so the body of "water" perpetually
+        // chases its own wake. Heavier than synaptic — 3500 balls, 5 solver passes.
+        oceanTail: {
+          ballCount: 3500, sizeMode: 'mixed', radius: 11.5, radiusMin: 3, radiusMax: 4, solverIterations: 5, physicsHz: 60, compliance: 0.00052,
+          gravityMode: 'rotate', gravityStrength: 340, gravityAngle: 26, gravityCycleTime: 16, gravityTransitionTime: 5,
+          windStrength: 10, windAngle: 45, windTurbulence: 0.16,
+          elasticity: 1.2, wallBounce: 1.2, airDrag: 0.11, contactViscosity: 0.3, clumpAffinity: 850, splitEnergy: 200,
+          renderMode: 'metaball', fusionThreshold: 0.9, edgeSoftness: 0.005, fieldRadius: 2.5, specFusion: 10.5,
+          colorMode: 'mono', baseHue: 216, hueSpread: 273, colorSpeed: 0, pressureScale: 0.8, pressureDiffuse: false,
+          glow: 0, bloomStrength: 1.12, trailPersistence: 0.145, exposure: 3, backgroundColor: '#02050b', bloomEnabled: true, vignette: false, msaa: true,
+          lightAngle: 27, lightWidth: 0.87, lightSoftness: 0, ior: 1, clarity: 0, translucency: 1, lightFalloff: 6, bandPosition: 0.52, bandWidth: 0.15,
+          tintColor: '#2aa6ff', tintStrength: 0,
+          mouseMode: 'attract', mouseStrength: 4500, mouseRadius: 500,
+        },
         classic: {
           gravityMode: 'cardinal', gravityStrength: 780, gravityCycleTime: 5,
           elasticity: 0.84, wallBounce: 0.88, airDrag: 0.18,
@@ -2312,7 +2345,10 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
           bind('screenshotButton', () => this.callbacks.onScreenshot?.());
           bind('recordButton', () => this.callbacks.onRecord?.());
           bind('fullscreenButton', () => this.callbacks.onFullscreen?.());
-          bind('applyPresetButton', () => this.callbacks.onApplyPreset?.(document.getElementById('presetSelect').value));
+          bind('applyPresetButton', () => {
+            const select = document.getElementById('presetSelect');
+            this.callbacks.onApplyPreset?.(select.value, select.selectedOptions[0]?.textContent ?? select.value);
+          });
           bind('applyMaterialButton', () => this.callbacks.onApplyMaterial?.(
             document.getElementById('materialSelect').value,
             document.getElementById('materialKinetics').checked
@@ -2412,7 +2448,9 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
       'use strict';
 
       const root = window.FluidBalls;
-      const settings = { ...root.DEFAULTS };
+      // Boot into the "Synaptic Cascades" showcase preset (falls back to plain
+      // defaults if it is ever removed). The preset dropdown lists it too.
+      const settings = { ...root.DEFAULTS, ...(root.PRESETS.synaptic || {}) };
       const canvas = document.getElementById('fluidCanvas');
       const fatalError = document.getElementById('fatalError');
 
@@ -2743,10 +2781,10 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
           onScreenshot: takeScreenshot,
           onRecord: toggleRecording,
           onFullscreen: toggleFullscreen,
-          onApplyPreset: (name) => {
+          onApplyPreset: (name, label) => {
             applySettings(root.PRESETS[name]);
             simulation.reset();
-            ui.toast(`Applied ${name} preset`);
+            ui.toast(`Applied ${label || name} preset`);
           },
           onApplyMaterial: (name, withKinetics) => {
             const material = root.MATERIALS[name];
diff --git a/webgl/index.html b/webgl/index.html
index 91a93b8..c3279ba 100644
--- a/webgl/index.html
+++ b/webgl/index.html
@@ -362,6 +362,8 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
         <label class="select-row">
           <span>Preset</span>
           <select id="presetSelect">
+            <option value="synaptic">Synaptic Cascades</option>
+            <option value="oceanTail">Ocean Chasing Its Tail</option>
             <option value="classic">Classic blue</option>
             <option value="mercury">Mercury</option>
             <option value="lava">Lava lamp</option>
diff --git a/webgl/js/config.js b/webgl/js/config.js
new file mode 100644
index 0000000..6484872
--- /dev/null
+++ b/webgl/js/config.js
@@ -0,0 +1,221 @@
+(() => {
+  'use strict';
+
+  const root = window.FluidBalls = window.FluidBalls || {};
+
+  root.DEFAULTS = Object.freeze({
+    ballCount: 700,
+    sizeMode: 'single',
+    radius: 9,
+    radiusMin: 4,
+    radiusMax: 14,
+    solverIterations: 3,
+    physicsHz: 120,
+    compliance: 0.00002,
+
+    gravityMode: 'cardinal',
+    gravityStrength: 780,
+    gravityAngle: 90,
+    gravityCycleTime: 5,
+    gravityTransitionTime: 1.2,
+    windStrength: 50,
+    windAngle: 0,
+    windTurbulence: 0.14,
+
+    elasticity: 0.84,
+    wallBounce: 0.88,
+    airDrag: 0.18,
+    contactViscosity: 0.12,
+    clumpAffinity: 0,
+    splitEnergy: 300,
+
+    renderMode: 'sphere',
+    fusionThreshold: 0.35,
+    edgeSoftness: 0.08,
+    fieldRadius: 1.5,
+    specFusion: 6,
+
+    colorMode: 'cycle',
+    baseHue: 205,
+    hueSpread: 88,
+    colorSpeed: 14,
+    pressureScale: 16,
+    pressureDiffuse: false,
+    glow: 1.05,
+    bloomStrength: 1.25,
+    trailPersistence: 0.68,
+    exposure: 1.18,
+    backgroundColor: '#02050b',
+    bloomEnabled: true,
+    vignette: true,
+    msaa: true,
+
+    lightAngle: 229,
+    lightWidth: 0.16,
+    lightSoftness: 0.62,
+    ior: 1.45,
+    clarity: 0.5,
+    translucency: 0,
+    lightFalloff: 0,
+    bandPosition: 0.28,
+    bandWidth: 0.15,
+    tintColor: '#66d8ff',
+    tintStrength: 0,
+
+    mouseMode: 'attract',
+    mouseStrength: 3600,
+    mouseRadius: 220
+  });
+
+  root.PRESETS = Object.freeze({
+    // Flagship showcase preset (full settings) — also the startup default (main.js).
+    // Ball count / solver passes tuned down for broad hardware (iPad). physicsHz 90
+    // is the FLOOR where the emergent "synaptic" pressure patterns crackle to life
+    // reliably — at 60 they only flicker intermittently. Do not lower it.
+    synaptic: {
+      ballCount: 2500, sizeMode: 'mixed', radius: 11.5, radiusMin: 4, radiusMax: 8, solverIterations: 2, physicsHz: 90, compliance: 0,
+      gravityMode: 'cardinal', gravityStrength: 30, gravityAngle: 21, gravityCycleTime: 6.1, gravityTransitionTime: 1.2,
+      windStrength: 10, windAngle: 45, windTurbulence: 0.16,
+      elasticity: 1.14, wallBounce: 1.15, airDrag: 0.06, contactViscosity: 0.49, clumpAffinity: 890, splitEnergy: 300,
+      renderMode: 'sphere', fusionThreshold: 0.1, edgeSoftness: 0.12, fieldRadius: 2.45, specFusion: 12,
+      colorMode: 'pressure', baseHue: 272, hueSpread: 298, colorSpeed: 1, pressureScale: 0.8, pressureDiffuse: false,
+      glow: 0.06, bloomStrength: 0.14, trailPersistence: 0.085, exposure: 2.58, backgroundColor: '#02050b', bloomEnabled: false, vignette: false, msaa: true,
+      lightAngle: 224, lightWidth: 0.97, lightSoftness: 0.73, ior: 1.93, clarity: 0.85, translucency: 0.91, lightFalloff: 6, bandPosition: 0, bandWidth: 0.15,
+      tintColor: '#2aa6ff', tintStrength: 0,
+      mouseMode: 'vortex', mouseStrength: 4500, mouseRadius: 500,
+    },
+    // Second showcase preset (full settings). Slow rotating gravity drags the
+    // metaball sheet around after itself, so the body of "water" perpetually
+    // chases its own wake. Heavier than synaptic — 3500 balls, 5 solver passes.
+    oceanTail: {
+      ballCount: 3500, sizeMode: 'mixed', radius: 11.5, radiusMin: 3, radiusMax: 4, solverIterations: 5, physicsHz: 60, compliance: 0.00052,
+      gravityMode: 'rotate', gravityStrength: 340, gravityAngle: 26, gravityCycleTime: 16, gravityTransitionTime: 5,
+      windStrength: 10, windAngle: 45, windTurbulence: 0.16,
+      elasticity: 1.2, wallBounce: 1.2, airDrag: 0.11, contactViscosity: 0.3, clumpAffinity: 850, splitEnergy: 200,
+      renderMode: 'metaball', fusionThreshold: 0.9, edgeSoftness: 0.005, fieldRadius: 2.5, specFusion: 10.5,
+      colorMode: 'mono', baseHue: 216, hueSpread: 273, colorSpeed: 0, pressureScale: 0.8, pressureDiffuse: false,
+      glow: 0, bloomStrength: 1.12, trailPersistence: 0.145, exposure: 3, backgroundColor: '#02050b', bloomEnabled: true, vignette: false, msaa: true,
+      lightAngle: 27, lightWidth: 0.87, lightSoftness: 0, ior: 1, clarity: 0, translucency: 1, lightFalloff: 6, bandPosition: 0.52, bandWidth: 0.15,
+      tintColor: '#2aa6ff', tintStrength: 0,
+      mouseMode: 'attract', mouseStrength: 4500, mouseRadius: 500,
+    },
+    classic: {
+      gravityMode: 'cardinal', gravityStrength: 780, gravityCycleTime: 5,
+      elasticity: 0.84, wallBounce: 0.88, airDrag: 0.18,
+      colorMode: 'cycle', baseHue: 205, hueSpread: 78, colorSpeed: 12,
+      glow: 1.0, bloomStrength: 1.2, trailPersistence: 0.62,
+      backgroundColor: '#02050b'
+    },
+    mercury: {
+      gravityMode: 'wander', gravityStrength: 520, gravityCycleTime: 7,
+      elasticity: 0.38, wallBounce: 0.52, airDrag: 0.38, contactViscosity: 0.48,
+      colorMode: 'mono', baseHue: 196, hueSpread: 8, colorSpeed: 0,
+      glow: 1.65, bloomStrength: 1.8, trailPersistence: 0.78,
+      backgroundColor: '#05080b'
+    },
+    lava: {
+      gravityMode: 'rotate', gravityStrength: 240, gravityCycleTime: 18,
+      windStrength: 80, windTurbulence: 0.4,
+      elasticity: 0.58, wallBounce: 0.62, airDrag: 0.5, contactViscosity: 0.3,
+      colorMode: 'cycle', baseHue: 350, hueSpread: 72, colorSpeed: 7,
+      glow: 2.1, bloomStrength: 2.35, trailPersistence: 0.86,
+      exposure: 1.35, backgroundColor: '#090105'
+    },
+    orbit: {
+      gravityMode: 'manual', gravityStrength: 0,
+      windStrength: 0, windTurbulence: 0,
+      elasticity: 1.0, wallBounce: 1.0, airDrag: 0.012, contactViscosity: 0.01,
+      colorMode: 'direction', baseHue: 190, hueSpread: 250, colorSpeed: 3,
+      glow: 1.15, bloomStrength: 1.45, trailPersistence: 0.91,
+      backgroundColor: '#000006'
+    },
+    storm: {
+      gravityMode: 'wander', gravityStrength: 1100, gravityCycleTime: 1.8,
+      gravityTransitionTime: 0.28, windStrength: 700, windAngle: 15, windTurbulence: 0.85,
+      elasticity: 0.96, wallBounce: 0.96, airDrag: 0.08,
+      colorMode: 'speed', baseHue: 210, hueSpread: 155, colorSpeed: 4,
+      glow: 1.35, bloomStrength: 1.7, trailPersistence: 0.78,
+      backgroundColor: '#010107'
+    }
+  });
+
+  // Materials are curated bundles over the shared knobs. `shading` is always
+  // applied; `physics` only when the "also apply kinetics" checkbox is on.
+  // Values are starting points — everything stays live-tunable afterward.
+  root.MATERIALS = Object.freeze({
+    jelly: {
+      shading: {
+        renderMode: 'metaball', fusionThreshold: 0.35, edgeSoftness: 0.08, specFusion: 5,
+        translucency: 0.55, clarity: 0.75, ior: 1.4, lightFalloff: 1.5,
+        glow: 1.15, bloomStrength: 1.2, tintColor: '#3fe6a6', tintStrength: 0.6
+      },
+      physics: {
+        elasticity: 1.05, wallBounce: 0.92, airDrag: 0.08, contactViscosity: 0.05,
+        clumpAffinity: 2600, splitEnergy: 520, compliance: 0.0003, sizeMode: 'single'
+      }
+    },
+    ocean: {
+      shading: {
+        renderMode: 'metaball', fusionThreshold: 0.3, edgeSoftness: 0.1, specFusion: 8,
+        translucency: 0.72, clarity: 0.85, ior: 1.33, lightFalloff: 2.2, bandPosition: 0.14,
+        glow: 1.0, bloomStrength: 1.1, tintColor: '#2aa6ff', tintStrength: 0.55
+      },
+      physics: {
+        elasticity: 0.42, wallBounce: 0.5, airDrag: 0.2, contactViscosity: 0.35,
+        clumpAffinity: 1300, splitEnergy: 240, compliance: 0.00002, sizeMode: 'single'
+      }
+    },
+    mud: {
+      shading: {
+        renderMode: 'metaball', fusionThreshold: 0.42, edgeSoftness: 0.06, specFusion: 6,
+        translucency: 0.08, clarity: 0.2, ior: 1.3, lightFalloff: 1.0,
+        glow: 0.7, bloomStrength: 0.5, tintColor: '#6b4a2b', tintStrength: 0.85
+      },
+      physics: {
+        elasticity: 0.1, wallBounce: 0.2, airDrag: 0.5, contactViscosity: 0.7,
+        clumpAffinity: 3600, splitEnergy: 760, compliance: 0, sizeMode: 'single'
+      }
+    },
+    vapor: {
+      shading: {
+        renderMode: 'metaball', fusionThreshold: 0.22, edgeSoftness: 0.16, specFusion: 11,
+        translucency: 0.9, clarity: 0.55, ior: 1.1, lightFalloff: 0.5,
+        glow: 1.4, bloomStrength: 2.0, tintColor: '#dfe8ff', tintStrength: 0.5
+      },
+      physics: {
+        elasticity: 0.85, wallBounce: 0.85, airDrag: 0.8, contactViscosity: 0.05,
+        clumpAffinity: 0, splitEnergy: 120, sizeMode: 'mixed', radiusMin: 3, radiusMax: 9
+      }
+    }
+  });
+
+  root.utils = {
+    clamp(value, min, max) {
+      return Math.max(min, Math.min(max, value));
+    },
+
+    lerp(a, b, t) {
+      return a + (b - a) * t;
+    },
+
+    smoothstep(t) {
+      const x = Math.max(0, Math.min(1, t));
+      return x * x * (3 - 2 * x);
+    },
+
+    shortestAngleDelta(from, to) {
+      let delta = (to - from) % 360;
+      if (delta > 180) delta -= 360;
+      if (delta < -180) delta += 360;
+      return delta;
+    },
+
+    hexToRgb(hex) {
+      const normalized = hex.replace('#', '');
+      const value = Number.parseInt(normalized.length === 3
+        ? normalized.split('').map((c) => c + c).join('')
+        : normalized, 16);
+      return [((value >> 16) & 255) / 255, ((value >> 8) & 255) / 255, (value & 255) / 255];
+    }
+  };
+})();
diff --git a/webgl/js/main.js b/webgl/js/main.js
new file mode 100644
index 0000000..0479962
--- /dev/null
+++ b/webgl/js/main.js
@@ -0,0 +1,382 @@
+(() => {
+  'use strict';
+
+  const root = window.FluidBalls;
+  // Boot into the "Synaptic Cascades" showcase preset (falls back to plain
+  // defaults if it is ever removed). The preset dropdown lists it too.
+  const settings = { ...root.DEFAULTS, ...(root.PRESETS.synaptic || {}) };
+  const canvas = document.getElementById('fluidCanvas');
+  const fatalError = document.getElementById('fatalError');
+
+  let simulation;
+  let renderer;
+  let ui;
+  let paused = false;
+  let accumulator = 0;
+  let previousTime = performance.now();
+  let lastStatsTime = previousTime;
+  let statsFrames = 0;
+  let statsFrameMs = 0;
+  let mediaRecorder = null;
+  let recordingChunks = [];
+
+  function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+
+  function applySettings(next) {
+    Object.assign(settings, next);
+    ui?.syncAll();
+    simulation?.setCount(Number(settings.ballCount));
+    simulation?.resizeGrid();
+    renderer?.clearHistory();
+  }
+
+  function setPaused(value) {
+    paused = value;
+    ui.setPaused(paused);
+    if (!paused) previousTime = performance.now();
+  }
+
+  function installPointerControls() {
+    const getPoint = (event) => {
+      const rect = canvas.getBoundingClientRect();
+      return {
+        x: (event.clientX - rect.left) * simulation.width / rect.width,
+        y: (event.clientY - rect.top) * simulation.height / rect.height
+      };
+    };
+
+    canvas.addEventListener('pointerdown', (event) => {
+      const point = getPoint(event);
+      if (event.button === 1 || event.shiftKey) {
+        simulation.spawnBurst(point.x, point.y, 18);
+        settings.ballCount = simulation.count;
+        ui.syncSetting('ballCount');
+        ui.toast('Spawned 18 balls');
+        event.preventDefault();
+        return;
+      }
+      canvas.setPointerCapture(event.pointerId);
+      simulation.pointerDown(point.x, point.y, event.button);
+      event.preventDefault();
+    });
+    canvas.addEventListener('pointermove', (event) => {
+      const point = getPoint(event);
+      simulation.pointerMove(point.x, point.y);
+    });
+    canvas.addEventListener('pointerup', () => simulation.pointerUp());
+    canvas.addEventListener('pointercancel', () => simulation.pointerUp());
+    canvas.addEventListener('contextmenu', (event) => event.preventDefault());
+    canvas.addEventListener('wheel', (event) => {
+      settings.gravityMode = 'manual';
+      settings.gravityAngle = (Number(settings.gravityAngle) + Math.sign(event.deltaY) * 5 + 360) % 360;
+      ui.syncSetting('gravityMode');
+      ui.syncSetting('gravityAngle');
+      event.preventDefault();
+    }, { passive: false });
+  }
+
+  function installKeyboardControls() {
+    window.addEventListener('keydown', (event) => {
+      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement) return;
+      if (event.code === 'Space') {
+        setPaused(!paused);
+        event.preventDefault();
+      } else if (event.key.toLowerCase() === 'r') {
+        simulation.reset();
+        renderer.clearHistory();
+        ui.toast('Simulation reset');
+      } else if (event.key.toLowerCase() === 's') {
+        simulation.shake();
+        ui.toast('Box shaken');
+      } else if (event.key.toLowerCase() === 'f') {
+        toggleFullscreen();
+      }
+    });
+  }
+
+  async function requestTiltPermission() {
+    try {
+      if (typeof DeviceOrientationEvent === 'undefined') {
+        ui.toast('Device orientation is unavailable here');
+        return;
+      }
+      if (typeof DeviceOrientationEvent.requestPermission === 'function') {
+        const permission = await DeviceOrientationEvent.requestPermission();
+        if (permission !== 'granted') throw new Error('Permission not granted');
+      }
+      window.addEventListener('deviceorientation', (event) => {
+        const gamma = Number(event.gamma) || 0;
+        const beta = Number(event.beta) || 0;
+        simulation.setTilt(gamma / 45, beta / 45);
+      });
+      settings.gravityMode = 'tilt';
+      ui.syncSetting('gravityMode');
+      ui.toast('Device tilt gravity enabled');
+    } catch (error) {
+      ui.toast(`Tilt permission failed: ${error.message}`);
+    }
+  }
+
+  async function toggleFullscreen() {
+    try {
+      if (!document.fullscreenElement) await document.documentElement.requestFullscreen();
+      else await document.exitFullscreen();
+    } catch (error) {
+      ui.toast(`Fullscreen failed: ${error.message}`);
+    }
+  }
+
+  async function takeScreenshot() {
+    try {
+      const blob = await renderer.screenshot();
+      downloadBlob(blob, `fluidballs-${new Date().toISOString().replace(/[:.]/g, '-')}.png`);
+      ui.toast('Screenshot saved');
+    } catch (error) {
+      ui.toast(error.message);
+    }
+  }
+
+  function toggleRecording() {
+    if (mediaRecorder?.state === 'recording') {
+      mediaRecorder.stop();
+      return;
+    }
+    if (!canvas.captureStream || typeof MediaRecorder === 'undefined') {
+      ui.toast('WebM recording is unavailable in this browser');
+      return;
+    }
+    const stream = canvas.captureStream(60);
+    const candidates = [
+      'video/webm;codecs=vp9',
+      'video/webm;codecs=vp8',
+      'video/webm'
+    ];
+    const mimeType = candidates.find((candidate) => MediaRecorder.isTypeSupported(candidate)) || '';
+    recordingChunks = [];
+    mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType, videoBitsPerSecond: 12_000_000 } : undefined);
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) recordingChunks.push(event.data);
+    };
+    mediaRecorder.onstop = () => {
+      const blob = new Blob(recordingChunks, { type: mediaRecorder.mimeType || 'video/webm' });
+      downloadBlob(blob, `fluidballs-${new Date().toISOString().replace(/[:.]/g, '-')}.webm`);
+      ui.setRecording(false);
+      ui.toast('WebM recording saved');
+      mediaRecorder = null;
+    };
+    mediaRecorder.start(1000);
+    ui.setRecording(true);
+    ui.toast('Recording started');
+  }
+
+  function savePreset() {
+    localStorage.setItem('fluidballs.customPreset', JSON.stringify(settings));
+    ui.toast('Current settings saved locally');
+  }
+
+  function loadPreset() {
+    try {
+      const raw = localStorage.getItem('fluidballs.customPreset');
+      if (!raw) {
+        ui.toast('No local preset has been saved');
+        return;
+      }
+      applySettings(sanitizeSettings(JSON.parse(raw)));
+      ui.toast('Local preset loaded');
+    } catch (error) {
+      ui.toast(`Preset load failed: ${error.message}`);
+    }
+  }
+
+  // Whitelist an incoming settings object against DEFAULTS so a malformed or
+  // hostile shared file can never wedge the sim: unknown keys are dropped, types
+  // are coerced to match DEFAULTS, numbers are clamped to their control's range,
+  // and enum strings must match an actual <select> option.
+  function sanitizeSettings(raw) {
+    if (!raw || typeof raw !== 'object') return {};
+    const clean = {};
+    for (const key of Object.keys(root.DEFAULTS)) {
+      if (!(key in raw)) continue;
+      const def = root.DEFAULTS[key];
+      const value = raw[key];
+      if (typeof def === 'boolean') {
+        clean[key] = Boolean(value);
+      } else if (typeof def === 'number') {
+        const n = Number(value);
+        if (!Number.isFinite(n)) continue;
+        const input = document.querySelector(`input[type="range"][data-setting="${key}"], input[type="number"][data-setting="${key}"]`);
+        clean[key] = (input && input.min !== '' && input.max !== '')
+          ? Math.min(Number(input.max), Math.max(Number(input.min), n))
+          : n;
+      } else {
+        const str = String(value);
+        const select = document.querySelector(`select[data-setting="${key}"]`);
+        if (select) {
+          if ([...select.options].some((option) => option.value === str)) clean[key] = str;
+        } else if (/^#[0-9a-fA-F]{3,8}$/.test(str)) {
+          clean[key] = str;
+        }
+      }
+    }
+    return clean;
+  }
+
+  function exportPreset() {
+    const payload = JSON.stringify({ version: 1, app: 'fluidballs', settings }, null, 2);
+    const blob = new Blob([payload], { type: 'application/json' });
+    downloadBlob(blob, `fluidballs-${new Date().toISOString().replace(/[:.]/g, '-')}.fluidballs.json`);
+    ui.toast('Preset exported to file');
+  }
+
+  function importPreset(file) {
+    const reader = new FileReader();
+    reader.onerror = () => ui.toast('Could not read that file');
+    reader.onload = () => {
+      try {
+        const parsed = JSON.parse(String(reader.result));
+        const raw = parsed && typeof parsed === 'object' && parsed.settings ? parsed.settings : parsed;
+        const clean = sanitizeSettings(raw);
+        const count = Object.keys(clean).length;
+        if (!count) {
+          ui.toast('No recognizable settings in that file');
+          return;
+        }
+        applySettings(clean);
+        ui.toast(`Loaded ${count} setting${count === 1 ? '' : 's'} from file`);
+      } catch (error) {
+        ui.toast(`Import failed: ${error.message}`);
+      }
+    };
+    reader.readAsText(file);
+  }
+
+  function onResize() {
+    const rect = canvas.getBoundingClientRect();
+    simulation.setBounds(rect.width, rect.height);
+    renderer.resize();
+  }
+
+  function tick(now) {
+    const frameStart = performance.now();
+    const frameSeconds = Math.min(0.1, Math.max(0, (now - previousTime) / 1000));
+    previousTime = now;
+    const fixedDt = 1 / Math.max(30, Number(settings.physicsHz));
+
+    if (!paused) {
+      accumulator += frameSeconds;
+      let substeps = 0;
+      const maxSubsteps = 8;
+      while (accumulator >= fixedDt && substeps < maxSubsteps) {
+        simulation.step(fixedDt);
+        accumulator -= fixedDt;
+        substeps += 1;
+      }
+      if (substeps === maxSubsteps) accumulator = 0;
+    }
+
+    renderer.render(simulation, now / 1000);
+    statsFrames += 1;
+    statsFrameMs += performance.now() - frameStart;
+    if (now - lastStatsTime >= 500) {
+      const elapsed = (now - lastStatsTime) / 1000;
+      ui.updateStats({
+        fps: statsFrames / elapsed,
+        frameMs: statsFrameMs / statsFrames,
+        contacts: simulation.contactCount,
+        balls: simulation.count,
+        gpu: renderer.gpuDescription
+      });
+      statsFrames = 0;
+      statsFrameMs = 0;
+      lastStatsTime = now;
+    }
+    requestAnimationFrame(tick);
+  }
+
+  try {
+    simulation = new root.Simulation(settings);
+    renderer = new root.WebGLRenderer(canvas, settings);
+    ui = new root.UI(settings, {
+      onSettingChanged(key, value) {
+        if (key === 'ballCount') simulation.setCount(value);
+        if (key === 'radius' || key === 'radiusMin' || key === 'radiusMax' || key === 'sizeMode') {
+          simulation.refreshRadii();
+          simulation.resizeGrid();
+          simulation.setBounds(simulation.width, simulation.height);
+        }
+        if (key === 'backgroundColor' || key === 'trailPersistence') renderer.clearHistory();
+      },
+      onPause: () => setPaused(!paused),
+      onStep: () => {
+        if (!paused) setPaused(true);
+        simulation.step(1 / Math.max(30, Number(settings.physicsHz)));
+      },
+      onShake: () => { simulation.shake(); ui.toast('Box shaken'); },
+      onReset: () => { simulation.reset(); renderer.clearHistory(); ui.toast('Simulation reset'); },
+      onRandomize: () => { simulation.randomizeVelocities(); ui.toast('Velocities randomized'); },
+      onZeroVelocity: () => { simulation.zeroVelocities(); ui.toast('Velocity zeroed'); },
+      onReseedColors: () => { simulation.reseedColors(); ui.toast('Color seeds randomized'); },
+      onClearTrails: () => { renderer.clearHistory(); ui.toast('Trails cleared'); },
+      onSpawn: () => {
+        simulation.spawnBurst(undefined, undefined, 32);
+        settings.ballCount = simulation.count;
+        ui.syncSetting('ballCount');
+        ui.toast('Spawned 32 balls');
+      },
+      onScreenshot: takeScreenshot,
+      onRecord: toggleRecording,
+      onFullscreen: toggleFullscreen,
+      onApplyPreset: (name, label) => {
+        applySettings(root.PRESETS[name]);
+        simulation.reset();
+        ui.toast(`Applied ${label || name} preset`);
+      },
+      onApplyMaterial: (name, withKinetics) => {
+        const material = root.MATERIALS[name];
+        if (!material) return;
+        applySettings({ ...material.shading, ...(withKinetics ? material.physics : {}) });
+        ui.toast(`Applied ${name}${withKinetics ? ' + kinetics' : ' (look only)'}`);
+      },
+      onSavePreset: savePreset,
+      onLoadPreset: loadPreset,
+      onExportPreset: exportPreset,
+      onImportPreset: importPreset,
+      onTiltPermission: requestTiltPermission
+    });
+
+    canvas.addEventListener('fluidballs:contextlost', (event) => {
+      fatalError.hidden = false;
+      fatalError.textContent = `FluidBalls lost the GPU context.\n\n${event.detail.reason}\n\nWaiting for the browser to restore it…`;
+    });
+    canvas.addEventListener('fluidballs:contextrestored', () => {
+      fatalError.hidden = true;
+      fatalError.textContent = '';
+      previousTime = performance.now();
+      accumulator = 0;
+    });
+
+    installPointerControls();
+    installKeyboardControls();
+    window.addEventListener('resize', onResize);
+    document.addEventListener('visibilitychange', () => {
+      previousTime = performance.now();
+      accumulator = 0;
+    });
+    onResize();
+    simulation.reset();
+    requestAnimationFrame(tick);
+  } catch (error) {
+    console.error(error);
+    fatalError.hidden = false;
+    fatalError.textContent = `FluidBalls could not start.\n\n${error.message}\n\nTry enabling hardware acceleration or opening this file in a current Chrome, Edge, Firefox, or Safari build.`;
+  }
+})();
diff --git a/webgl/js/physics.js b/webgl/js/physics.js
new file mode 100644
index 0000000..a3183f7
--- /dev/null
+++ b/webgl/js/physics.js
@@ -0,0 +1,621 @@
+(() => {
+  'use strict';
+
+  const root = window.FluidBalls = window.FluidBalls || {};
+  const { clamp, shortestAngleDelta, smoothstep } = root.utils;
+
+  class Simulation {
+    constructor(settings) {
+      this.settings = settings;
+      this.width = 1;
+      this.height = 1;
+      this.capacity = 0;
+      this.count = 0;
+      this.x = new Float32Array(0);
+      this.y = new Float32Array(0);
+      this.prevX = new Float32Array(0);
+      this.prevY = new Float32Array(0);
+      this.vx = new Float32Array(0);
+      this.vy = new Float32Array(0);
+      this.r = new Float32Array(0);
+      this.invMass = new Float32Array(0);
+      this.hueSeed = new Float32Array(0);
+      // Pressure field: `pressure` is the per-step penetration sum accumulated
+      // during contact solving; `pSmooth` is its EMA (stops per-substep strobing);
+      // `pField` is the optional Laplacian-diffused version used by the "shared
+      // colour" pressure mode. pTmp/pCount are scratch for the diffusion passes.
+      this.pressure = new Float32Array(0);
+      this.pSmooth = new Float32Array(0);
+      this.pField = new Float32Array(0);
+      this.pTmp = new Float32Array(0);
+      this.pCount = new Float32Array(0);
+      this.next = new Int32Array(0);
+      this.head = new Int32Array(0);
+      this.cols = 1;
+      this.rows = 1;
+      this.cellSize = 1;
+      this.contactCount = 0;
+      this.simulationTime = 0;
+      this.gravityAngleCurrent = Number(settings.gravityAngle);
+      this.gravityAngleStart = this.gravityAngleCurrent;
+      this.gravityAngleTarget = this.gravityAngleCurrent;
+      this.gravityCycleElapsed = 0;
+      this.gravityTransitionElapsed = Number(settings.gravityTransitionTime);
+      this.pointer = {
+        active: false,
+        x: 0,
+        y: 0,
+        previousX: 0,
+        previousY: 0,
+        forceSign: 1,
+        draggedIndex: -1
+      };
+      this.tilt = { x: 0, y: 1, available: false };
+      this.ensureCapacity(Number(settings.ballCount));
+      this.setCount(Number(settings.ballCount), true);
+    }
+
+    ensureCapacity(required) {
+      if (required <= this.capacity) return;
+      const nextCapacity = Math.max(required, Math.ceil(this.capacity * 1.5), 256);
+      const grow = (oldArray, Type = Float32Array) => {
+        const next = new Type(nextCapacity);
+        next.set(oldArray);
+        return next;
+      };
+      this.x = grow(this.x);
+      this.y = grow(this.y);
+      this.prevX = grow(this.prevX);
+      this.prevY = grow(this.prevY);
+      this.vx = grow(this.vx);
+      this.vy = grow(this.vy);
+      this.r = grow(this.r);
+      this.invMass = grow(this.invMass);
+      this.hueSeed = grow(this.hueSeed);
+      this.pressure = grow(this.pressure);
+      this.pSmooth = grow(this.pSmooth);
+      this.pField = grow(this.pField);
+      this.pTmp = grow(this.pTmp);
+      this.pCount = grow(this.pCount);
+      this.next = grow(this.next, Int32Array);
+      this.capacity = nextCapacity;
+    }
+
+    // 'single' keeps every ball identical, which is what lets the packing
+    // settle into hexagonal crystal domains. 'mixed' spreads sizes across
+    // [radiusMin, radiusMax] and suppresses that ordering.
+    radiusBounds() {
+      if (this.settings.sizeMode !== 'mixed') {
+        const radius = Math.max(0.5, Number(this.settings.radius));
+        return { min: radius, max: radius };
+      }
+      const a = Math.max(0.5, Number(this.settings.radiusMin));
+      const b = Math.max(0.5, Number(this.settings.radiusMax));
+      return { min: Math.min(a, b), max: Math.max(a, b) };
+    }
+
+    get maxRadius() {
+      return this.radiusBounds().max;
+    }
+
+    // Sizes are spaced evenly across the range so every size in [min, max] is
+    // represented rather than clustered around a random mean. Mass scales with
+    // area (r^2), and the solver weights corrections by inverse mass.
+    refreshRadii() {
+      const { min, max } = this.radiusBounds();
+      for (let i = 0; i < this.count; i += 1) {
+        const t = this.count > 1 ? i / (this.count - 1) : 0;
+        const radius = min + (max - min) * t;
+        this.r[i] = radius;
+        this.invMass[i] = 1 / (radius * radius);
+      }
+    }
+
+    setBounds(width, height) {
+      this.width = Math.max(1, width);
+      this.height = Math.max(1, height);
+      for (let i = 0; i < this.count; i += 1) {
+        const radius = this.r[i];
+        this.x[i] = clamp(this.x[i], radius, Math.max(radius, this.width - radius));
+        this.y[i] = clamp(this.y[i], radius, Math.max(radius, this.height - radius));
+      }
+      this.resizeGrid();
+    }
+
+    // A one-ring neighbour walk only finds pairs closer than cellSize, and the
+    // widest possible contact is maxRadius * 2 — so the cell must be sized to
+    // the largest ball or big/big pairs silently miss the broadphase.
+    resizeGrid() {
+      this.cellSize = Math.max(4, this.maxRadius * 2.05);
+      this.cols = Math.max(1, Math.ceil(this.width / this.cellSize));
+      this.rows = Math.max(1, Math.ceil(this.height / this.cellSize));
+      const cells = this.cols * this.rows;
+      if (this.head.length !== cells) this.head = new Int32Array(cells);
+    }
+
+    setCount(value, initial = false) {
+      const target = clamp(Math.round(value), 1, 10000);
+      this.ensureCapacity(target);
+      const oldCount = this.count;
+      this.count = target;
+      this.refreshRadii();
+      if (target > oldCount) {
+        for (let i = oldCount; i < target; i += 1) this.spawnOne(i, initial);
+      }
+      if (this.pointer.draggedIndex >= target) this.pointer.draggedIndex = -1;
+    }
+
+    spawnOne(index, quiet = false, x = null, y = null) {
+      const radius = this.r[index];
+      const angle = Math.random() * Math.PI * 2;
+      const speed = quiet ? 40 + Math.random() * 120 : 120 + Math.random() * 440;
+      this.x[index] = x ?? (radius + Math.random() * Math.max(1, this.width - radius * 2));
+      this.y[index] = y ?? (radius + Math.random() * Math.max(1, this.height - radius * 2));
+      this.prevX[index] = this.x[index];
+      this.prevY[index] = this.y[index];
+      this.vx[index] = Math.cos(angle) * speed;
+      this.vy[index] = Math.sin(angle) * speed;
+      this.hueSeed[index] = Math.random();
+    }
+
+    spawnBurst(x = this.width * 0.5, y = this.height * 0.5, amount = 24) {
+      const old = this.count;
+      const target = Math.min(10000, old + amount);
+      this.ensureCapacity(target);
+      this.count = target;
+      this.refreshRadii();
+      for (let i = old; i < target; i += 1) {
+        const radius = this.r[i];
+        const a = Math.random() * Math.PI * 2;
+        const ring = Math.sqrt(Math.random()) * radius * 4;
+        this.spawnOne(i, false, clamp(x + Math.cos(a) * ring, radius, this.width - radius), clamp(y + Math.sin(a) * ring, radius, this.height - radius));
+        const impulse = 320 + Math.random() * 620;
+        this.vx[i] += Math.cos(a) * impulse;
+        this.vy[i] += Math.sin(a) * impulse;
+      }
+      this.settings.ballCount = this.count;
+    }
+
+    reset() {
+      for (let i = 0; i < this.count; i += 1) this.spawnOne(i, true);
+      this.gravityAngleCurrent = Number(this.settings.gravityAngle);
+      this.gravityAngleTarget = this.gravityAngleCurrent;
+      this.gravityAngleStart = this.gravityAngleCurrent;
+      this.gravityCycleElapsed = 0;
+      this.simulationTime = 0;
+    }
+
+    randomizeVelocities(scale = 1) {
+      for (let i = 0; i < this.count; i += 1) {
+        const angle = Math.random() * Math.PI * 2;
+        const speed = (80 + Math.random() * 520) * scale;
+        this.vx[i] = Math.cos(angle) * speed;
+        this.vy[i] = Math.sin(angle) * speed;
+      }
+    }
+
+    zeroVelocities() {
+      this.vx.fill(0, 0, this.count);
+      this.vy.fill(0, 0, this.count);
+    }
+
+    reseedColors() {
+      for (let i = 0; i < this.count; i += 1) this.hueSeed[i] = Math.random();
+    }
+
+    shake(strength = 800) {
+      for (let i = 0; i < this.count; i += 1) {
+        const a = Math.random() * Math.PI * 2;
+        const impulse = strength * (0.35 + Math.random() * 0.65);
+        this.vx[i] += Math.cos(a) * impulse;
+        this.vy[i] += Math.sin(a) * impulse;
+      }
+      this.pickGravityTarget(true);
+    }
+
+    pickGravityTarget(force = false) {
+      const mode = this.settings.gravityMode;
+      let target = Number(this.settings.gravityAngle);
+      if (mode === 'cardinal') {
+        const choices = [0, 90, 180, 270].filter((value) => force || Math.abs(shortestAngleDelta(this.gravityAngleTarget, value)) > 10);
+        target = choices[Math.floor(Math.random() * choices.length)] ?? target;
+      } else if (mode === 'wander') {
+        target = Math.random() * 360;
+      } else {
+        return;
+      }
+      this.gravityAngleStart = this.gravityAngleCurrent;
+      this.gravityAngleTarget = target;
+      this.gravityTransitionElapsed = 0;
+    }
+
+    updateGravity(dt) {
+      const mode = this.settings.gravityMode;
+      if (mode === 'manual') {
+        const target = Number(this.settings.gravityAngle);
+        this.gravityAngleCurrent += shortestAngleDelta(this.gravityAngleCurrent, target) * Math.min(1, dt * 10);
+      } else if (mode === 'rotate') {
+        const period = Math.max(0.25, Number(this.settings.gravityCycleTime));
+        this.gravityAngleCurrent = (this.gravityAngleCurrent + (360 / period) * dt) % 360;
+      } else if (mode === 'cardinal' || mode === 'wander') {
+        this.gravityCycleElapsed += dt;
+        if (this.gravityCycleElapsed >= Number(this.settings.gravityCycleTime)) {
+          this.gravityCycleElapsed %= Number(this.settings.gravityCycleTime);
+          this.pickGravityTarget();
+        }
+        const duration = Math.max(0.01, Number(this.settings.gravityTransitionTime));
+        this.gravityTransitionElapsed += dt;
+        const t = smoothstep(this.gravityTransitionElapsed / duration);
+        this.gravityAngleCurrent = this.gravityAngleStart + shortestAngleDelta(this.gravityAngleStart, this.gravityAngleTarget) * t;
+      } else if (mode === 'tilt' && this.tilt.available) {
+        this.gravityAngleCurrent = Math.atan2(this.tilt.y, this.tilt.x) * 180 / Math.PI;
+      }
+      this.gravityAngleCurrent = (this.gravityAngleCurrent + 360) % 360;
+    }
+
+    setTilt(x, y) {
+      const length = Math.hypot(x, y);
+      if (length < 0.05) return;
+      this.tilt.x = x / length;
+      this.tilt.y = y / length;
+      this.tilt.available = true;
+    }
+
+    pointerDown(x, y, button = 0) {
+      this.pointer.active = true;
+      this.pointer.x = x;
+      this.pointer.y = y;
+      this.pointer.previousX = x;
+      this.pointer.previousY = y;
+      this.pointer.forceSign = button === 2 ? -1 : 1;
+      this.pointer.draggedIndex = button === 0 ? this.findBall(x, y) : -1;
+    }
+
+    pointerMove(x, y) {
+      this.pointer.previousX = this.pointer.x;
+      this.pointer.previousY = this.pointer.y;
+      this.pointer.x = x;
+      this.pointer.y = y;
+    }
+
+    pointerUp() {
+      this.pointer.active = false;
+      this.pointer.draggedIndex = -1;
+    }
+
+    findBall(x, y) {
+      let best = -1;
+      let bestDistance = Infinity;
+      for (let i = 0; i < this.count; i += 1) {
+        const hit = this.r[i] * 1.6;
+        const dx = this.x[i] - x;
+        const dy = this.y[i] - y;
+        const d2 = dx * dx + dy * dy;
+        if (d2 < hit * hit && d2 < bestDistance) {
+          bestDistance = d2;
+          best = i;
+        }
+      }
+      return best;
+    }
+
+    buildGrid() {
+      if (Math.abs(this.cellSize - this.maxRadius * 2.05) > 0.25) this.resizeGrid();
+      this.head.fill(-1);
+      for (let i = 0; i < this.count; i += 1) {
+        const cx = clamp(Math.floor(this.x[i] / this.cellSize), 0, this.cols - 1);
+        const cy = clamp(Math.floor(this.y[i] / this.cellSize), 0, this.rows - 1);
+        const cell = cy * this.cols + cx;
+        this.next[i] = this.head[cell];
+        this.head[cell] = i;
+      }
+    }
+
+    applyMouseField(dt) {
+      if (!this.pointer.active || this.pointer.draggedIndex >= 0 || this.settings.mouseMode === 'off') return;
+      const radius = Number(this.settings.mouseRadius);
+      const radius2 = radius * radius;
+      const strength = Number(this.settings.mouseStrength);
+      const mode = this.pointer.forceSign < 0 ? 'repel' : this.settings.mouseMode;
+      for (let i = 0; i < this.count; i += 1) {
+        const dx = this.pointer.x - this.x[i];
+        const dy = this.pointer.y - this.y[i];
+        const d2 = dx * dx + dy * dy;
+        if (d2 > radius2 || d2 < 1) continue;
+        const distance = Math.sqrt(d2);
+        const falloff = 1 - distance / radius;
+        const nx = dx / distance;
+        const ny = dy / distance;
+        if (mode === 'vortex') {
+          this.vx[i] += -ny * strength * falloff * dt;
+          this.vy[i] += nx * strength * falloff * dt;
+        } else {
+          const sign = mode === 'repel' ? -1 : 1;
+          this.vx[i] += nx * strength * falloff * dt * sign;
+          this.vy[i] += ny * strength * falloff * dt * sign;
+        }
+      }
+    }
+
+    // Surface tension / cohesion: pull pairs together across the small gap just
+    // beyond contact so the fluid holds itself in blobs. Applied as a mass-weighted
+    // velocity impulse before integration (like the mouse field). A ±2 grid ring
+    // reliably catches near-contact pairs even for the largest balls. Costs
+    // nothing when clumpAffinity is 0. Reads pSmooth from the previous step for the
+    // density boost, so packed clusters resist tearing more than loose ones.
+    applyCohesion(dt) {
+      const affinity = Number(this.settings.clumpAffinity);
+      if (!(affinity > 0)) return;
+      this.buildGrid();
+      const range = 1.6;               // cohesion reach as a multiple of contact distance
+      const refPressure = 12;          // pSmooth scale where the density boost saturates
+      const splitEnergy = Number(this.settings.splitEnergy);
+      const cols = this.cols;
+      const rows = this.rows;
+      const cell = this.cellSize;
+      for (let i = 0; i < this.count; i += 1) {
+        const xi = this.x[i];
+        const yi = this.y[i];
+        const ri = this.r[i];
+        const wi = this.invMass[i];
+        const cx = clamp(Math.floor(xi / cell), 0, cols - 1);
+        const cy = clamp(Math.floor(yi / cell), 0, rows - 1);
+        for (let oy = -2; oy <= 2; oy += 1) {
+          const gy = cy + oy;
+          if (gy < 0 || gy >= rows) continue;
+          for (let ox = -2; ox <= 2; ox += 1) {
+            const gx = cx + ox;
+            if (gx < 0 || gx >= cols) continue;
+            let j = this.head[gy * cols + gx];
+            while (j !== -1) {
+              if (j > i) {
+                const minD = ri + this.r[j];
+                const maxD = minD * range;
+                const dx = this.x[j] - xi;
+                const dy = this.y[j] - yi;
+                const d2 = dx * dx + dy * dy;
+                if (d2 > minD * minD && d2 < maxD * maxD) {
+                  const dist = Math.sqrt(d2);
+                  const nx = dx / dist;
+                  const ny = dy / dist;
+                  // Relative NORMAL velocity, positive = separating.
+                  const rvn = (this.vx[j] - this.vx[i]) * nx + (this.vy[j] - this.vy[i]) * ny;
+                  if (rvn <= splitEnergy) {
+                    const kernel = 1 - (dist - minD) / (maxD - minD); // 1 at contact -> 0 at reach
+                    const boost = 1 + 1.5 * Math.min(1, 0.5 * (this.pSmooth[i] + this.pSmooth[j]) / refPressure);
+                    const f = affinity * kernel * boost * dt;
+                    const wj = this.invMass[j];
+                    this.vx[i] += nx * f * wi;
+                    this.vy[i] += ny * f * wi;
+                    this.vx[j] -= nx * f * wj;
+                    this.vy[j] -= ny * f * wj;
+                  }
+                }
+              }
+              j = this.next[j];
+            }
+          }
+        }
+      }
+    }
+
+    step(dt) {
+      this.simulationTime += dt;
+      this.updateGravity(dt);
+      this.applyMouseField(dt);
+      this.applyCohesion(dt);
+
+      const gravityStrength = Number(this.settings.gravityStrength);
+      const gravityRadians = this.gravityAngleCurrent * Math.PI / 180;
+      let gx = Math.cos(gravityRadians) * gravityStrength;
+      let gy = Math.sin(gravityRadians) * gravityStrength;
+      if (this.settings.gravityMode === 'tilt' && !this.tilt.available) {
+        gx = 0;
+        gy = gravityStrength;
+      }
+
+      const windRadians = Number(this.settings.windAngle) * Math.PI / 180;
+      const windStrength = Number(this.settings.windStrength);
+      const turbulence = Number(this.settings.windTurbulence);
+      const noiseX = Math.sin(this.simulationTime * 1.17) * Math.sin(this.simulationTime * 0.31 + 1.9);
+      const noiseY = Math.cos(this.simulationTime * 0.93 + 0.7) * Math.sin(this.simulationTime * 0.27);
+      const wx = Math.cos(windRadians) * windStrength + noiseX * windStrength * turbulence;
+      const wy = Math.sin(windRadians) * windStrength + noiseY * windStrength * turbulence;
+      const drag = Math.exp(-Number(this.settings.airDrag) * dt);
+
+      for (let i = 0; i < this.count; i += 1) {
+        this.prevX[i] = this.x[i];
+        this.prevY[i] = this.y[i];
+        this.vx[i] = (this.vx[i] + (gx + wx) * dt) * drag;
+        this.vy[i] = (this.vy[i] + (gy + wy) * dt) * drag;
+        this.x[i] += this.vx[i] * dt;
+        this.y[i] += this.vy[i] * dt;
+      }
+
+      const dragged = this.pointer.draggedIndex;
+      if (dragged >= 0 && dragged < this.count) {
+        const radius = this.r[dragged];
+        const dx = this.pointer.x - this.pointer.previousX;
+        const dy = this.pointer.y - this.pointer.previousY;
+        this.x[dragged] = clamp(this.pointer.x, radius, this.width - radius);
+        this.y[dragged] = clamp(this.pointer.y, radius, this.height - radius);
+        this.prevX[dragged] = this.x[dragged] - dx;
+        this.prevY[dragged] = this.y[dragged] - dy;
+      }
+
+      const iterations = Math.max(1, Math.round(Number(this.settings.solverIterations)));
+      this.contactCount = 0;
+      this.pressure.fill(0, 0, this.count);
+      for (let pass = 0; pass < iterations; pass += 1) {
+        this.solveWalls();
+        this.buildGrid();
+        this.solveContacts(dt, pass === iterations - 1);
+      }
+      this.solveWalls();
+
+      // Exponential moving average turns the spiky per-substep penetration sum
+      // into a stable per-ball load signal, so pressure-driven colour doesn't
+      // strobe. New balls start at pSmooth 0 (freshly allocated), so they ease in.
+      for (let i = 0; i < this.count; i += 1) {
+        this.pSmooth[i] = this.pSmooth[i] * 0.9 + this.pressure[i] * 0.1;
+      }
+
+      const invDt = 1 / dt;
+      const wallBounce = Number(this.settings.wallBounce);
+      for (let i = 0; i < this.count; i += 1) {
+        const radius = this.r[i];
+        this.vx[i] = (this.x[i] - this.prevX[i]) * invDt;
+        this.vy[i] = (this.y[i] - this.prevY[i]) * invDt;
+        if (this.x[i] <= radius + 0.001 && this.vx[i] < 0) this.vx[i] *= -wallBounce;
+        if (this.x[i] >= this.width - radius - 0.001 && this.vx[i] > 0) this.vx[i] *= -wallBounce;
+        if (this.y[i] <= radius + 0.001 && this.vy[i] < 0) this.vy[i] *= -wallBounce;
+        if (this.y[i] >= this.height - radius - 0.001 && this.vy[i] > 0) this.vy[i] *= -wallBounce;
+      }
+
+      this.applyContactVelocityResponse();
+
+      if (dragged >= 0 && dragged < this.count) {
+        this.vx[dragged] = (this.pointer.x - this.pointer.previousX) * invDt * 0.65;
+        this.vy[dragged] = (this.pointer.y - this.pointer.previousY) * invDt * 0.65;
+      }
+    }
+
+    solveWalls() {
+      for (let i = 0; i < this.count; i += 1) {
+        const radius = this.r[i];
+        this.x[i] = clamp(this.x[i], radius, Math.max(radius, this.width - radius));
+        this.y[i] = clamp(this.y[i], radius, Math.max(radius, this.height - radius));
+      }
+    }
+
+    forEachContact(callback) {
+      for (let i = 0; i < this.count; i += 1) {
+        const ri = this.r[i];
+        const cx = clamp(Math.floor(this.x[i] / this.cellSize), 0, this.cols - 1);
+        const cy = clamp(Math.floor(this.y[i] / this.cellSize), 0, this.rows - 1);
+        for (let oy = -1; oy <= 1; oy += 1) {
+          const ny = cy + oy;
+          if (ny < 0 || ny >= this.rows) continue;
+          for (let ox = -1; ox <= 1; ox += 1) {
+            const nx = cx + ox;
+            if (nx < 0 || nx >= this.cols) continue;
+            let j = this.head[ny * this.cols + nx];
+            while (j !== -1) {
+              if (j > i) {
+                const minDistance = ri + this.r[j];
+                const dx = this.x[j] - this.x[i];
+                const dy = this.y[j] - this.y[i];
+                const d2 = dx * dx + dy * dy;
+                if (d2 <= minDistance * minDistance * 1.002) callback(i, j, dx, dy, d2, minDistance);
+              }
+              j = this.next[j];
+            }
+          }
+        }
+      }
+    }
+
+    solveContacts(dt, countContacts) {
+      const compliance = Math.max(0, Number(this.settings.compliance));
+      const alpha = compliance / (dt * dt);
+      this.forEachContact((i, j, dx, dy, d2, minDistance) => {
+        let distance = Math.sqrt(Math.max(d2, 1e-10));
+        let nx = dx / distance;
+        let ny = dy / distance;
+        if (distance < 1e-5) {
+          const a = ((i * 12.9898 + j * 78.233) % 6.28318);
+          nx = Math.cos(a);
+          ny = Math.sin(a);
+          distance = 0;
+        }
+        const penetration = minDistance - distance;
+        // Penetration-sum is the pressure proxy: deep compression in a dense pile
+        // reads as high load, which is exactly the "tighter-packed → shared colour"
+        // signal. Accumulated across every solver pass, normalised later by the
+        // pressureScale slider (the analogue of the speed mode's fixed divisor).
+        if (penetration > 0) {
+          this.pressure[i] += penetration;
+          this.pressure[j] += penetration;
+        }
+        const correction = penetration / (2 + alpha);
+        const dragged = this.pointer.draggedIndex;
+        const wi = i === dragged ? 0 : this.invMass[i];
+        const wj = j === dragged ? 0 : this.invMass[j];
+        const weight = wi + wj;
+        if (weight <= 0) return;
+        const scale = correction / weight;
+        this.x[i] -= nx * scale * wi;
+        this.y[i] -= ny * scale * wi;
+        this.x[j] += nx * scale * wj;
+        this.y[j] += ny * scale * wj;
+        if (countContacts) this.contactCount += 1;
+      });
+    }
+
+    applyContactVelocityResponse() {
+      this.buildGrid();
+      const restitution = Number(this.settings.elasticity);
+      const viscosity = Number(this.settings.contactViscosity);
+      this.forEachContact((i, j, dx, dy, d2) => {
+        const distance = Math.sqrt(Math.max(d2, 1e-10));
+        const nx = dx / distance;
+        const ny = dy / distance;
+        const wi = this.invMass[i];
+        const wj = this.invMass[j];
+        const weight = wi + wj;
+        if (weight <= 0) return;
+        const rvx = this.vx[j] - this.vx[i];
+        const rvy = this.vy[j] - this.vy[i];
+        const normalVelocity = rvx * nx + rvy * ny;
+        if (normalVelocity < 0) {
+          const impulse = -(1 + restitution) * normalVelocity / weight;
+          this.vx[i] -= nx * impulse * wi;
+          this.vy[i] -= ny * impulse * wi;
+          this.vx[j] += nx * impulse * wj;
+          this.vy[j] += ny * impulse * wj;
+        }
+        if (viscosity > 0) {
+          const tx = -ny;
+          const ty = nx;
+          const tangentVelocity = rvx * tx + rvy * ty;
+          const tangentImpulse = tangentVelocity * viscosity / weight;
+          this.vx[i] += tx * tangentImpulse * wi;
+          this.vy[i] += ty * tangentImpulse * wi;
+          this.vx[j] -= tx * tangentImpulse * wj;
+          this.vy[j] -= ty * tangentImpulse * wj;
+        }
+      });
+    }
+
+    // Laplacian smoothing of the pressure field over the current contact graph.
+    // Each pass blends every ball toward the mean of its contacting neighbours,
+    // so a tightly packed (highly connected) clump converges to one shared value
+    // while loose balls with few contacts keep their own — that is the "more
+    // shared colour the tighter it packs" behaviour. buildGrid() first so it is
+    // always safe to call, even before the first step. Returns pField to sample.
+    diffusePressure(passes = 4, blend = 0.5) {
+      const n = this.count;
+      this.buildGrid();
+      this.pField.set(this.pSmooth.subarray(0, n));
+      for (let pass = 0; pass < passes; pass += 1) {
+        this.pTmp.fill(0, 0, n);
+        this.pCount.fill(0, 0, n);
+        this.forEachContact((i, j) => {
+          this.pTmp[i] += this.pField[j];
+          this.pTmp[j] += this.pField[i];
+          this.pCount[i] += 1;
+          this.pCount[j] += 1;
+        });
+        for (let i = 0; i < n; i += 1) {
+          const c = this.pCount[i];
+          if (c > 0) {
+            this.pField[i] = this.pField[i] * (1 - blend) + (this.pTmp[i] / c) * blend;
+          }
+        }
+      }
+      return this.pField;
+    }
+  }
+
+  root.Simulation = Simulation;
+})();
diff --git a/webgl/js/renderer.js b/webgl/js/renderer.js
new file mode 100644
index 0000000..826a533
--- /dev/null
+++ b/webgl/js/renderer.js
@@ -0,0 +1,824 @@
+(() => {
+  'use strict';
+
+  const root = window.FluidBalls = window.FluidBalls || {};
+  const { hexToRgb } = root.utils;
+
+  const BALL_VERTEX = `#version 300 es
+    precision highp float;
+    layout(location=0) in vec2 aCorner;
+    layout(location=1) in vec2 aCenter;
+    layout(location=2) in float aRadius;
+    layout(location=3) in float aHue;
+    layout(location=4) in float aEnergy;
+    layout(location=5) in float aPressure;
+    uniform vec2 uResolution;
+    uniform float uHaloScale;
+    out vec2 vLocal;
+    out float vHue;
+    out float vEnergy;
+    out float vPressure;
+    out float vScreenY;
+    void main() {
+      vec2 pixel = aCenter + aCorner * aRadius * uHaloScale;
+      vec2 clip = pixel / uResolution * 2.0 - 1.0;
+      clip.y = -clip.y;
+      gl_Position = vec4(clip, 0.0, 1.0);
+      vLocal = aCorner * uHaloScale;
+      vHue = aHue;
+      vEnergy = aEnergy;
+      vPressure = aPressure;
+      // Normalised screen Y (0 top .. 1 bottom) for light-distance falloff.
+      vScreenY = clamp(aCenter.y / uResolution.y, 0.0, 1.0);
+    }
+  `;
+
+  // Shared surface lighting, called by BOTH the lit-sphere billboards and (from
+  // Feature 3) the metaball surface pass — one material param set governs both.
+  //   model 0 = sphere: light in normal space, strip highlight in billboard xy.
+  //   model 1 = metaball: screen-space horizontal band (aquarium strip on water).
+  // Injected into each fragment shader so lighting is never inlined per-shader.
+  const LIGHTING_GLSL = `
+    uniform vec3 uLightDir;
+    uniform vec2 uHighlight;
+    uniform float uStripWidth;
+    uniform float uStripSoft;
+    uniform float uSpecPower;
+    uniform float uIor;
+    uniform float uClarity;
+    uniform float uTranslucency; // 0 opaque .. 1 see-through (real water in metaballs)
+    uniform float uLightFalloff; // how fast the light reflection dims with distance
+    uniform vec3 uTint;          // material base colour
+    uniform float uTintStrength; // 0 = dynamic hue only .. 1 = full material tint
+    uniform float uBandY;
+    uniform float uBandWidth;
+
+    // atten (0..1) scales the LIGHT-SOURCE reflection (specular + strip) by the
+    // surface's proximity to the light, so distant balls no longer mirror the
+    // strip as brightly as near ones. Body shading (ambient/diffuse/Fresnel) is
+    // left intact so nothing goes black.
+    vec3 shadeSurface(vec3 base, vec3 normal, float energy, float edgeShade, vec2 coord, float atten, int model) {
+      float diffuse = max(dot(normal, uLightDir), 0.0);
+      // Fresnel from index of refraction (Schlick): higher IOR => glassier edge.
+      float f0 = pow((uIor - 1.0) / (uIor + 1.0), 2.0);
+      float fres = f0 + (1.0 - f0) * pow(1.0 - max(normal.z, 0.0), 5.0);
+      float specular = pow(max(dot(reflect(-uLightDir, normal), vec3(0.0, 0.0, 1.0)), 0.0), uSpecPower);
+
+      // Clarity blends matte (more ambient, muted highlights) <-> glossy.
+      float ambient   = mix(0.20, 0.12, uClarity);
+      float diffuseW  = mix(0.86, 0.90, uClarity);
+      float specGain  = mix(0.55, 1.15, uClarity);
+      float fresGain  = mix(0.30, 0.95, uClarity);
+      float stripGain = mix(0.55, 0.95, uClarity);
+
+      float highlight;
+      if (model == 0) {
+        // Anisotropic strip: wide in x, tight in y. Small width = round highlight.
+        vec2 hp = coord - uHighlight;
+        float sw = max(uStripWidth, 0.02);
+        highlight = exp(-(hp.x * hp.x / (sw * sw) + hp.y * hp.y * uStripSoft));
+      } else {
+        // Screen-space horizontal band: highlight tracks blob position on screen.
+        float dy = coord.y - uBandY;
+        highlight = exp(-(dy * dy) / max(uBandWidth * uBandWidth, 1e-4));
+      }
+
+      vec3 color = base * (ambient + diffuseW * diffuse) * (0.62 + 0.38 * edgeShade);
+      color += vec3(1.0) * specular * specGain * (0.75 + energy * 0.5) * atten;
+      color += base * fres * fresGain;
+      color += vec3(1.0) * highlight * stripGain * atten;
+      color *= 0.78 + 0.35 * energy;
+      return color;
+    }
+  `;
+
+  const BALL_FRAGMENT = `#version 300 es
+    precision highp float;
+    in vec2 vLocal;
+    in float vHue;
+    in float vEnergy;
+    in float vScreenY;
+    uniform float uGlow;
+    uniform int uPass;
+    ${LIGHTING_GLSL}
+    out vec4 outColor;
+
+    vec3 hsv2rgb(vec3 c) {
+      vec3 p = abs(fract(c.xxx + vec3(0.0, 2.0/3.0, 1.0/3.0)) * 6.0 - 3.0);
+      return c.z * mix(vec3(1.0), clamp(p - 1.0, 0.0, 1.0), c.y);
+    }
+
+    void main() {
+      float d = length(vLocal);
+      if (d > 1.72) discard;
+      vec3 base = hsv2rgb(vec3(fract(vHue / 360.0), 0.82, 0.98));
+      base = mix(base, uTint, uTintStrength);
+
+      if (uPass == 1) {
+        float halo = exp(-max(d - 0.66, 0.0) * 3.8) * smoothstep(1.72, 0.72, d);
+        float core = smoothstep(1.02, 0.78, d);
+        float brightness = (0.35 + 0.65 * vEnergy) * uGlow;
+        outColor = vec4(base * (halo * brightness + core * 0.28 * brightness), halo);
+        return;
+      }
+
+      if (d > 1.02) discard;
+      float aa = fwidth(d) * 1.5;
+      float alpha = 1.0 - smoothstep(1.0 - aa, 1.0 + aa, d);
+      float z = sqrt(max(0.0, 1.0 - d * d));
+      vec3 normal = normalize(vec3(vLocal, z));
+      float edgeShade = smoothstep(1.0, 0.2, d);
+      // Light-distance falloff: the strip reflection dims with a ball's screen
+      // distance from the light height. uLightFalloff 0 => uniform (old look).
+      float atten = exp(-uLightFalloff * abs(vScreenY - uBandY));
+      vec3 color = shadeSurface(base, normal, vEnergy, edgeShade, vLocal, atten, 0);
+      // Glassy translucency: the sphere centre (z~1, facing us) transmits, the
+      // grazing edge (z~0) stays opaque. Default 0 keeps balls fully opaque;
+      // real thickness-absorbed water arrives with the metaball surface pass.
+      alpha *= 1.0 - 0.7 * uTranslucency * pow(max(z, 0.0), 1.3);
+      outColor = vec4(color * alpha, alpha);
+    }
+  `;
+
+  const FULLSCREEN_VERTEX = `#version 300 es
+    precision highp float;
+    layout(location=0) in vec2 aPosition;
+    out vec2 vUv;
+    void main() {
+      vUv = aPosition * 0.5 + 0.5;
+      gl_Position = vec4(aPosition, 0.0, 1.0);
+    }
+  `;
+
+  const FEEDBACK_FRAGMENT = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    uniform sampler2D uPrevious;
+    uniform sampler2D uScene;
+    uniform float uPersistence;
+    uniform vec3 uBackground;
+    out vec4 outColor;
+    void main() {
+      vec3 previous = texture(uPrevious, vUv).rgb;
+      vec4 scene = texture(uScene, vUv);
+      vec3 faded = max(previous - uBackground * (1.0 - uPersistence) * 0.02, vec3(0.0));
+      vec3 color = faded * uPersistence + scene.rgb;
+      outColor = vec4(color, 1.0);
+    }
+  `;
+
+  const BLUR_FRAGMENT = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    uniform sampler2D uTexture;
+    uniform vec2 uTexelStep;
+    out vec4 outColor;
+    void main() {
+      vec3 color = texture(uTexture, vUv).rgb * 0.227027;
+      color += texture(uTexture, vUv + uTexelStep * 1.384615).rgb * 0.316216;
+      color += texture(uTexture, vUv - uTexelStep * 1.384615).rgb * 0.316216;
+      color += texture(uTexture, vUv + uTexelStep * 3.230769).rgb * 0.070270;
+      color += texture(uTexture, vUv - uTexelStep * 3.230769).rgb * 0.070270;
+      outColor = vec4(color, 1.0);
+    }
+  `;
+
+  const COMPOSITE_FRAGMENT = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    uniform sampler2D uHistory;
+    uniform sampler2D uBloom;
+    uniform vec3 uBackground;
+    uniform float uBloomStrength;
+    uniform float uExposure;
+    uniform bool uVignette;
+    out vec4 outColor;
+    void main() {
+      vec3 color = texture(uHistory, vUv).rgb + texture(uBloom, vUv).rgb * uBloomStrength;
+      color += uBackground;
+      color = vec3(1.0) - exp(-color * uExposure);
+      if (uVignette) {
+        vec2 q = vUv * 2.0 - 1.0;
+        float vignette = smoothstep(1.45, 0.28, dot(q, q));
+        color *= 0.68 + 0.32 * vignette;
+      }
+      outColor = vec4(color, 1.0);
+    }
+  `;
+
+  // Metaball field runs at 1/FIELD_DIV resolution then upsamples — cheaper and
+  // reads more liquid. Single constant so full-res is a one-line change.
+  const FIELD_DIV = 2;
+
+  // Field pass: reuse the ball vertex shader; additively splat each ball's smooth
+  // radial kernel into a float target. RGB = ball colour premultiplied by the
+  // kernel, A = kernel sum (the field / thickness). Overlapping balls sum, which
+  // is what fuses them. u = |vLocal| / uFieldRadius is independent of pixel size.
+  const FIELD_FRAGMENT = `#version 300 es
+    precision highp float;
+    in vec2 vLocal;
+    in float vHue;
+    uniform float uFieldRadius;
+    uniform vec3 uTint;
+    uniform float uTintStrength;
+    out vec4 outColor;
+    vec3 hsv2rgb(vec3 c) {
+      vec3 p = abs(fract(c.xxx + vec3(0.0, 2.0/3.0, 1.0/3.0)) * 6.0 - 3.0);
+      return c.z * mix(vec3(1.0), clamp(p - 1.0, 0.0, 1.0), c.y);
+    }
+    void main() {
+      float u = length(vLocal) / uFieldRadius;
+      if (u >= 1.0) discard;
+      float fall = 1.0 - u * u;
+      fall = fall * fall * fall;
+      vec3 base = hsv2rgb(vec3(fract(vHue / 360.0), 0.82, 0.98));
+      base = mix(base, uTint, uTintStrength);
+      outColor = vec4(base * fall, fall);
+    }
+  `;
+
+  // Surface pass: threshold the field into a fused iso-surface, reconstruct the
+  // normal from the field gradient, and light it with the SHARED shadeSurface
+  // (model 1 = screen-space band). Translucency turns it into thickness-graded
+  // water: thin iso edges read see-through, deep interior stays opaque.
+  const SURFACE_FRAGMENT = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    uniform sampler2D uField;
+    uniform vec2 uFieldTexel;
+    uniform float uThreshold;
+    uniform float uEdge;
+    uniform float uSpecFusion; // normal-sampling radius (texels): fuses per-ball glints
+    uniform float uMaxLod;     // clamp: 0 if field mipmaps are unavailable on this GPU
+    ${LIGHTING_GLSL}
+    out vec4 outColor;
+    void main() {
+      vec4 f = textureLod(uField, vUv, 0.0);
+      float field = f.a;
+      float mask = smoothstep(uThreshold - uEdge, uThreshold + uEdge, field);
+      if (mask <= 0.001) { outColor = vec4(0.0); return; }
+      vec3 blob = field > 1e-4 ? f.rgb / field : vec3(0.0);
+
+      // Normal from a MIP level of the field — a true hardware low-pass. Raising
+      // Specular fusion blurs the per-ball bumps away instead of undersampling
+      // them into speckle (which is what the old wide Sobel did — the dark dots).
+      // The silhouette/threshold above stays on mip 0, so blob edges keep crisp
+      // while only the shading normal smooths. Y is screen-down-positive to match
+      // the lit-sphere light convention.
+      float fuse = max(uSpecFusion, 1.0);
+      float lod = min(log2(fuse), uMaxLod);
+      vec2 off = uFieldTexel * fuse;
+      float l  = textureLod(uField, vUv - vec2(off.x, 0.0), lod).a;
+      float r  = textureLod(uField, vUv + vec2(off.x, 0.0), lod).a;
+      float dn = textureLod(uField, vUv - vec2(0.0, off.y), lod).a;
+      float up = textureLod(uField, vUv + vec2(0.0, off.y), lod).a;
+      vec3 normal = normalize(vec3(l - r, up - dn, 1.2));
+
+      // Screen coords with top = 0 to match the light-height / band convention.
+      vec2 screen = vec2(vUv.x, 1.0 - vUv.y);
+      float atten = exp(-uLightFalloff * abs(screen.y - uBandY));
+      vec3 color = shadeSurface(blob, normal, 0.35, mask, screen, atten, 1);
+
+      // Thickness-graded translucency: thin edges transmit, deep interior opaque.
+      float deep = 1.0 - exp(-max(field - uThreshold, 0.0) * 0.8);
+      float a = mask * mix(1.0, 0.25 + 0.75 * deep, uTranslucency);
+      outColor = vec4(color * a, a);
+    }
+  `;
+
+  class WebGLRenderer {
+    constructor(canvas, settings) {
+      this.canvas = canvas;
+      this.settings = settings;
+      this.gl = canvas.getContext('webgl2', {
+        alpha: false,
+        antialias: false,
+        depth: false,
+        stencil: false,
+        preserveDrawingBuffer: true,
+        powerPreference: 'high-performance'
+      });
+      if (!this.gl) throw new Error('WebGL 2 is unavailable in this browser or GPU configuration.');
+
+      this.floatTargets = Boolean(
+        this.gl.getExtension('EXT_color_buffer_float') &&
+        this.gl.getExtension('OES_texture_float_linear')
+      );
+      this.maxInstances = 0;
+      this.instanceData = new Float32Array(0);
+      this.pixelRatio = 1;
+      this.width = 1;
+      this.height = 1;
+      this.historyIndex = 0;
+      this.contextLost = false;
+      this.targets = null;
+
+      canvas.addEventListener('webglcontextlost', (event) => this.onContextLost(event), false);
+      canvas.addEventListener('webglcontextrestored', () => this.onContextRestored(), false);
+
+      this.createResources();
+    }
+
+    // Without preventDefault() the browser never fires webglcontextrestored.
+    onContextLost(event) {
+      event.preventDefault();
+      this.contextLost = true;
+      this.targets = null;
+      this.maxInstances = 0;
+      this.instanceData = new Float32Array(0);
+      const reason = event.statusMessage || '(no status message)';
+      console.error('[FluidBalls] WebGL context lost — rendering halted.', reason);
+      this.canvas.dispatchEvent(new CustomEvent('fluidballs:contextlost', { detail: { reason } }));
+    }
+
+    onContextRestored() {
+      console.warn('[FluidBalls] WebGL context restored — rebuilding GPU resources.');
+      try {
+        this.floatTargets = Boolean(
+          this.gl.getExtension('EXT_color_buffer_float') &&
+          this.gl.getExtension('OES_texture_float_linear')
+        );
+        this.createResources();
+        this.contextLost = false;
+        console.info('[FluidBalls] WebGL resources rebuilt; rendering resumed.');
+        this.canvas.dispatchEvent(new CustomEvent('fluidballs:contextrestored'));
+      } catch (error) {
+        console.error('[FluidBalls] Could not rebuild WebGL resources after restore.', error);
+        this.canvas.dispatchEvent(new CustomEvent('fluidballs:contextlost', { detail: { reason: error.message } }));
+      }
+    }
+
+    // Every program, buffer, texture and framebuffer dies with the context,
+    // so restore has to run the same setup the constructor does.
+    createResources() {
+      this.ballProgram = this.createProgram(BALL_VERTEX, BALL_FRAGMENT);
+      this.fieldProgram = this.createProgram(BALL_VERTEX, FIELD_FRAGMENT);
+      this.surfaceProgram = this.createProgram(FULLSCREEN_VERTEX, SURFACE_FRAGMENT);
+      this.feedbackProgram = this.createProgram(FULLSCREEN_VERTEX, FEEDBACK_FRAGMENT);
+      this.blurProgram = this.createProgram(FULLSCREEN_VERTEX, BLUR_FRAGMENT);
+      this.compositeProgram = this.createProgram(FULLSCREEN_VERTEX, COMPOSITE_FRAGMENT);
+      this.createGeometry();
+      this.targets = null;
+      this.resize();
+    }
+
+    get gpuDescription() {
+      const gl = this.gl;
+      const debug = gl.getExtension('WEBGL_debug_renderer_info');
+      if (!debug) return this.floatTargets ? 'WebGL2 · HDR targets' : 'WebGL2 · RGBA8 targets';
+      const name = gl.getParameter(debug.UNMASKED_RENDERER_WEBGL);
+      return `${name} · ${this.floatTargets ? 'HDR' : 'RGBA8'}`;
+    }
+
+    compileShader(type, source) {
+      const gl = this.gl;
+      const shader = gl.createShader(type);
+      gl.shaderSource(shader, source);
+      gl.compileShader(shader);
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const message = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error(`Shader compilation failed:\n${message}`);
+      }
+      return shader;
+    }
+
+    createProgram(vertexSource, fragmentSource) {
+      const gl = this.gl;
+      const program = gl.createProgram();
+      const vertex = this.compileShader(gl.VERTEX_SHADER, vertexSource);
+      const fragment = this.compileShader(gl.FRAGMENT_SHADER, fragmentSource);
+      gl.attachShader(program, vertex);
+      gl.attachShader(program, fragment);
+      gl.linkProgram(program);
+      gl.deleteShader(vertex);
+      gl.deleteShader(fragment);
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const message = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        throw new Error(`Program linking failed:\n${message}`);
+      }
+      return program;
+    }
+
+    createGeometry() {
+      const gl = this.gl;
+      this.ballVao = gl.createVertexArray();
+      gl.bindVertexArray(this.ballVao);
+
+      const corners = new Float32Array([
+        -1, -1, 1, -1, -1, 1,
+        -1, 1, 1, -1, 1, 1
+      ]);
+      const quadBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, corners, gl.STATIC_DRAW);
+      gl.enableVertexAttribArray(0);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+      this.instanceBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.instanceBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, 4, gl.DYNAMIC_DRAW);
+      // 6 floats/instance: center.xy, radius, hue, energy, pressure. The pressure
+      // slot is packed once here (Feature 1) so the metaball field pass (Feature
+      // 3) can read per-ball load without a second stride change.
+      const stride = 6 * 4;
+      gl.enableVertexAttribArray(1);
+      gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 0);
+      gl.vertexAttribDivisor(1, 1);
+      gl.enableVertexAttribArray(2);
+      gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, 2 * 4);
+      gl.vertexAttribDivisor(2, 1);
+      gl.enableVertexAttribArray(3);
+      gl.vertexAttribPointer(3, 1, gl.FLOAT, false, stride, 3 * 4);
+      gl.vertexAttribDivisor(3, 1);
+      gl.enableVertexAttribArray(4);
+      gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, 4 * 4);
+      gl.vertexAttribDivisor(4, 1);
+      gl.enableVertexAttribArray(5);
+      gl.vertexAttribPointer(5, 1, gl.FLOAT, false, stride, 5 * 4);
+      gl.vertexAttribDivisor(5, 1);
+      gl.bindVertexArray(null);
+
+      this.fullscreenVao = gl.createVertexArray();
+      gl.bindVertexArray(this.fullscreenVao);
+      const fullscreenBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, fullscreenBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]), gl.STATIC_DRAW);
+      gl.enableVertexAttribArray(0);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+      gl.bindVertexArray(null);
+    }
+
+    createTarget(width, height, mipmap = false) {
+      const gl = this.gl;
+      const texture = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      // Mipmapped targets (the metaball field) feed textureLod-based normal
+      // smoothing; everything else stays plain LINEAR.
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, mipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      const internalFormat = this.floatTargets ? gl.RGBA16F : gl.RGBA8;
+      const type = this.floatTargets ? gl.HALF_FLOAT : gl.UNSIGNED_BYTE;
+      gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, width, height, 0, gl.RGBA, type, null);
+      const framebuffer = gl.createFramebuffer();
+      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+      if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+        throw new Error('Unable to create a WebGL render target.');
+      }
+      return { texture, framebuffer, width, height };
+    }
+
+    // Multisampled colour renderbuffer for the lit-sphere pass; resolved into the
+    // scene texture with blitFramebuffer. Returns null if this GPU can't do MSAA at
+    // the chosen format (float MSAA is the shaky case), so the caller falls back to
+    // direct rendering. Tries 4x then 2x samples.
+    createMultisampleTarget(width, height) {
+      const gl = this.gl;
+      const format = this.floatTargets ? gl.RGBA16F : gl.RGBA8;
+      const maxSamples = gl.getParameter(gl.MAX_SAMPLES);
+      for (const want of [4, 2]) {
+        const samples = Math.min(want, maxSamples);
+        if (samples < 2) break;
+        const renderbuffer = gl.createRenderbuffer();
+        gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
+        gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, format, width, height);
+        const framebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, renderbuffer);
+        const complete = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        if (complete) return { framebuffer, renderbuffer, width, height, samples };
+        gl.deleteRenderbuffer(renderbuffer);
+        gl.deleteFramebuffer(framebuffer);
+      }
+      return null;
+    }
+
+    destroyTargets() {
+      if (!this.targets) return;
+      const gl = this.gl;
+      Object.values(this.targets).flatMap((value) => Array.isArray(value) ? value : [value]).forEach((target) => {
+        if (!target) return;
+        if (target.texture) gl.deleteTexture(target.texture);
+        if (target.renderbuffer) gl.deleteRenderbuffer(target.renderbuffer);
+        gl.deleteFramebuffer(target.framebuffer);
+      });
+      this.targets = null;
+    }
+
+    resize() {
+      const maxPixelRatio = window.innerWidth < 700 ? 1.5 : 2;
+      this.pixelRatio = Math.min(window.devicePixelRatio || 1, maxPixelRatio);
+      const displayWidth = Math.max(1, Math.floor(this.canvas.clientWidth * this.pixelRatio));
+      const displayHeight = Math.max(1, Math.floor(this.canvas.clientHeight * this.pixelRatio));
+      if (this.canvas.width === displayWidth && this.canvas.height === displayHeight && this.targets) return false;
+      this.canvas.width = displayWidth;
+      this.canvas.height = displayHeight;
+      this.width = displayWidth;
+      this.height = displayHeight;
+      this.destroyTargets();
+      const bloomWidth = Math.max(1, Math.floor(displayWidth * 0.5));
+      const bloomHeight = Math.max(1, Math.floor(displayHeight * 0.5));
+      const fieldWidth = Math.max(1, Math.floor(displayWidth / FIELD_DIV));
+      const fieldHeight = Math.max(1, Math.floor(displayHeight / FIELD_DIV));
+      this.targets = {
+        scene: this.createTarget(displayWidth, displayHeight),
+        sceneMs: this.createMultisampleTarget(displayWidth, displayHeight),
+        field: this.createTarget(fieldWidth, fieldHeight, true),
+        history: [this.createTarget(displayWidth, displayHeight), this.createTarget(displayWidth, displayHeight)],
+        bloom: [this.createTarget(bloomWidth, bloomHeight), this.createTarget(bloomWidth, bloomHeight)]
+      };
+      this.fieldMips = this.probeMipmap(this.targets.field);
+      this.historyIndex = 0;
+      this.clearHistory();
+      return true;
+    }
+
+    // Some GPUs/drivers refuse generateMipmap on RGBA16F. Probe once per target
+    // build; if it errors, drop the field back to plain LINEAR and signal the
+    // shader (uMaxLod 0) so it samples mip 0 instead of a black incomplete mip.
+    probeMipmap(target) {
+      const gl = this.gl;
+      gl.bindTexture(gl.TEXTURE_2D, target.texture);
+      while (gl.getError() !== gl.NO_ERROR) { /* drain */ }
+      gl.generateMipmap(gl.TEXTURE_2D);
+      const ok = gl.getError() === gl.NO_ERROR;
+      if (!ok) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      return ok;
+    }
+
+    clearTarget(target, color = [0, 0, 0, 0]) {
+      const gl = this.gl;
+      gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
+      gl.viewport(0, 0, target.width, target.height);
+      gl.clearColor(color[0], color[1], color[2], color[3]);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+
+    clearHistory() {
+      if (!this.targets) return;
+      this.clearTarget(this.targets.history[0]);
+      this.clearTarget(this.targets.history[1]);
+      this.clearTarget(this.targets.scene);
+      this.clearTarget(this.targets.bloom[0]);
+      this.clearTarget(this.targets.bloom[1]);
+      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+    }
+
+    ensureInstanceCapacity(count) {
+      if (count <= this.maxInstances) return;
+      this.maxInstances = Math.max(count, Math.ceil(this.maxInstances * 1.5), 512);
+      this.instanceData = new Float32Array(this.maxInstances * 6);
+      const gl = this.gl;
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.instanceBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, this.instanceData.byteLength, gl.DYNAMIC_DRAW);
+    }
+
+    updateInstances(simulation, timeSeconds) {
+      this.ensureInstanceCapacity(simulation.count);
+      const mode = this.settings.colorMode;
+      const baseHue = Number(this.settings.baseHue);
+      const hueSpread = Number(this.settings.hueSpread);
+      const cycle = timeSeconds * Number(this.settings.colorSpeed);
+      // Pressure mode samples the physics load field. Diffusion (on by default)
+      // averages it over the contact graph so packed clumps share one colour;
+      // turned off, each ball maps its own load independently (more legible).
+      const pressureField = mode === 'pressure'
+        ? (this.settings.pressureDiffuse ? simulation.diffusePressure() : simulation.pSmooth)
+        : null;
+      const pressureScale = Math.max(0.001, Number(this.settings.pressureScale));
+      for (let i = 0; i < simulation.count; i += 1) {
+        const offset = i * 6;
+        const speed = Math.hypot(simulation.vx[i], simulation.vy[i]);
+        let energy = Math.min(1.5, speed / 900);
+        let hue = baseHue;
+        if (mode === 'cycle') hue += simulation.hueSeed[i] * hueSpread + cycle;
+        else if (mode === 'speed') hue += Math.min(1, speed / 1100) * hueSpread + cycle * 0.2;
+        else if (mode === 'direction') hue += ((Math.atan2(simulation.vy[i], simulation.vx[i]) / Math.PI + 1) * 0.5) * hueSpread + cycle * 0.15;
+        else if (mode === 'pressure') {
+          const load = Math.min(1, pressureField[i] / pressureScale);
+          hue += load * hueSpread + cycle * 0.15;
+          // Let dense regions read as hot: lift brightness with load so a packed
+          // pile glows rather than just shifting hue. Velocity energy still wins
+          // when a ball is both fast and loaded.
+          energy = Math.max(energy, 0.28 + 0.72 * load);
+        }
+        else hue += cycle;
+        this.instanceData[offset] = simulation.x[i] * this.pixelRatio;
+        this.instanceData[offset + 1] = simulation.y[i] * this.pixelRatio;
+        this.instanceData[offset + 2] = simulation.r[i] * this.pixelRatio;
+        this.instanceData[offset + 3] = ((hue % 360) + 360) % 360;
+        this.instanceData[offset + 4] = energy;
+        // Cheap independent per-ball load [0,1] for the GPU (metaball field pass).
+        // Always packed — diffusion stays CPU-side and strictly opt-in.
+        this.instanceData[offset + 5] = Math.min(1, simulation.pSmooth[i] / pressureScale);
+      }
+      const gl = this.gl;
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.instanceBuffer);
+      gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.instanceData.subarray(0, simulation.count * 6));
+    }
+
+    drawBalls(target, count, pass) {
+      const gl = this.gl;
+      gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
+      gl.viewport(0, 0, target.width, target.height);
+      gl.useProgram(this.ballProgram);
+      gl.bindVertexArray(this.ballVao);
+      gl.uniform2f(gl.getUniformLocation(this.ballProgram, 'uResolution'), this.width, this.height);
+      gl.uniform1f(gl.getUniformLocation(this.ballProgram, 'uHaloScale'), pass === 1 ? 1.72 : 1.04);
+      gl.uniform1f(gl.getUniformLocation(this.ballProgram, 'uGlow'), Number(this.settings.glow));
+      gl.uniform1i(gl.getUniformLocation(this.ballProgram, 'uPass'), pass);
+      this.setMaterialUniforms(this.ballProgram);
+
+      gl.enable(gl.BLEND);
+      if (pass === 1) gl.blendFunc(gl.ONE, gl.ONE);
+      else gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, count);
+      gl.disable(gl.BLEND);
+      gl.bindVertexArray(null);
+    }
+
+    // The one material param set (light + IOR/clarity/softness/translucency/band/
+    // falloff), shared by the ball shader and the metaball surface pass so both
+    // are lit identically. Light angle drives the diffuse direction (fixed
+    // elevation matching the original constant) and the strip-highlight centre.
+    setMaterialUniforms(program) {
+      const gl = this.gl;
+      const s = this.settings;
+      const a = Number(s.lightAngle) * Math.PI / 180;
+      const lx = Math.cos(a) * 0.737;
+      const ly = Math.sin(a) * 0.737;
+      const il = 1 / Math.hypot(lx, ly, 0.86);
+      gl.uniform3f(gl.getUniformLocation(program, 'uLightDir'), lx * il, ly * il, 0.86 * il);
+      gl.uniform2f(gl.getUniformLocation(program, 'uHighlight'), Math.cos(a) * 0.45, Math.sin(a) * 0.45);
+      const soft = Number(s.lightSoftness);
+      gl.uniform1f(gl.getUniformLocation(program, 'uStripWidth'), Number(s.lightWidth));
+      gl.uniform1f(gl.getUniformLocation(program, 'uStripSoft'), 60 - 40 * soft);
+      gl.uniform1f(gl.getUniformLocation(program, 'uSpecPower'), 90 - 74 * soft);
+      gl.uniform1f(gl.getUniformLocation(program, 'uIor'), Number(s.ior));
+      gl.uniform1f(gl.getUniformLocation(program, 'uClarity'), Number(s.clarity));
+      gl.uniform1f(gl.getUniformLocation(program, 'uTranslucency'), Number(s.translucency));
+      gl.uniform1f(gl.getUniformLocation(program, 'uLightFalloff'), Number(s.lightFalloff));
+      const tint = hexToRgb(s.tintColor);
+      gl.uniform3f(gl.getUniformLocation(program, 'uTint'), tint[0], tint[1], tint[2]);
+      gl.uniform1f(gl.getUniformLocation(program, 'uTintStrength'), Number(s.tintStrength));
+      gl.uniform1f(gl.getUniformLocation(program, 'uBandY'), Number(s.bandPosition));
+      gl.uniform1f(gl.getUniformLocation(program, 'uBandWidth'), Number(s.bandWidth));
+    }
+
+    // Metaball field pass: additively splat every ball's smooth kernel into the
+    // half-res float field target. Reuses the ball VAO/instance buffer and vertex
+    // shader; uResolution stays full-res so clip positions are correct while the
+    // smaller viewport does the downsampling.
+    drawField(count) {
+      const gl = this.gl;
+      const field = this.targets.field;
+      const radius = Number(this.settings.fieldRadius);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, field.framebuffer);
+      gl.viewport(0, 0, field.width, field.height);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.useProgram(this.fieldProgram);
+      gl.bindVertexArray(this.ballVao);
+      gl.uniform2f(gl.getUniformLocation(this.fieldProgram, 'uResolution'), this.width, this.height);
+      gl.uniform1f(gl.getUniformLocation(this.fieldProgram, 'uHaloScale'), radius);
+      gl.uniform1f(gl.getUniformLocation(this.fieldProgram, 'uFieldRadius'), radius);
+      const tint = hexToRgb(this.settings.tintColor);
+      gl.uniform3f(gl.getUniformLocation(this.fieldProgram, 'uTint'), tint[0], tint[1], tint[2]);
+      gl.uniform1f(gl.getUniformLocation(this.fieldProgram, 'uTintStrength'), Number(this.settings.tintStrength));
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.ONE, gl.ONE);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, count);
+      gl.disable(gl.BLEND);
+      gl.bindVertexArray(null);
+    }
+
+    // Metaball surface pass: threshold the field into a lit, fused iso-surface.
+    drawSurface() {
+      const gl = this.gl;
+      const field = this.targets.field;
+      this.drawFullscreen(this.surfaceProgram, this.targets.scene, (program) => {
+        this.bindTexture(program, 'uField', 0, field.texture);
+        gl.uniform2f(gl.getUniformLocation(program, 'uFieldTexel'), 1 / field.width, 1 / field.height);
+        gl.uniform1f(gl.getUniformLocation(program, 'uThreshold'), Number(this.settings.fusionThreshold));
+        gl.uniform1f(gl.getUniformLocation(program, 'uEdge'), Number(this.settings.edgeSoftness));
+        gl.uniform1f(gl.getUniformLocation(program, 'uSpecFusion'), Math.max(1, Number(this.settings.specFusion)));
+        gl.uniform1f(gl.getUniformLocation(program, 'uMaxLod'), this.fieldMips ? 16 : 0);
+        this.setMaterialUniforms(program);
+      });
+    }
+
+    bindTexture(program, uniformName, unit, texture) {
+      const gl = this.gl;
+      gl.activeTexture(gl.TEXTURE0 + unit);
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      gl.uniform1i(gl.getUniformLocation(program, uniformName), unit);
+    }
+
+    drawFullscreen(program, target, configure) {
+      const gl = this.gl;
+      gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.framebuffer : null);
+      gl.viewport(0, 0, target ? target.width : this.width, target ? target.height : this.height);
+      gl.useProgram(program);
+      gl.bindVertexArray(this.fullscreenVao);
+      configure?.(program);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+      gl.bindVertexArray(null);
+    }
+
+    render(simulation, timeSeconds) {
+      if (this.contextLost) return;
+      this.resize();
+      this.updateInstances(simulation, timeSeconds);
+      const gl = this.gl;
+      const [r, g, b] = hexToRgb(this.settings.backgroundColor);
+
+      const metaball = this.settings.renderMode === 'metaball';
+      this.clearTarget(this.targets.scene);
+      if (metaball) {
+        this.drawField(simulation.count);
+        // Build the field mip chain: the surface pass reads the normal from a mip
+        // level so widening Specular fusion low-passes the per-ball bumps away
+        // instead of undersampling them into speckle. Skipped if the GPU rejected
+        // float mipmaps (probe) — the shader then clamps to mip 0.
+        if (this.fieldMips) {
+          gl.bindTexture(gl.TEXTURE_2D, this.targets.field.texture);
+          gl.generateMipmap(gl.TEXTURE_2D);
+        }
+        this.drawSurface();
+      } else if (this.settings.msaa && this.targets.sceneMs) {
+        // Lit spheres into the multisampled buffer, then blit-resolve into the
+        // scene texture the rest of the pipeline reads. Only sphere mode needs
+        // this — the metaball iso edge is already smoothstep-antialiased.
+        const ms = this.targets.sceneMs;
+        this.clearTarget(ms);
+        this.drawBalls(ms, simulation.count, 0);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, ms.framebuffer);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.targets.scene.framebuffer);
+        gl.blitFramebuffer(0, 0, ms.width, ms.height, 0, 0, this.targets.scene.width, this.targets.scene.height, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      } else {
+        this.drawBalls(this.targets.scene, simulation.count, 0);
+      }
+
+      // Bloom is decoupled from render mode: sphere mode redraws additive ball
+      // halos as the source; metaball mode has no halos, so it seeds from the
+      // blob scene. The on/off toggle is identical in both.
+      const bloomEnabled = Boolean(this.settings.bloomEnabled) && Number(this.settings.bloomStrength) > 0;
+      if (bloomEnabled) {
+        this.clearTarget(this.targets.bloom[0]);
+        if (metaball) {
+          this.drawFullscreen(this.blurProgram, this.targets.bloom[0], (program) => {
+            this.bindTexture(program, 'uTexture', 0, this.targets.scene.texture);
+            gl.uniform2f(gl.getUniformLocation(program, 'uTexelStep'), 1 / this.targets.bloom[0].width, 0);
+          });
+        } else {
+          this.drawBalls(this.targets.bloom[0], simulation.count, 1);
+        }
+        for (let iteration = 0; iteration < 2; iteration += 1) {
+          this.drawFullscreen(this.blurProgram, this.targets.bloom[1], (program) => {
+            this.bindTexture(program, 'uTexture', 0, this.targets.bloom[0].texture);
+            gl.uniform2f(gl.getUniformLocation(program, 'uTexelStep'), 1 / this.targets.bloom[0].width, 0);
+          });
+          this.drawFullscreen(this.blurProgram, this.targets.bloom[0], (program) => {
+            this.bindTexture(program, 'uTexture', 0, this.targets.bloom[1].texture);
+            gl.uniform2f(gl.getUniformLocation(program, 'uTexelStep'), 0, 1 / this.targets.bloom[1].height);
+          });
+        }
+      } else {
+        this.clearTarget(this.targets.bloom[0]);
+      }
+
+      const previous = this.targets.history[this.historyIndex];
+      const current = this.targets.history[1 - this.historyIndex];
+      this.drawFullscreen(this.feedbackProgram, current, (program) => {
+        this.bindTexture(program, 'uPrevious', 0, previous.texture);
+        this.bindTexture(program, 'uScene', 1, this.targets.scene.texture);
+        gl.uniform1f(gl.getUniformLocation(program, 'uPersistence'), Number(this.settings.trailPersistence));
+        gl.uniform3f(gl.getUniformLocation(program, 'uBackground'), r, g, b);
+      });
+      this.historyIndex = 1 - this.historyIndex;
+
+      this.drawFullscreen(this.compositeProgram, null, (program) => {
+        this.bindTexture(program, 'uHistory', 0, current.texture);
+        this.bindTexture(program, 'uBloom', 1, this.targets.bloom[0].texture);
+        gl.uniform3f(gl.getUniformLocation(program, 'uBackground'), r, g, b);
+        gl.uniform1f(gl.getUniformLocation(program, 'uBloomStrength'), bloomEnabled ? Number(this.settings.bloomStrength) : 0);
+        gl.uniform1f(gl.getUniformLocation(program, 'uExposure'), Number(this.settings.exposure));
+        gl.uniform1i(gl.getUniformLocation(program, 'uVignette'), this.settings.vignette ? 1 : 0);
+      });
+    }
+
+    screenshot() {
+      return new Promise((resolve, reject) => {
+        this.canvas.toBlob((blob) => blob ? resolve(blob) : reject(new Error('Screenshot capture failed.')), 'image/png');
+      });
+    }
+  }
+
+  root.WebGLRenderer = WebGLRenderer;
+})();
diff --git a/webgl/js/ui.js b/webgl/js/ui.js
new file mode 100644
index 0000000..320d7ea
--- /dev/null
+++ b/webgl/js/ui.js
@@ -0,0 +1,156 @@
+(() => {
+  'use strict';
+
+  const root = window.FluidBalls = window.FluidBalls || {};
+
+  class UI {
+    constructor(settings, callbacks) {
+      this.settings = settings;
+      this.callbacks = callbacks;
+      this.elementsBySetting = new Map();
+      this.toastTimer = 0;
+      this.bindSettings();
+      this.bindButtons();
+      this.syncAll();
+    }
+
+    bindSettings() {
+      document.querySelectorAll('[data-setting]').forEach((element) => {
+        const key = element.dataset.setting;
+        if (!this.elementsBySetting.has(key)) this.elementsBySetting.set(key, []);
+        this.elementsBySetting.get(key).push(element);
+        const eventName = element.type === 'range' ? 'input' : 'change';
+        element.addEventListener(eventName, () => {
+          let value;
+          if (element.type === 'checkbox') value = element.checked;
+          else if (element.type === 'number' || element.type === 'range') value = Number(element.value);
+          else value = element.value;
+          this.settings[key] = value;
+          this.syncSetting(key, element);
+          if (key === 'sizeMode') this.syncSizeMode();
+          if (key === 'colorMode') this.syncColorMode();
+          if (key === 'renderMode') this.syncRenderMode();
+          this.callbacks.onSettingChanged?.(key, value);
+        });
+        if (element.type === 'number') {
+          element.addEventListener('input', () => {
+            if (element.value === '' || !Number.isFinite(Number(element.value))) return;
+            this.settings[key] = Number(element.value);
+            this.syncSetting(key, element);
+            this.callbacks.onSettingChanged?.(key, Number(element.value));
+          });
+        }
+      });
+    }
+
+    bindButtons() {
+      const bind = (id, fn) => document.getElementById(id)?.addEventListener('click', fn);
+      bind('pauseButton', () => this.callbacks.onPause?.());
+      bind('stepButton', () => this.callbacks.onStep?.());
+      bind('shakeButton', () => this.callbacks.onShake?.());
+      bind('resetButton', () => this.callbacks.onReset?.());
+      bind('randomizeButton', () => this.callbacks.onRandomize?.());
+      bind('zeroVelocityButton', () => this.callbacks.onZeroVelocity?.());
+      bind('reseedColorButton', () => this.callbacks.onReseedColors?.());
+      bind('clearTrailsButton', () => this.callbacks.onClearTrails?.());
+      bind('spawnButton', () => this.callbacks.onSpawn?.());
+      bind('screenshotButton', () => this.callbacks.onScreenshot?.());
+      bind('recordButton', () => this.callbacks.onRecord?.());
+      bind('fullscreenButton', () => this.callbacks.onFullscreen?.());
+      bind('applyPresetButton', () => {
+        const select = document.getElementById('presetSelect');
+        this.callbacks.onApplyPreset?.(select.value, select.selectedOptions[0]?.textContent ?? select.value);
+      });
+      bind('applyMaterialButton', () => this.callbacks.onApplyMaterial?.(
+        document.getElementById('materialSelect').value,
+        document.getElementById('materialKinetics').checked
+      ));
+      bind('savePresetButton', () => this.callbacks.onSavePreset?.());
+      bind('loadPresetButton', () => this.callbacks.onLoadPreset?.());
+      bind('exportPresetButton', () => this.callbacks.onExportPreset?.());
+      bind('importPresetButton', () => document.getElementById('importPresetInput')?.click());
+      document.getElementById('importPresetInput')?.addEventListener('change', (event) => {
+        const file = event.target.files && event.target.files[0];
+        if (file) this.callbacks.onImportPreset?.(file);
+        event.target.value = '';
+      });
+      bind('tiltPermissionButton', () => this.callbacks.onTiltPermission?.());
+
+      const panel = document.getElementById('panel');
+      const openPanel = document.getElementById('openPanel');
+      bind('collapsePanel', () => {
+        panel.hidden = true;
+        openPanel.hidden = false;
+      });
+      bind('openPanel', () => {
+        panel.hidden = false;
+        openPanel.hidden = true;
+      });
+    }
+
+    syncSetting(key, source = null) {
+      const elements = this.elementsBySetting.get(key) || [];
+      for (const element of elements) {
+        if (element === source) continue;
+        if (element.type === 'checkbox') element.checked = Boolean(this.settings[key]);
+        else element.value = this.settings[key];
+      }
+    }
+
+    syncSizeMode() {
+      const mode = this.settings.sizeMode === 'mixed' ? 'mixed' : 'single';
+      document.querySelectorAll('[data-size-mode]').forEach((element) => {
+        element.hidden = element.dataset.sizeMode !== mode;
+      });
+    }
+
+    syncColorMode() {
+      const mode = this.settings.colorMode;
+      document.querySelectorAll('[data-color-mode]').forEach((element) => {
+        element.hidden = element.dataset.colorMode !== mode;
+      });
+    }
+
+    syncRenderMode() {
+      const mode = this.settings.renderMode === 'metaball' ? 'metaball' : 'sphere';
+      document.querySelectorAll('[data-render-mode]').forEach((element) => {
+        element.hidden = element.dataset.renderMode !== mode;
+      });
+    }
+
+    syncAll() {
+      for (const key of this.elementsBySetting.keys()) this.syncSetting(key);
+      this.syncSizeMode();
+      this.syncColorMode();
+      this.syncRenderMode();
+    }
+
+    setPaused(paused) {
+      document.getElementById('pauseButton').textContent = paused ? 'Resume' : 'Pause';
+    }
+
+    setRecording(recording) {
+      const button = document.getElementById('recordButton');
+      button.textContent = recording ? 'Stop recording' : 'Record WebM';
+      button.style.borderColor = recording ? '#ff668d' : '';
+    }
+
+    updateStats({ fps, frameMs, contacts, balls, gpu }) {
+      document.getElementById('fpsValue').textContent = Math.round(fps);
+      document.getElementById('frameValue').textContent = frameMs.toFixed(1);
+      document.getElementById('collisionValue').textContent = contacts.toLocaleString();
+      document.getElementById('ballValue').textContent = balls.toLocaleString();
+      if (gpu) document.getElementById('gpuValue').textContent = gpu;
+    }
+
+    toast(message) {
+      const element = document.getElementById('toast');
+      element.textContent = message;
+      element.classList.add('is-visible');
+      clearTimeout(this.toastTimer);
+      this.toastTimer = setTimeout(() => element.classList.remove('is-visible'), 2200);
+    }
+  }
+
+  root.UI = UI;
+})();
diff --git a/webgl_served/fluidballs-webgl-single.html b/webgl_served/fluidballs-webgl-single.html
index eb7d0c9..0cb0724 100644
--- a/webgl_served/fluidballs-webgl-single.html
+++ b/webgl_served/fluidballs-webgl-single.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
   <meta name="color-scheme" content="dark">
-  <title>FluidBallsJS v1.0 WebGL</title>
+    <title>FluidBallsJS v1.0 WebGL</title>
   <style data-inlined-from="style.css">
     /* Any rule that sets `display` outranks the UA's [hidden] { display: none },
        so the attribute silently stops working. Guard it once, globally. */
@@ -576,6 +576,8 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
         <label class="select-row">
           <span>Preset</span>
           <select id="presetSelect">
+            <option value="synaptic">Synaptic Cascades</option>
+            <option value="oceanTail">Ocean Chasing Its Tail</option>
             <option value="classic">Classic blue</option>
             <option value="mercury">Mercury</option>
             <option value="lava">Lava lamp</option>
@@ -682,6 +684,37 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
       });
 
       root.PRESETS = Object.freeze({
+        // Flagship showcase preset (full settings) — also the startup default (main.js).
+        // Ball count / solver passes tuned down for broad hardware (iPad). physicsHz 90
+        // is the FLOOR where the emergent "synaptic" pressure patterns crackle to life
+        // reliably — at 60 they only flicker intermittently. Do not lower it.
+        synaptic: {
+          ballCount: 2500, sizeMode: 'mixed', radius: 11.5, radiusMin: 4, radiusMax: 8, solverIterations: 2, physicsHz: 90, compliance: 0,
+          gravityMode: 'cardinal', gravityStrength: 30, gravityAngle: 21, gravityCycleTime: 6.1, gravityTransitionTime: 1.2,
+          windStrength: 10, windAngle: 45, windTurbulence: 0.16,
+          elasticity: 1.14, wallBounce: 1.15, airDrag: 0.06, contactViscosity: 0.49, clumpAffinity: 890, splitEnergy: 300,
+          renderMode: 'sphere', fusionThreshold: 0.1, edgeSoftness: 0.12, fieldRadius: 2.45, specFusion: 12,
+          colorMode: 'pressure', baseHue: 272, hueSpread: 298, colorSpeed: 1, pressureScale: 0.8, pressureDiffuse: false,
+          glow: 0.06, bloomStrength: 0.14, trailPersistence: 0.085, exposure: 2.58, backgroundColor: '#02050b', bloomEnabled: false, vignette: false, msaa: true,
+          lightAngle: 224, lightWidth: 0.97, lightSoftness: 0.73, ior: 1.93, clarity: 0.85, translucency: 0.91, lightFalloff: 6, bandPosition: 0, bandWidth: 0.15,
+          tintColor: '#2aa6ff', tintStrength: 0,
+          mouseMode: 'vortex', mouseStrength: 4500, mouseRadius: 500,
+        },
+        // Second showcase preset (full settings). Slow rotating gravity drags the
+        // metaball sheet around after itself, so the body of "water" perpetually
+        // chases its own wake. Heavier than synaptic — 3500 balls, 5 solver passes.
+        oceanTail: {
+          ballCount: 3500, sizeMode: 'mixed', radius: 11.5, radiusMin: 3, radiusMax: 4, solverIterations: 5, physicsHz: 60, compliance: 0.00052,
+          gravityMode: 'rotate', gravityStrength: 340, gravityAngle: 26, gravityCycleTime: 16, gravityTransitionTime: 5,
+          windStrength: 10, windAngle: 45, windTurbulence: 0.16,
+          elasticity: 1.2, wallBounce: 1.2, airDrag: 0.11, contactViscosity: 0.3, clumpAffinity: 850, splitEnergy: 200,
+          renderMode: 'metaball', fusionThreshold: 0.9, edgeSoftness: 0.005, fieldRadius: 2.5, specFusion: 10.5,
+          colorMode: 'mono', baseHue: 216, hueSpread: 273, colorSpeed: 0, pressureScale: 0.8, pressureDiffuse: false,
+          glow: 0, bloomStrength: 1.12, trailPersistence: 0.145, exposure: 3, backgroundColor: '#02050b', bloomEnabled: true, vignette: false, msaa: true,
+          lightAngle: 27, lightWidth: 0.87, lightSoftness: 0, ior: 1, clarity: 0, translucency: 1, lightFalloff: 6, bandPosition: 0.52, bandWidth: 0.15,
+          tintColor: '#2aa6ff', tintStrength: 0,
+          mouseMode: 'attract', mouseStrength: 4500, mouseRadius: 500,
+        },
         classic: {
           gravityMode: 'cardinal', gravityStrength: 780, gravityCycleTime: 5,
           elasticity: 0.84, wallBounce: 0.88, airDrag: 0.18,
@@ -2312,7 +2345,10 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
           bind('screenshotButton', () => this.callbacks.onScreenshot?.());
           bind('recordButton', () => this.callbacks.onRecord?.());
           bind('fullscreenButton', () => this.callbacks.onFullscreen?.());
-          bind('applyPresetButton', () => this.callbacks.onApplyPreset?.(document.getElementById('presetSelect').value));
+          bind('applyPresetButton', () => {
+            const select = document.getElementById('presetSelect');
+            this.callbacks.onApplyPreset?.(select.value, select.selectedOptions[0]?.textContent ?? select.value);
+          });
           bind('applyMaterialButton', () => this.callbacks.onApplyMaterial?.(
             document.getElementById('materialSelect').value,
             document.getElementById('materialKinetics').checked
@@ -2412,7 +2448,9 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
       'use strict';
 
       const root = window.FluidBalls;
-      const settings = { ...root.DEFAULTS };
+      // Boot into the "Synaptic Cascades" showcase preset (falls back to plain
+      // defaults if it is ever removed). The preset dropdown lists it too.
+      const settings = { ...root.DEFAULTS, ...(root.PRESETS.synaptic || {}) };
       const canvas = document.getElementById('fluidCanvas');
       const fatalError = document.getElementById('fatalError');
 
@@ -2743,10 +2781,10 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
           onScreenshot: takeScreenshot,
           onRecord: toggleRecording,
           onFullscreen: toggleFullscreen,
-          onApplyPreset: (name) => {
+          onApplyPreset: (name, label) => {
             applySettings(root.PRESETS[name]);
             simulation.reset();
-            ui.toast(`Applied ${name} preset`);
+            ui.toast(`Applied ${label || name} preset`);
           },
           onApplyMaterial: (name, withKinetics) => {
             const material = root.MATERIALS[name];
diff --git a/webgl_served/index.html b/webgl_served/index.html
index 91a93b8..c3279ba 100644
--- a/webgl_served/index.html
+++ b/webgl_served/index.html
@@ -362,6 +362,8 @@ <h1>FluidBallsJS v1.0 <span>WebGL</span></h1>
         <label class="select-row">
           <span>Preset</span>
           <select id="presetSelect">
+            <option value="synaptic">Synaptic Cascades</option>
+            <option value="oceanTail">Ocean Chasing Its Tail</option>
             <option value="classic">Classic blue</option>
             <option value="mercury">Mercury</option>
             <option value="lava">Lava lamp</option>
diff --git a/webgl_served/js/config.js b/webgl_served/js/config.js
index 95387f7..6484872 100644
--- a/webgl_served/js/config.js
+++ b/webgl_served/js/config.js
@@ -68,6 +68,37 @@
   });
 
   root.PRESETS = Object.freeze({
+    // Flagship showcase preset (full settings) — also the startup default (main.js).
+    // Ball count / solver passes tuned down for broad hardware (iPad). physicsHz 90
+    // is the FLOOR where the emergent "synaptic" pressure patterns crackle to life
+    // reliably — at 60 they only flicker intermittently. Do not lower it.
+    synaptic: {
+      ballCount: 2500, sizeMode: 'mixed', radius: 11.5, radiusMin: 4, radiusMax: 8, solverIterations: 2, physicsHz: 90, compliance: 0,
+      gravityMode: 'cardinal', gravityStrength: 30, gravityAngle: 21, gravityCycleTime: 6.1, gravityTransitionTime: 1.2,
+      windStrength: 10, windAngle: 45, windTurbulence: 0.16,
+      elasticity: 1.14, wallBounce: 1.15, airDrag: 0.06, contactViscosity: 0.49, clumpAffinity: 890, splitEnergy: 300,
+      renderMode: 'sphere', fusionThreshold: 0.1, edgeSoftness: 0.12, fieldRadius: 2.45, specFusion: 12,
+      colorMode: 'pressure', baseHue: 272, hueSpread: 298, colorSpeed: 1, pressureScale: 0.8, pressureDiffuse: false,
+      glow: 0.06, bloomStrength: 0.14, trailPersistence: 0.085, exposure: 2.58, backgroundColor: '#02050b', bloomEnabled: false, vignette: false, msaa: true,
+      lightAngle: 224, lightWidth: 0.97, lightSoftness: 0.73, ior: 1.93, clarity: 0.85, translucency: 0.91, lightFalloff: 6, bandPosition: 0, bandWidth: 0.15,
+      tintColor: '#2aa6ff', tintStrength: 0,
+      mouseMode: 'vortex', mouseStrength: 4500, mouseRadius: 500,
+    },
+    // Second showcase preset (full settings). Slow rotating gravity drags the
+    // metaball sheet around after itself, so the body of "water" perpetually
+    // chases its own wake. Heavier than synaptic — 3500 balls, 5 solver passes.
+    oceanTail: {
+      ballCount: 3500, sizeMode: 'mixed', radius: 11.5, radiusMin: 3, radiusMax: 4, solverIterations: 5, physicsHz: 60, compliance: 0.00052,
+      gravityMode: 'rotate', gravityStrength: 340, gravityAngle: 26, gravityCycleTime: 16, gravityTransitionTime: 5,
+      windStrength: 10, windAngle: 45, windTurbulence: 0.16,
+      elasticity: 1.2, wallBounce: 1.2, airDrag: 0.11, contactViscosity: 0.3, clumpAffinity: 850, splitEnergy: 200,
+      renderMode: 'metaball', fusionThreshold: 0.9, edgeSoftness: 0.005, fieldRadius: 2.5, specFusion: 10.5,
+      colorMode: 'mono', baseHue: 216, hueSpread: 273, colorSpeed: 0, pressureScale: 0.8, pressureDiffuse: false,
+      glow: 0, bloomStrength: 1.12, trailPersistence: 0.145, exposure: 3, backgroundColor: '#02050b', bloomEnabled: true, vignette: false, msaa: true,
+      lightAngle: 27, lightWidth: 0.87, lightSoftness: 0, ior: 1, clarity: 0, translucency: 1, lightFalloff: 6, bandPosition: 0.52, bandWidth: 0.15,
+      tintColor: '#2aa6ff', tintStrength: 0,
+      mouseMode: 'attract', mouseStrength: 4500, mouseRadius: 500,
+    },
     classic: {
       gravityMode: 'cardinal', gravityStrength: 780, gravityCycleTime: 5,
       elasticity: 0.84, wallBounce: 0.88, airDrag: 0.18,
diff --git a/webgl_served/js/main.js b/webgl_served/js/main.js
index b003a37..0479962 100644
--- a/webgl_served/js/main.js
+++ b/webgl_served/js/main.js
@@ -2,7 +2,9 @@
   'use strict';
 
   const root = window.FluidBalls;
-  const settings = { ...root.DEFAULTS };
+  // Boot into the "Synaptic Cascades" showcase preset (falls back to plain
+  // defaults if it is ever removed). The preset dropdown lists it too.
+  const settings = { ...root.DEFAULTS, ...(root.PRESETS.synaptic || {}) };
   const canvas = document.getElementById('fluidCanvas');
   const fatalError = document.getElementById('fatalError');
 
@@ -333,10 +335,10 @@
       onScreenshot: takeScreenshot,
       onRecord: toggleRecording,
       onFullscreen: toggleFullscreen,
-      onApplyPreset: (name) => {
+      onApplyPreset: (name, label) => {
         applySettings(root.PRESETS[name]);
         simulation.reset();
-        ui.toast(`Applied ${name} preset`);
+        ui.toast(`Applied ${label || name} preset`);
       },
       onApplyMaterial: (name, withKinetics) => {
         const material = root.MATERIALS[name];
diff --git a/webgl_served/js/ui.js b/webgl_served/js/ui.js
index 08bf3c9..320d7ea 100644
--- a/webgl_served/js/ui.js
+++ b/webgl_served/js/ui.js
@@ -57,7 +57,10 @@
       bind('screenshotButton', () => this.callbacks.onScreenshot?.());
       bind('recordButton', () => this.callbacks.onRecord?.());
       bind('fullscreenButton', () => this.callbacks.onFullscreen?.());
-      bind('applyPresetButton', () => this.callbacks.onApplyPreset?.(document.getElementById('presetSelect').value));
+      bind('applyPresetButton', () => {
+        const select = document.getElementById('presetSelect');
+        this.callbacks.onApplyPreset?.(select.value, select.selectedOptions[0]?.textContent ?? select.value);
+      });
       bind('applyMaterialButton', () => this.callbacks.onApplyMaterial?.(
         document.getElementById('materialSelect').value,
         document.getElementById('materialKinetics').checked