diff --git a/web/app.js b/web/app.js
index dd33efd..50c12e5 100644
--- a/web/app.js
+++ b/web/app.js
@@ -295,23 +295,17 @@ function updateStirrerVisualization() {
 // --- Fire visualization ---
 
 function updateFireVisualization() {
-	const g        = document.getElementById('fire-group');
-	const clipRect = document.getElementById('fire-clip-rect');
+	const g = document.getElementById('fire-group');
 	if (!g) return;
-	const fireBase = 248; // y of flame base (all paths end here)
-	const fireTip  = 177; // y of tallest flame tip
-	const fireH    = fireBase - fireTip; // 71px total flame height
 	if (heaterPowerSoll <= 0) {
 		g.style.opacity = '0';
-		clipRect.setAttribute('height', '0');
+		g.removeAttribute('transform');
 	} else {
 		const intensity = Math.min(1, heaterPowerSoll / heaterMaxPower);
-		// Always show the lower 35% (base), scale upper 65% with intensity
-		const visibleH = (0.35 + 0.65 * intensity) * fireH;
-		const topBuffer = 20; // headroom for flicker scaleY overshoot (~12% of height)
-		clipRect.setAttribute('y',      (fireBase - visibleH - topBuffer).toFixed(1));
-		clipRect.setAttribute('height', (visibleH + topBuffer + 2).toFixed(1));
-		g.style.opacity = String((0.6 + 0.4 * intensity).toFixed(2));
+		const minScale  = 1200 / heaterMaxPower;
+		const scale     = Math.max(minScale, intensity);
+		g.style.opacity = '1';
+		g.setAttribute('transform', `translate(0,248) scale(1,${scale.toFixed(3)}) translate(0,-248)`);
 	}
 }
 
diff --git a/web/index.html b/web/index.html
index e9ece89..44f698f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -59,7 +59,7 @@
         <rect id="water-clip-rect" x="63" y="172" width="114" height="0"/>
       </clipPath>
       <clipPath id="fire-clip">
-        <rect id="fire-clip-rect" x="60" y="248" width="130" height="0"/>
+        <rect x="55" y="175" width="140" height="78"/>
       </clipPath>
       <!-- Flame gradients: solid at base (y=1), transparent at tip (y=0) -->
       <linearGradient id="fg-red" x1="0" y1="1" x2="0" y2="0">