diff --git a/backend/tests/chemistry7-page.test.js b/backend/tests/chemistry7-page.test.js
index 2789b82..e16db67 100644
--- a/backend/tests/chemistry7-page.test.js
+++ b/backend/tests/chemistry7-page.test.js
@@ -225,13 +225,16 @@ test('ch3 Волна 2: §21 + ЛО4 + §22 + ПР3 + финал главы мо
 test('ch4: вся глава 4 (§23–§26 + ЛО5 + ПР4 + финал) монтируется', async () => {
   const { doc, errors } = await loadDom('chemistry_7_ch4.html');
   assert.ok(doc.querySelector('#p23-water #p23-pick'), 'разложение/реакции воды §23');
+  assert.ok(doc.querySelector('#p23-bub-h div'), 'пузырьки электролиза 2:1 §23');
   doc.defaultView.goTo('p24'); await wait(100);
   assert.ok(doc.querySelector('#p24-bld #p24-m'), 'конструктор оснований §24');
   assert.ok(doc.querySelector('#p24-ind #p24-ind-sel'), 'индикаторы щёлочи §24');
+  assert.ok(doc.querySelector('#p24-ind-drop div'), 'анимация индикатора §24');
   doc.defaultView.goTo('lo5'); await wait(100);
   assert.ok(doc.querySelector('#lo5-ind #lo5-ind-sel'), 'индикаторы ЛО5');
   doc.defaultView.goTo('p25'); await wait(100);
   assert.ok(doc.querySelector('#p25-neu #p25-neu-go'), 'нейтрализация §25');
+  assert.ok(doc.querySelector('#p25-neu-cup div'), 'анимация раствора §25');
   doc.defaultView.goTo('pr4'); await wait(100);
   assert.ok(doc.querySelector('#pr4-neu #pr4-neu-go'), 'нейтрализация ПР4');
   doc.defaultView.goTo('p26'); await wait(100);
diff --git a/frontend/js/chem7_ch4_widgets.js b/frontend/js/chem7_ch4_widgets.js
index 42dcb65..b85b14c 100644
--- a/frontend/js/chem7_ch4_widgets.js
+++ b/frontend/js/chem7_ch4_widgets.js
@@ -36,15 +36,23 @@
   }
   function mount_p23() {
     var m = $('p23-water'); if (!m || m._built) return; m._built = 1;
-    var idx = 0;
+    var idx = 0, anims = [];
+    function stopAnim(){ anims.forEach(function(a){ try { a.stop(); } catch(e){} }); anims = []; }
     function render(){
+      stopAnim();
       var r = WRX[idx];
-      m.innerHTML = (idx===0 ? decompSvg() : '')
+      m.innerHTML = (idx===0 ? decompSvg()
+          + '<div style="display:flex;gap:10px;margin-top:6px"><div style="flex:1"><div style="text-align:center;font-size:.76rem;font-weight:700;color:#1d4ed8">H₂ — 2 объёма</div><div id="p23-bub-h"></div></div>'
+          + '<div style="flex:1"><div style="text-align:center;font-size:.76rem;font-weight:700;color:#b91c1c">O₂ — 1 объём</div><div id="p23-bub-o"></div></div></div>' : '')
         + '<div class="fld"><label>Реакция воды</label><select id="p23-pick">'
         + WRX.map(function(x,i){ return '<option value="'+i+'"'+(i===idx?' selected':'')+'>'+esc(x.name)+'</option>'; }).join('') + '</select></div>'
         + '<div class="out ok" style="margin-top:8px"><div style="font-size:1.05rem">'+ceq(r.eq,{cond:r.cond})+'</div>'
         + '<div style="font-size:.86rem;color:var(--muted);margin-top:6px">'+esc(r.note)+'</div></div>';
-      $('p23-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
+      if (idx===0 && W.Chem7Anim) {
+        anims.push(W.Chem7Anim.bubbleField($('p23-bub-h'), { color:'rgba(96,165,250,.9)', count:18, h:84, bg:'linear-gradient(180deg,#dbeafe,transparent)' }));
+        anims.push(W.Chem7Anim.bubbleField($('p23-bub-o'), { color:'rgba(248,113,113,.9)', count:9, h:84, bg:'linear-gradient(180deg,#fee2e2,transparent)' }));
+      }
+      $('p23-pick').addEventListener('change', function(e){ idx=+e.target.value; render(); });
     }
     render();
   }
@@ -57,14 +65,17 @@
   };
   function alkIndicator(mountId) {
     var m = $(mountId); if (!m || m._built) return; m._built = 1;
-    var ind = 'Фенолфталеин';
+    var ind = 'Фенолфталеин', anim = null;
     function render(){
+      if (anim) { anim.stop(); anim = null; }
       var c = ALK_IND[ind];
       m.innerHTML = '<div class="fld"><label>Индикатор</label><select id="'+mountId+'-sel">'
         + Object.keys(ALK_IND).map(function(k){ return '<option'+(k===ind?' selected':'')+'>'+k+'</option>'; }).join('') + '</select></div>'
+        + '<div id="'+mountId+'-drop" style="margin-top:8px"></div>'
         + '<div class="out ok" style="margin-top:8px">В нейтральной среде: ' + strip(c.neutral[0]) + ' <b>'+c.neutral[1]+'</b><br>'
         + 'В щёлочи: ' + strip(c.alk[0]) + ' <b>'+c.alk[1]+'</b></div>';
-      $(mountId+'-sel').addEventListener('change', function(e){ ind=e.target.value; m._built=0; render(); });
+      if (W.Chem7Anim) anim = W.Chem7Anim.colorBlock($(mountId+'-drop'), c.neutral[0], c.alk[0], ind + ' в щёлочи → ' + c.alk[1], 900);
+      $(mountId+'-sel').addEventListener('change', function(e){ ind=e.target.value; render(); });
     }
     render();
   }
@@ -94,16 +105,19 @@
   /* §25 / ПР4 — нейтрализация (фенолфталеин малиновый → бесцветный) */
   function mount_neutral(mountId) {
     var m = $(mountId); if (!m || m._built) return; m._built = 1;
-    var done = false;
-    function beaker(color){ return '<svg viewBox="0 0 80 90" width="70" style="vertical-align:middle"><path d="M20 10 h40 v30 l14 38 a6 6 0 0 1-6 8 H12 a6 6 0 0 1-6-8 l14-38 Z" fill="none" stroke="var(--muted)" stroke-width="2"/><path d="M16 52 h48 l8 22 a4 4 0 0 1-4 5 H12 a4 4 0 0 1-4-5 Z" fill="'+color+'"/></svg>'; }
+    var done = false, anim = null;
     function render(){
-      m.innerHTML = '<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">' + beaker(done?'#f8fafc':'#db2777')
-        + '<div>'+(done
+      if (anim) { anim.stop(); anim = null; }
+      m.innerHTML = '<div id="'+mountId+'-cup" style="margin-bottom:8px"></div>'
+        + '<div style="font-size:.92rem">'+(done
             ? 'Раствор стал <b>бесцветным</b> — кислота нейтрализовала щёлочь. Реакция завершена.'
-            : 'В щёлочи с фенолфталеином раствор <b>малиновый</b>. Добавляй кислоту по каплям.')+'</div></div>'
+            : 'В щёлочи с фенолфталеином раствор <b>малиновый</b>. Добавляй кислоту по каплям.')+'</div>'
         + '<div class="fld" style="margin-top:8px"><button class="btn primary" id="'+mountId+'-go">'+(done?'Сбросить':'Добавить кислоту')+'</button></div>'
         + (done ? '<div class="out ok" style="margin-top:8px"><div style="font-size:1.05rem">'+ceq('HCl + NaOH = NaCl + H2O')+'</div><div style="font-size:.84rem;color:var(--muted);margin-top:4px">Кислота + основание → соль + вода. Это реакция <b>нейтрализации</b>.</div></div>' : '');
-      $(mountId+'-go').addEventListener('click', function(){ done=!done; m._built=0; render(); });
+      if (W.Chem7Anim) anim = done
+        ? W.Chem7Anim.colorBlock($(mountId+'-cup'), '#db2777', '#f8fafc', 'малиновый → бесцветный', 1600)
+        : W.Chem7Anim.colorBlock($(mountId+'-cup'), '#db2777', '#db2777', 'щёлочь + фенолфталеин', 1);
+      $(mountId+'-go').addEventListener('click', function(){ done=!done; render(); });
     }
     render();
   }
diff --git a/frontend/textbooks/chemistry_7_ch4.html b/frontend/textbooks/chemistry_7_ch4.html
index 7b79c64..b75c506 100644
--- a/frontend/textbooks/chemistry_7_ch4.html
+++ b/frontend/textbooks/chemistry_7_ch4.html
@@ -23,6 +23,7 @@ html.dark{--bg:#0a1222;--border:#1e3a5f;--pri-soft:rgba(37,99,235,.18);--sec-acc
 <script src="/js/biochem-core.js" defer></script>
 <script src="/js/chem8_svg.js" defer></script>
 <script src="/js/chem7_svg.js" defer></script>
+<script src="/js/chem7_anim.js" defer></script>
 <script src="/js/chem7_ch4_widgets.js" defer></script>
 <script src="/js/chem8_engine.js" defer></script>
 </head>