@zakkster/lite-ui-fx 1.2.0 → 1.3.0

package/UIFXRecipes.js

@@ -34,6 +34,20 @@ import { Random } from '@zakkster/lite-random';
 import { mountUIFX, UIType } from './UIFXController.js';
 
 
+// ---------------------------------------------------------
+//  SHARED COLD CONSTANTS (U3) -- built once at module load, never per frame
+// ---------------------------------------------------------
+
+// Focus-ring dash patterns: one shared array each, so a focused frame's
+// setLineDash() reuses them instead of allocating a fresh array (U-03).
+const DASH_FOCUS = [4, 3];
+const DASH_NONE = [];
+
+// Percentage readouts '0%'..'100%', precomputed so a value label is a const
+// lookup -- PCT[Math.round(st.val * 100)] -- not a per-frame template build.
+const PCT = Array.from({ length: 101 }, (_, i) => i + '%');
+
+
 // ---------------------------------------------------------
 //  SHARED HELPERS
 // ---------------------------------------------------------
@@ -57,31 +71,32 @@ function roundRect(ctx, x, y, w, h, r) {
 function drawFocusRing(ctx, w, h, r) {
     ctx.strokeStyle = 'rgba(110,231,182,.6)';
     ctx.lineWidth = 2;
-    ctx.setLineDash([4, 3]);
+    ctx.setLineDash(DASH_FOCUS);
     roundRect(ctx, -2, -2, w + 4, h + 4, r + 2);
     ctx.stroke();
-    ctx.setLineDash([]);
+    ctx.setLineDash(DASH_NONE);
 }
 
-/** Draw a state label so the user knows the current state. */
-function drawStateLabel(ctx, text, x, y, color) {
+/** Draw a state label so the user knows the current state. font defaults to the
+ *  historical literal, so an omitted font renders exactly as before. */
+function drawStateLabel(ctx, text, x, y, color, font) {
     ctx.fillStyle = color;
-    ctx.font = "500 9px 'JetBrains Mono',monospace";
+    ctx.font = font || "500 9px 'JetBrains Mono',monospace";
     ctx.textAlign = 'center';
     ctx.fillText(text, x, y);
 }
 
-function label(ctx, text, x, y, color = '#9999b8') {
-    ctx.fillStyle = color; ctx.font = "500 9px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.fillText(text, x, y);
+function label(ctx, text, x, y, color = '#9999b8', font) {
+    ctx.fillStyle = color; ctx.font = font || "500 9px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.fillText(text, x, y);
 }
 function focusRing(ctx, w, h, r) {
-    ctx.strokeStyle = 'rgba(110,231,182,.5)'; ctx.lineWidth = 2; ctx.setLineDash([4, 3]);
-    roundRect(ctx, -2, -2, w + 4, h + 4, r + 2); ctx.stroke(); ctx.setLineDash([]);
+    ctx.strokeStyle = 'rgba(110,231,182,.5)'; ctx.lineWidth = 2; ctx.setLineDash(DASH_FOCUS);
+    roundRect(ctx, -2, -2, w + 4, h + 4, r + 2); ctx.stroke(); ctx.setLineDash(DASH_NONE);
 }
 
 function rr(c,x,y,w,h,r){c.beginPath();c.moveTo(x+r,y);c.lineTo(x+w-r,y);c.arcTo(x+w,y,x+w,y+r,r);c.lineTo(x+w,y+h-r);c.arcTo(x+w,y+h,x+w-r,y+h,r);c.lineTo(x+r,y+h);c.arcTo(x,y+h,x,y+h-r,r);c.lineTo(x,y+r);c.arcTo(x,y,x+r,y,r);c.closePath()}
-function lbl(c,t,x,y,col='#9999b8'){c.fillStyle=col;c.font="500 9px 'JetBrains Mono',monospace";c.textAlign='center';c.fillText(t,x,y)}
-function fr(c,w,h,r){c.strokeStyle='rgba(110,231,182,.5)';c.lineWidth=2;c.setLineDash([4,3]);rr(c,-2,-2,w+4,h+4,r+2);c.stroke();c.setLineDash([])}
+function lbl(c,t,x,y,col='#9999b8',font){c.fillStyle=col;c.font=font||"500 9px 'JetBrains Mono',monospace";c.textAlign='center';c.fillText(t,x,y)}
+function fr(c,w,h,r){c.strokeStyle='rgba(110,231,182,.5)';c.lineWidth=2;c.setLineDash(DASH_FOCUS);rr(c,-2,-2,w+4,h+4,r+2);c.stroke();c.setLineDash(DASH_NONE)}
 const PI2=Math.PI*2;
 
 
@@ -198,15 +213,28 @@ export function LiquidToggle() {
  * Neon Pulse Toggle -- Expanding shockwave rings on toggle.
  */
 export function NeonPulseToggle() {
-    let rings = [];
+    // Fixed ring pool (dead when life <= 0) -- no push/splice on the hot path.
+    const RINGS = 8;
+    const ringR = new Float64Array(RINGS);
+    const ringLife = new Float64Array(RINGS);
+    const ringX = new Float64Array(RINGS);
     let knobX = 18;
+    let lastW = 64; // last track width, so onToggle (which gets no state) can
+    //                place a ring at the knob position derived from st.w (U-05).
+
+    function spawnRing(x) {
+        for (let i = 0; i < RINGS; i++) {
+            if (ringLife[i] <= 0) { ringR[i] = 14; ringLife[i] = 1; ringX[i] = x; return; }
+        }
+    }
 
     return {
         onToggle(checked) {
-            rings.push({ r: 14, life: 1, x: checked ? 46 : 18 });
+            spawnRing(checked ? lastW - 18 : 18);
         },
 
         tick(ctx, dt, now, st) {
+            lastW = st.w;
             knobX = lerp(knobX, st.toggled ? st.w - 18 : 18, dt * 15);
 
             // Track
@@ -214,18 +242,21 @@ export function NeonPulseToggle() {
             roundRect(ctx, 0, 0, st.w, st.h, st.h / 2);
             ctx.fill();
 
-            // Shockwave rings
-            for (let i = rings.length - 1; i >= 0; i--) {
-                const r = rings[i];
-                r.r += 100 * dt;
-                r.life -= 2 * dt;
-                if (r.life <= 0) { rings.splice(i, 1); continue; }
-                ctx.strokeStyle = `rgba(56,189,248,${r.life})`;
-                ctx.lineWidth = 2;
+            // Shockwave rings -- const stroke color, per-ring alpha via globalAlpha
+            // (was `rgba(56,189,248,${life})` built per ring per frame).
+            ctx.strokeStyle = '#38bdf8';
+            ctx.lineWidth = 2;
+            for (let i = 0; i < RINGS; i++) {
+                if (ringLife[i] <= 0) continue;
+                ringR[i] += 100 * dt;
+                ringLife[i] -= 2 * dt;
+                if (ringLife[i] <= 0) continue;
+                ctx.globalAlpha = ringLife[i];
                 ctx.beginPath();
-                ctx.arc(r.x, st.h / 2, r.r, 0, Math.PI * 2);
+                ctx.arc(ringX[i], st.h / 2, ringR[i], 0, Math.PI * 2);
                 ctx.stroke();
             }
+            ctx.globalAlpha = 1;
 
             // Knob
             ctx.fillStyle = st.toggled ? '#38bdf8' : '#9999b8';
@@ -295,7 +326,10 @@ export function MagneticButton({ maxPull = 15 } = {}) {
  */
 export function ShatterButton({ seed = 42 } = {}) {
     const rng = new Random(seed);
-    let shards = [];
+    // Fixed shard pool (live flag) -- no push/splice on the hot path.
+    const SHARDS = 32;
+    const shard = [];
+    for (let i = 0; i < SHARDS; i++) shard[i] = { x: 0, y: 0, vx: 0, vy: 0, r: 0, vr: 0, sz: 0, live: false };
     let visible = true;
     let respawnTimer = 0;
 
@@ -304,13 +338,15 @@ export function ShatterButton({ seed = 42 } = {}) {
             if (!visible) return;
             visible = false;
             respawnTimer = 1.5;
-            for (let i = 0; i < 30; i++) {
-                shards.push({
-                    x: rng.range(0, st.w), y: rng.range(0, st.h),
-                    vx: rng.range(-150, 150), vy: rng.range(-150, 50),
-                    r: rng.range(0, 6), vr: rng.range(-5, 5),
-                    sz: rng.range(4, 12),
-                });
+            let n = 0;
+            for (let i = 0; i < SHARDS && n < 30; i++) {
+                const s = shard[i];
+                if (s.live) continue;
+                s.x = rng.range(0, st.w); s.y = rng.range(0, st.h);
+                s.vx = rng.range(-150, 150); s.vy = rng.range(-150, 50);
+                s.r = rng.range(0, 6); s.vr = rng.range(-5, 5);
+                s.sz = rng.range(4, 12); s.live = true;
+                n++;
             }
         },
 
@@ -332,10 +368,11 @@ export function ShatterButton({ seed = 42 } = {}) {
                 if (st.focused) drawFocusRing(ctx, st.w, st.h, 10);
             }
 
-            // Falling shards
+            // Falling shards -- fixed pool
             ctx.fillStyle = 'rgba(255,255,255,.5)';
-            for (let i = shards.length - 1; i >= 0; i--) {
-                const s = shards[i];
+            for (let i = 0; i < SHARDS; i++) {
+                const s = shard[i];
+                if (!s.live) continue;
                 s.vy += 400 * dt;
                 s.x += s.vx * dt; s.y += s.vy * dt;
                 s.r += s.vr * dt;
@@ -343,7 +380,7 @@ export function ShatterButton({ seed = 42 } = {}) {
                 ctx.translate(s.x, s.y); ctx.rotate(s.r);
                 ctx.fillRect(-s.sz / 2, -s.sz / 2, s.sz, s.sz);
                 ctx.restore();
-                if (s.y > st.h + 100) shards.splice(i, 1);
+                if (s.y > st.h + 100) s.live = false;
             }
         },
     };
@@ -355,22 +392,28 @@ export function ShatterButton({ seed = 42 } = {}) {
  */
 export function ConfettiButton({ seed = 42, colors = ['#6ee7b6', '#38bdf8', '#a78bfa', '#fbbf24', '#f43f5e'] } = {}) {
     const rng = new Random(seed);
-    let conf = [];
+    // Fixed confetti pool (live flag) -- no push/splice on the hot path.
+    const CONF = 80;
+    const conf = [];
+    for (let i = 0; i < CONF; i++) conf[i] = { x: 0, y: 0, vx: 0, vy: 0, c: '#fff', w: 0, h: 0, rx: 0, ry: 0, vrx: 0, vry: 0, live: false };
     let pressScale = 1;
 
     return {
         onClick(x, y) {
             pressScale = 0.85;
-            for (let i = 0; i < 40; i++) {
+            let n = 0;
+            for (let i = 0; i < CONF && n < 40; i++) {
+                const c = conf[i];
+                if (c.live) continue;
                 const a = rng.range(Math.PI, Math.PI * 2);
                 const v = rng.range(100, 300);
-                conf.push({
-                    x, y, vx: Math.cos(a) * v, vy: Math.sin(a) * v,
-                    c: rng.pick(colors),
-                    w: rng.range(4, 8), h: rng.range(8, 14),
-                    rx: rng.range(0, Math.PI), ry: rng.range(0, Math.PI),
-                    vrx: rng.range(5, 15), vry: rng.range(5, 15),
-                });
+                c.x = x; c.y = y; c.vx = Math.cos(a) * v; c.vy = Math.sin(a) * v;
+                c.c = rng.pick(colors);
+                c.w = rng.range(4, 8); c.h = rng.range(8, 14);
+                c.rx = rng.range(0, Math.PI); c.ry = rng.range(0, Math.PI);
+                c.vrx = rng.range(5, 15); c.vry = rng.range(5, 15);
+                c.live = true;
+                n++;
             }
         },
 
@@ -390,9 +433,10 @@ export function ConfettiButton({ seed = 42, colors = ['#6ee7b6', '#38bdf8', '#a7
             ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
             ctx.fillText('CONFETTI', st.w / 2, st.h / 2);
 
-            // Tumbling confetti
-            for (let i = conf.length - 1; i >= 0; i--) {
+            // Tumbling confetti -- fixed pool
+            for (let i = 0; i < CONF; i++) {
                 const c = conf[i];
+                if (!c.live) continue;
                 c.vy += 300 * dt;
                 c.x += c.vx * dt; c.y += c.vy * dt;
                 c.rx += c.vrx * dt; c.ry += c.vry * dt;
@@ -402,7 +446,7 @@ export function ConfettiButton({ seed = 42, colors = ['#6ee7b6', '#38bdf8', '#a7
                 ctx.fillStyle = c.c;
                 ctx.fillRect(-c.w / 2, -c.h / 2, c.w, c.h);
                 ctx.restore();
-                if (c.y > st.h + 100) conf.splice(i, 1);
+                if (c.y > st.h + 100) c.live = false;
             }
 
             if (st.focused) {
@@ -422,33 +466,37 @@ export function GlitchButton({ seed = 42 } = {}) {
     const rng = new Random(seed);
     let glitchIntensity = 0;
 
+    // Hoisted out of tick (was a per-frame arrow closure). Body alpha via
+    // globalAlpha (was two `rgba(...,${intensity})` templates); label at full.
+    function drawBase(ctx, st, ox, oy, color, alpha) {
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = color;
+        roundRect(ctx, ox, oy, st.w, st.h, 10);
+        ctx.fill();
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = '#fff';
+        ctx.font = "600 13px 'Space Grotesk',sans-serif";
+        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+        ctx.fillText('GLITCH', st.w / 2 + ox, st.h / 2 + oy);
+    }
+
     return {
         tick(ctx, dt, now, st) {
             glitchIntensity = lerp(glitchIntensity, st.hover ? 1 : 0, dt * 10);
 
-            const drawBase = (ox, oy, color) => {
-                ctx.fillStyle = color;
-                roundRect(ctx, ox, oy, st.w, st.h, 10);
-                ctx.fill();
-                ctx.fillStyle = '#fff';
-                ctx.font = "600 13px 'Space Grotesk',sans-serif";
-                ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-                ctx.fillText('GLITCH', st.w / 2 + ox, st.h / 2 + oy);
-            };
-
             if (glitchIntensity > 0.01) {
                 ctx.globalCompositeOperation = 'screen';
                 const off = rng.range(2, 6) * glitchIntensity;
                 // Alternate between split and normal for flicker
                 if (rng.next() > 0.4) {
-                    drawBase(-off, 0, `rgba(255,0,85,${0.6 * glitchIntensity})`);
-                    drawBase(off, 0, `rgba(0,255,204,${0.6 * glitchIntensity})`);
+                    drawBase(ctx, st, -off, 0, '#ff0055', 0.6 * glitchIntensity);
+                    drawBase(ctx, st, off, 0, '#00ffcc', 0.6 * glitchIntensity);
                 } else {
-                    drawBase(0, 0, 'rgba(255,255,255,.1)');
+                    drawBase(ctx, st, 0, 0, 'rgba(255,255,255,.1)', 1);
                 }
                 ctx.globalCompositeOperation = 'source-over';
             } else {
-                drawBase(0, 0, 'rgba(255,255,255,.06)');
+                drawBase(ctx, st, 0, 0, 'rgba(255,255,255,.06)', 1);
             }
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, 10);
@@ -467,27 +515,36 @@ export function GlitchButton({ seed = 42 } = {}) {
  */
 export function SparkSlider({ seed = 42, color = '#fbbf24' } = {}) {
     const rng = new Random(seed);
-    let sparks = [];
+    // Fixed spark pool (life <= 0 == dead) -- no push/splice on the hot path.
+    const SPARKS = 64;
+    const spark = [];
+    for (let i = 0; i < SPARKS; i++) spark[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0 };
     let lastVal = 0.5;
+    let lastW = 200; // last track width, so onDrag (no state) spawns at the
+    //                 thumb position derived from st.w (was hardcoded val*200).
+    function spawn(val, dir) {
+        for (let i = 0; i < SPARKS; i++) {
+            const s = spark[i];
+            if (s.life <= 0) {
+                s.x = val * lastW; s.y = 14;
+                s.vx = -dir * rng.range(100, 300); s.vy = rng.range(-150, 50); s.life = 1;
+                return;
+            }
+        }
+    }
 
     return {
         onDrag(val) {
             const delta = val - lastVal;
             if (Math.abs(delta) > 0.001) {
                 const dir = Math.sign(delta);
-                for (let i = 0; i < 4; i++) {
-                    sparks.push({
-                        x: val * 200, y: 14,
-                        vx: -dir * rng.range(100, 300),
-                        vy: rng.range(-150, 50),
-                        life: 1,
-                    });
-                }
+                for (let i = 0; i < 4; i++) spawn(val, dir);
             }
             lastVal = val;
         },
 
         tick(ctx, dt, now, st) {
+            lastW = st.w;
             // Track background
             ctx.fillStyle = 'rgba(255,255,255,.08)';
             roundRect(ctx, 0, 12, st.w, 4, 2);
@@ -505,26 +562,28 @@ export function SparkSlider({ seed = 42, color = '#fbbf24' } = {}) {
             ctx.fill();
 
             // Value label
-            drawStateLabel(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10, '#9999b8');
+            drawStateLabel(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10, '#9999b8');
 
-            // Sparks
+            // Sparks -- fixed pool, themed color, alpha via globalAlpha
+            // (was `rgba(251,191,36,${life})` built per spark per frame).
             ctx.globalCompositeOperation = 'screen';
-            for (let i = sparks.length - 1; i >= 0; i--) {
-                const s = sparks[i];
+            ctx.fillStyle = color;
+            for (let i = 0; i < SPARKS; i++) {
+                const s = spark[i];
+                if (s.life <= 0) continue;
                 s.vy += 400 * dt;
                 s.vx *= 0.95;
                 s.x += s.vx * dt; s.y += s.vy * dt;
                 s.life -= 2.0 * dt;
-                if (s.life <= 0) { sparks.splice(i, 1); continue; }
-
-                // Motion-blur stretch
-                ctx.fillStyle = `rgba(251,191,36,${s.life})`;
+                if (s.life <= 0) continue;
+                ctx.globalAlpha = s.life;
                 ctx.save();
                 ctx.translate(s.x, s.y);
                 ctx.rotate(Math.atan2(s.vy, s.vx));
                 ctx.fillRect(0, -1, Math.max(3, Math.abs(s.vx) * 0.05), 2);
                 ctx.restore();
             }
+            ctx.globalAlpha = 1;
             ctx.globalCompositeOperation = 'source-over';
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, 4);
@@ -556,9 +615,11 @@ export function CosmicSlider({ seed = 42, dustCount = 80 } = {}) {
 
             const tx = st.val * st.w;
 
-            // Dust particles attracted to thumb
+            // Dust particles attracted to thumb (indexed loop -- for..of over an
+            // array can allocate an iterator on the hot path)
             ctx.fillStyle = '#fff';
-            for (const d of dust) {
+            for (let di = 0; di < dust.length; di++) {
+                const d = dust[di];
                 const dx = tx - d.x, dy = 14 - d.y;
                 const dist = Math.sqrt(dx * dx + dy * dy);
                 if (dist < 40) {
@@ -582,7 +643,7 @@ export function CosmicSlider({ seed = 42, dustCount = 80 } = {}) {
             ctx.fill(); ctx.stroke();
             ctx.shadowBlur = 0;
 
-            drawStateLabel(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10, '#9999b8');
+            drawStateLabel(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10, '#9999b8');
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, 4);
         },
@@ -594,9 +655,19 @@ export function CosmicSlider({ seed = 42, dustCount = 80 } = {}) {
  * Laser Slider -- Energy beam traces the filled track. Pulsing plasma thumb.
  */
 export function LaserSlider() {
-    let pulseTime = 0;
+    const REF = 100;          // gradient reference width; scaled to tx at paint
+    let pulseTime = 0, beam = null;
 
     return {
+        init(ctx) {
+            // Fixed-stop beam gradient built once (0..REF). Scaling the space to
+            // tx/REF at fill maps it to 0..tx with the white tip at the thumb --
+            // no per-frame createLinearGradient.
+            beam = ctx.createLinearGradient(0, 0, REF, 0);
+            beam.addColorStop(0, 'transparent');
+            beam.addColorStop(0.8, '#38bdf8');
+            beam.addColorStop(1, '#fff');
+        },
         tick(ctx, dt, now, st) {
             pulseTime += dt * 10;
 
@@ -607,26 +678,26 @@ export function LaserSlider() {
 
             const tx = st.val * st.w;
 
-            // Laser beam gradient
+            // Laser beam (gradient from init, scaled to 0..tx)
             if (tx > 2) {
-                const g = ctx.createLinearGradient(0, 0, tx, 0);
-                g.addColorStop(0, 'transparent');
-                g.addColorStop(0.8, '#38bdf8');
-                g.addColorStop(1, '#fff');
-                ctx.fillStyle = g;
+                ctx.save();
+                ctx.scale(tx / REF, 1);
+                ctx.fillStyle = beam || '#38bdf8';
                 ctx.shadowBlur = 10; ctx.shadowColor = '#38bdf8';
-                roundRect(ctx, 0, 12, tx, 4, 2);
+                roundRect(ctx, 0, 12, REF, 4, 2);
                 ctx.fill();
+                ctx.restore();
             }
 
-            // Plasma thumb (pulsing)
+            // Plasma thumb (pulsing) -- keep the glow the beam left on
+            ctx.shadowBlur = 10; ctx.shadowColor = '#38bdf8';
             ctx.fillStyle = '#fff';
             ctx.beginPath();
             ctx.arc(tx, 14, 8 + Math.sin(pulseTime) * 2, 0, Math.PI * 2);
             ctx.fill();
             ctx.shadowBlur = 0;
 
-            drawStateLabel(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10, '#9999b8');
+            drawStateLabel(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10, '#9999b8');
 
             if (st.focused) drawFocusRing(ctx, st.w, st.h, 4);
         },
@@ -669,10 +740,23 @@ export function PendulumToggle() {
 /** 2. Circuit Toggle -- Electricity flows through a circuit path when ON. */
 export function CircuitToggle({ seed = 42 } = {}) {
     const rng = new Random(seed);
-    let sparks = [], knobX = 18, flowT = 0;
+    // Fixed spark pool (life <= 0 == dead) -- no push/splice on the hot path.
+    const SPARKS = 16;
+    const spark = [];
+    for (let i = 0; i < SPARKS; i++) spark[i] = { t: 0, life: 0, speed: 0 };
+    const DASH_FLOW = [4, 4]; // one shared dash array, reused every frame
+    let knobX = 18, flowT = 0;
+
+    function spawn(t) {
+        for (let i = 0; i < SPARKS; i++) {
+            const s = spark[i];
+            if (s.life <= 0) { s.t = t; s.life = 1; s.speed = rng.range(0.3, 0.8); return; }
+        }
+    }
+
     return {
         onToggle(checked) {
-            if (checked) for (let i = 0; i < 8; i++) sparks.push({ t: rng.range(0, 1), life: 1, speed: rng.range(0.3, 0.8) });
+            if (checked) for (let i = 0; i < 8; i++) spawn(rng.range(0, 1));
         },
         tick(ctx, dt, now, st) {
             knobX = lerp(knobX, st.toggled ? st.w - 18 : 18, dt * 12);
@@ -683,24 +767,27 @@ export function CircuitToggle({ seed = 42 } = {}) {
 
             // Circuit path
             ctx.strokeStyle = st.toggled ? '#22d3ee' : 'rgba(255,255,255,.06)';
-            ctx.lineWidth = 2; ctx.setLineDash([4, 4]); ctx.lineDashOffset = -flowT * 16;
+            ctx.lineWidth = 2; ctx.setLineDash(DASH_FLOW); ctx.lineDashOffset = -flowT * 16;
             ctx.beginPath(); ctx.moveTo(8, st.h / 2); ctx.lineTo(st.w - 8, st.h / 2); ctx.stroke();
-            ctx.setLineDash([]); ctx.lineDashOffset = 0;
+            ctx.setLineDash(DASH_NONE); ctx.lineDashOffset = 0;
 
-            // Flowing sparks
+            // Flowing sparks -- fixed pool, per-spark alpha via globalAlpha
             if (st.toggled) {
                 ctx.fillStyle = '#22d3ee';
-                for (let i = sparks.length - 1; i >= 0; i--) {
-                    const s = sparks[i];
+                let alive = 0;
+                for (let i = 0; i < SPARKS; i++) {
+                    const s = spark[i];
+                    if (s.life <= 0) continue;
                     s.t += s.speed * dt; s.life -= dt * 0.5;
-                    if (s.life <= 0 || s.t > 1) { sparks.splice(i, 1); continue; }
+                    if (s.life <= 0 || s.t > 1) { s.life = 0; continue; }
+                    alive++;
                     const sx = 8 + s.t * (st.w - 16);
                     ctx.globalAlpha = s.life;
                     ctx.beginPath(); ctx.arc(sx, st.h / 2, 2, 0, Math.PI * 2); ctx.fill();
                 }
                 ctx.globalAlpha = 1;
                 // Continuous spawn
-                if (sparks.length < 12) sparks.push({ t: 0, life: 1, speed: rng.range(0.3, 0.8) });
+                if (alive < 12) spawn(0);
             }
 
             ctx.fillStyle = st.toggled ? '#22d3ee' : '#9999b8';
@@ -762,10 +849,20 @@ export function DNAToggle() {
                 const t = i / 20, x = 6 + t * (st.w - 12);
                 const y1 = cy + Math.sin(phase + t * Math.PI * 3) * 8;
                 const y2 = cy - Math.sin(phase + t * Math.PI * 3) * 8;
-                ctx.fillStyle = st.toggled ? `rgba(167,139,250,${0.3 + Math.sin(phase + t * 6) * 0.2})` : 'rgba(255,255,255,.08)';
-                ctx.beginPath(); ctx.arc(x, y1, 2, 0, Math.PI * 2); ctx.fill();
-                ctx.fillStyle = st.toggled ? `rgba(244,114,182,${0.3 + Math.cos(phase + t * 6) * 0.2})` : 'rgba(255,255,255,.06)';
-                ctx.beginPath(); ctx.arc(x, y2, 2, 0, Math.PI * 2); ctx.fill();
+                // Const strand colors, per-dot alpha via globalAlpha (was two
+                // `rgba(...,${...})` templates built per dot per frame).
+                if (st.toggled) {
+                    ctx.fillStyle = '#a78bfa'; ctx.globalAlpha = 0.3 + Math.sin(phase + t * 6) * 0.2;
+                    ctx.beginPath(); ctx.arc(x, y1, 2, 0, Math.PI * 2); ctx.fill();
+                    ctx.fillStyle = '#f472b6'; ctx.globalAlpha = 0.3 + Math.cos(phase + t * 6) * 0.2;
+                    ctx.beginPath(); ctx.arc(x, y2, 2, 0, Math.PI * 2); ctx.fill();
+                    ctx.globalAlpha = 1;
+                } else {
+                    ctx.fillStyle = 'rgba(255,255,255,.08)';
+                    ctx.beginPath(); ctx.arc(x, y1, 2, 0, Math.PI * 2); ctx.fill();
+                    ctx.fillStyle = 'rgba(255,255,255,.06)';
+                    ctx.beginPath(); ctx.arc(x, y2, 2, 0, Math.PI * 2); ctx.fill();
+                }
                 if (i % 3 === 0) {
                     ctx.strokeStyle = 'rgba(255,255,255,.04)'; ctx.lineWidth = 0.5;
                     ctx.beginPath(); ctx.moveTo(x, y1); ctx.lineTo(x, y2); ctx.stroke();
@@ -788,14 +885,25 @@ export function DNAToggle() {
 /** 5. Heartbeat Button -- Heart icon pumps with particle burst on click. */
 export function HeartbeatButton({ seed = 42 } = {}) {
     const rng = new Random(seed);
-    let scale = 1, particles = [], beatPhase = 0;
+    // Fixed particle pool (life <= 0 == dead) -- no push/splice on the hot path.
+    const PARTS = 32;
+    const part = [];
+    for (let i = 0; i < PARTS; i++) part[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0 };
+    let scale = 1, beatPhase = 0;
+    function spawn(x, y) {
+        for (let i = 0; i < PARTS; i++) {
+            const p = part[i];
+            if (p.life <= 0) {
+                const a = rng.range(0, Math.PI * 2), v = rng.range(40, 120);
+                p.x = x; p.y = y; p.vx = Math.cos(a) * v; p.vy = Math.sin(a) * v; p.life = 1;
+                return;
+            }
+        }
+    }
     return {
         onClick(x, y) {
             scale = 1.3;
-            for (let i = 0; i < 12; i++) {
-                const a = rng.range(0, Math.PI * 2), v = rng.range(40, 120);
-                particles.push({ x: x || 80, y: y || 24, vx: Math.cos(a) * v, vy: Math.sin(a) * v, life: 1 });
-            }
+            for (let i = 0; i < 12; i++) spawn(x || 80, y || 24);
         },
         tick(ctx, dt, now, st) {
             scale = lerp(scale, 1, dt * 8);
@@ -815,15 +923,18 @@ export function HeartbeatButton({ seed = 42 } = {}) {
             ctx.bezierCurveTo(20, -2, 10, -6, 0, 4);
             ctx.fill(); ctx.restore();
 
-            // Particles
+            // Particles -- fixed pool, const color, alpha via globalAlpha
             ctx.globalCompositeOperation = 'screen';
-            for (let i = particles.length - 1; i >= 0; i--) {
-                const p = particles[i];
+            ctx.fillStyle = '#ff3c64';
+            for (let i = 0; i < PARTS; i++) {
+                const p = part[i];
+                if (p.life <= 0) continue;
                 p.x += p.vx * dt; p.y += p.vy * dt; p.life -= 2 * dt;
-                if (p.life <= 0) { particles.splice(i, 1); continue; }
-                ctx.fillStyle = `rgba(255,60,100,${p.life})`;
+                if (p.life <= 0) continue;
+                ctx.globalAlpha = p.life;
                 ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2); ctx.fill();
             }
+            ctx.globalAlpha = 1;
             ctx.globalCompositeOperation = 'source-over';
             if (st.focused) focusRing(ctx, st.w, st.h, 10);
         },
@@ -832,6 +943,13 @@ export function HeartbeatButton({ seed = 42 } = {}) {
 
 /** 6. Breathing Button -- Inhale/exhale pulse with particle halo. */
 export function BreathingButton() {
+    // Alpha-graded green LUT (same RGB #6ee7b6, quantized alpha) built once, so
+    // the pulsing glow is a const-string lookup instead of three
+    // `rgba(110,231,182,${...})` templates per frame. shadowColor's alpha is not
+    // globalAlpha, so a LUT (not globalAlpha) is the zero-alloc fit here.
+    const GREEN = [];
+    for (let i = 0; i <= 64; i++) GREEN[i] = 'rgba(110,231,182,' + (i / 64).toFixed(3) + ')';
+    function greenA(a) { const i = a <= 0 ? 0 : a >= 1 ? 64 : (a * 64) | 0; return GREEN[i]; }
     let phase = 0;
     return {
         tick(ctx, dt, now, st) {
@@ -840,13 +958,13 @@ export function BreathingButton() {
             const radius = 4 + breath * 6;
 
             // Outer glow
-            ctx.shadowBlur = 10 + breath * 15; ctx.shadowColor = `rgba(110,231,182,${0.2 + breath * 0.3})`;
-            ctx.fillStyle = `rgba(110,231,182,${0.05 + breath * 0.08})`;
+            ctx.shadowBlur = 10 + breath * 15; ctx.shadowColor = greenA(0.2 + breath * 0.3);
+            ctx.fillStyle = greenA(0.05 + breath * 0.08);
             roundRect(ctx, 0, 0, st.w, st.h, 10); ctx.fill();
             ctx.shadowBlur = 0;
 
             // Halo ring
-            ctx.strokeStyle = `rgba(110,231,182,${0.1 + breath * 0.2})`;
+            ctx.strokeStyle = greenA(0.1 + breath * 0.2);
             ctx.lineWidth = 1;
             ctx.beginPath(); ctx.arc(st.w / 2, st.h / 2, st.w / 2 + radius, 0, Math.PI * 2); ctx.stroke();
 
@@ -861,15 +979,26 @@ export function BreathingButton() {
 /** 7. Ink Splash Button -- Calligraphy ink splatter on click. */
 export function InkSplashButton({ seed = 42 } = {}) {
     const rng = new Random(seed);
-    let splats = [], pressScale = 1;
+    // Fixed splat pool (life <= 0 == dead).
+    const SPLATS = 32;
+    const splat = [];
+    for (let i = 0; i < SPLATS; i++) splat[i] = { x: 0, y: 0, r: 0, life: 0 };
+    let pressScale = 1;
+    function spawn(cx, cy) {
+        for (let i = 0; i < SPLATS; i++) {
+            const s = splat[i];
+            if (s.life <= 0) {
+                const a = rng.range(0, Math.PI * 2), d = rng.range(5, 35);
+                s.x = cx + Math.cos(a) * d; s.y = cy + Math.sin(a) * d; s.r = rng.range(2, 8); s.life = 1;
+                return;
+            }
+        }
+    }
     return {
         onClick(x, y) {
             pressScale = 0.88;
             const cx = x || 80, cy = y || 24;
-            for (let i = 0; i < 20; i++) {
-                const a = rng.range(0, Math.PI * 2), d = rng.range(5, 35);
-                splats.push({ x: cx + Math.cos(a) * d, y: cy + Math.sin(a) * d, r: rng.range(2, 8), life: 1 });
-            }
+            for (let i = 0; i < 20; i++) spawn(cx, cy);
         },
         tick(ctx, dt, now, st) {
             pressScale = lerp(pressScale, 1, dt * 8);
@@ -880,12 +1009,17 @@ export function InkSplashButton({ seed = 42 } = {}) {
             ctx.fillText('INK', st.w / 2, st.h / 2);
             ctx.restore();
 
-            for (let i = splats.length - 1; i >= 0; i--) {
-                const s = splats[i]; s.life -= 1.5 * dt;
-                if (s.life <= 0) { splats.splice(i, 1); continue; }
-                ctx.fillStyle = `rgba(30,30,50,${s.life * 0.7})`;
+            // Splats -- fixed pool, const color, alpha via globalAlpha
+            ctx.fillStyle = '#1e1e32';
+            for (let i = 0; i < SPLATS; i++) {
+                const s = splat[i];
+                if (s.life <= 0) continue;
+                s.life -= 1.5 * dt;
+                if (s.life <= 0) continue;
+                ctx.globalAlpha = s.life * 0.7;
                 ctx.beginPath(); ctx.arc(s.x, s.y, s.r * easeOut(1 - s.life), 0, Math.PI * 2); ctx.fill();
             }
+            ctx.globalAlpha = 1;
             if (st.focused) focusRing(ctx, st.w, st.h, 10);
         },
     };
@@ -941,12 +1075,36 @@ export function PixelDissolveButton({ seed = 42, cols = 16, rows = 5 } = {}) {
 /** 9. Firework Button -- Shoots fireworks upward on click. */
 export function FireworkButton({ seed = 42 } = {}) {
     const rng = new Random(seed);
-    let rockets = [], sparks = [], pressScale = 1;
     const colors = ['#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff', '#ff6bcb'];
+    // Fixed pools (life <= 0 == dead) -- no push/splice on the hot path.
+    const ROCKETS = 16, SPARKS = 256;
+    const rocket = [];
+    for (let i = 0; i < ROCKETS; i++) rocket[i] = { x: 0, y: 0, vy: 0, life: 0, color: '#fff' };
+    const spark = [];
+    for (let i = 0; i < SPARKS; i++) spark[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0, color: '#fff' };
+    let pressScale = 1;
+
+    function spawnRocket(x, y) {
+        for (let i = 0; i < ROCKETS; i++) {
+            const r = rocket[i];
+            if (r.life <= 0) { r.x = x; r.y = y; r.vy = -rng.range(150, 250); r.life = 1; r.color = rng.pick(colors); return; }
+        }
+    }
+    function spawnSpark(x, y, color) {
+        for (let i = 0; i < SPARKS; i++) {
+            const s = spark[i];
+            if (s.life <= 0) {
+                const a = rng.range(0, Math.PI * 2), v = rng.range(30, 100);
+                s.x = x; s.y = y; s.vx = Math.cos(a) * v; s.vy = Math.sin(a) * v; s.life = 1; s.color = color;
+                return;
+            }
+        }
+    }
+
     return {
         onClick(x, y, st) {
             pressScale = 0.88;
-            rockets.push({ x: x || st.w / 2, y: st.h, vy: -rng.range(150, 250), life: 1, color: rng.pick(colors) });
+            spawnRocket(x || st.w / 2, st.h);
         },
         tick(ctx, dt, now, st) {
             pressScale = lerp(pressScale, 1, dt * 10);
@@ -956,24 +1114,25 @@ export function FireworkButton({ seed = 42 } = {}) {
             ctx.fillText('\u{1F386} FIRE', st.w / 2, st.h / 2);
             ctx.restore();
 
-            // Rockets
-            for (let i = rockets.length - 1; i >= 0; i--) {
-                const r = rockets[i]; r.y += r.vy * dt; r.vy += 80 * dt; r.life -= dt;
+            // Rockets -- fixed pool; on death, burst into sparks
+            for (let i = 0; i < ROCKETS; i++) {
+                const r = rocket[i];
+                if (r.life <= 0) continue;
+                r.y += r.vy * dt; r.vy += 80 * dt; r.life -= dt;
                 ctx.fillStyle = r.color; ctx.beginPath(); ctx.arc(r.x, r.y, 3, 0, Math.PI * 2); ctx.fill();
                 if (r.life <= 0 || r.y < -20) {
-                    for (let j = 0; j < 20; j++) {
-                        const a = rng.range(0, Math.PI * 2), v = rng.range(30, 100);
-                        sparks.push({ x: r.x, y: r.y, vx: Math.cos(a) * v, vy: Math.sin(a) * v, life: 1, color: r.color });
-                    }
-                    rockets.splice(i, 1);
+                    for (let j = 0; j < 20; j++) spawnSpark(r.x, r.y, r.color);
+                    r.life = 0;
                 }
             }
 
-            // Sparks
+            // Sparks -- fixed pool, const color per spark, alpha via globalAlpha
             ctx.globalCompositeOperation = 'screen';
-            for (let i = sparks.length - 1; i >= 0; i--) {
-                const s = sparks[i]; s.x += s.vx * dt; s.y += s.vy * dt; s.vy += 60 * dt; s.life -= 1.5 * dt;
-                if (s.life <= 0) { sparks.splice(i, 1); continue; }
+            for (let i = 0; i < SPARKS; i++) {
+                const s = spark[i];
+                if (s.life <= 0) continue;
+                s.x += s.vx * dt; s.y += s.vy * dt; s.vy += 60 * dt; s.life -= 1.5 * dt;
+                if (s.life <= 0) continue;
                 ctx.fillStyle = s.color; ctx.globalAlpha = s.life;
                 ctx.beginPath(); ctx.arc(s.x, s.y, 1.5, 0, Math.PI * 2); ctx.fill();
             }
@@ -990,24 +1149,40 @@ export function FireworkButton({ seed = 42 } = {}) {
 
 /** 10. Aurora Slider -- Northern lights colors flow along the filled track. */
 export function AuroraSlider() {
-    let time = 0;
+    const REF = 100, PHASES = 12;
     const colors = ['#6ee7b6', '#38bdf8', '#a78bfa', '#c084fc'];
+    let time = 0;
+    // The shimmer animated the gradient stops per frame. Pre-build one gradient
+    // per animation phase in init (all 0..REF) and cycle them by time; scale to
+    // tx/REF at paint. Bounded, const set -> no per-frame createLinearGradient.
+    const beams = [];
     return {
+        init(ctx) {
+            for (let p = 0; p < PHASES; p++) {
+                const t = p / PHASES * PI2;
+                const g = ctx.createLinearGradient(0, 0, REF, 0);
+                for (let i = 0; i < 4; i++) {
+                    const pos = clamp(i / 3 + Math.sin(t + i) * 0.15, 0, 1);
+                    g.addColorStop(pos, colors[i]);
+                }
+                beams[p] = g;
+            }
+        },
         tick(ctx, dt, now, st) {
             time += dt;
             ctx.fillStyle = 'rgba(255,255,255,.06)'; roundRect(ctx, 0, 12, st.w, 4, 2); ctx.fill();
             const tx = st.val * st.w;
             if (tx > 2) {
-                const g = ctx.createLinearGradient(0, 0, tx, 0);
-                for (let i = 0; i < 4; i++) {
-                    const pos = clamp((i / 3 + Math.sin(time + i) * 0.15), 0, 1);
-                    g.addColorStop(pos, colors[i]);
-                }
-                ctx.fillStyle = g; ctx.shadowBlur = 8; ctx.shadowColor = '#6ee7b6';
-                roundRect(ctx, 0, 12, tx, 4, 2); ctx.fill(); ctx.shadowBlur = 0;
+                const beam = beams[((time * 2) | 0) % PHASES] || beams[0];
+                ctx.save();
+                ctx.scale(tx / REF, 1);
+                ctx.fillStyle = beam; ctx.shadowBlur = 8; ctx.shadowColor = '#6ee7b6';
+                roundRect(ctx, 0, 12, REF, 4, 2); ctx.fill();
+                ctx.restore();
+                ctx.shadowBlur = 0;
             }
             ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(tx, 14, 8, 0, Math.PI * 2); ctx.fill();
-            label(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10);
+            label(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10);
             if (st.focused) focusRing(ctx, st.w, st.h, 4);
         },
     };
@@ -1029,7 +1204,7 @@ export function WaveSlider({ seed = 42 } = {}) {
                 ctx.fillRect(bx + 1, 14 - h / 2, bw - 2, h);
             }
             ctx.fillStyle = '#f472b6'; ctx.beginPath(); ctx.arc(tx, 14, 8, 0, Math.PI * 2); ctx.fill();
-            label(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10);
+            label(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10);
             if (st.focused) focusRing(ctx, st.w, st.h, 4);
         },
     };
@@ -1053,7 +1228,7 @@ export function ElasticBandSlider() {
             ctx.stroke();
 
             ctx.fillStyle = '#fb923c'; ctx.beginPath(); ctx.arc(tx, 14, 9, 0, Math.PI * 2); ctx.fill();
-            label(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 10);
+            label(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 10);
             if (st.focused) focusRing(ctx, st.w, st.h, 4);
         },
     };
@@ -1081,7 +1256,7 @@ export function GravitySlider() {
             ctx.fillStyle = '#c084fc'; ctx.beginPath();
             ctx.arc(tx, 14 + sag * Math.sin(Math.PI * st.val), 10, 0, Math.PI * 2); ctx.fill();
 
-            label(ctx, `${Math.round(st.val * 100)}%`, st.w / 2, st.h + 14);
+            label(ctx, PCT[Math.round(st.val * 100)], st.w / 2, st.h + 14);
             if (st.focused) focusRing(ctx, st.w, st.h + 8, 4);
         },
     };
@@ -1105,14 +1280,15 @@ export function OrbitLoader() {
             if (st.toggled) phase += dt;
             const cx = st.w / 2, cy = st.h / 2;
 
-            // Orbits
-            planets.forEach(p => {
+            // Orbits (plain loop -- forEach's arrow was a per-frame closure alloc)
+            for (let i = 0; i < planets.length; i++) {
+                const p = planets[i];
                 ctx.strokeStyle = 'rgba(255,255,255,.04)'; ctx.lineWidth = 0.5;
                 ctx.beginPath(); ctx.arc(cx, cy, p.r, 0, Math.PI * 2); ctx.stroke();
                 const a = phase * p.speed;
                 ctx.fillStyle = p.color;
                 ctx.beginPath(); ctx.arc(cx + Math.cos(a) * p.r, cy + Math.sin(a) * p.r, p.size, 0, Math.PI * 2); ctx.fill();
-            });
+            }
 
             // Sun
             ctx.fillStyle = '#fbbf24'; ctx.beginPath(); ctx.arc(cx, cy, 5, 0, Math.PI * 2); ctx.fill();
@@ -1136,14 +1312,17 @@ export function HelixLoader() {
                 const x2 = cx - Math.cos(a) * 16, y2 = cy - Math.sin(a) * 6;
                 const depth = (Math.sin(a) + 1) / 2;
 
-                ctx.fillStyle = `rgba(167,139,250,${0.2 + depth * 0.6})`;
+                // Const strand colors, per-node alpha via globalAlpha (was three
+                // `rgba(...,${...})` templates per node per frame).
+                ctx.fillStyle = '#a78bfa'; ctx.globalAlpha = 0.2 + depth * 0.6;
                 ctx.beginPath(); ctx.arc(x1, y1, 2 + depth, 0, Math.PI * 2); ctx.fill();
-                ctx.fillStyle = `rgba(244,114,182,${0.2 + (1 - depth) * 0.6})`;
+                ctx.fillStyle = '#f472b6'; ctx.globalAlpha = 0.2 + (1 - depth) * 0.6;
                 ctx.beginPath(); ctx.arc(x2, y2, 2 + (1 - depth), 0, Math.PI * 2); ctx.fill();
 
-                ctx.strokeStyle = `rgba(255,255,255,${0.03 + depth * 0.04})`;
+                ctx.strokeStyle = '#ffffff'; ctx.globalAlpha = 0.03 + depth * 0.04;
                 ctx.lineWidth = 0.5; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
             }
+            ctx.globalAlpha = 1;
             label(ctx, st.toggled ? 'PROCESSING' : 'IDLE', st.w / 2, st.h + 14, st.toggled ? '#c084fc' : '#8888aa');
             if (st.focused) focusRing(ctx, st.w, st.h, st.h / 2);
         },
@@ -1157,9 +1336,18 @@ export function HelixLoader() {
 
 /** 16. Ripple Checkbox -- Material-style ripple ring + morphing checkmark. */
 export function RippleCheck() {
-    let ripples = [], checkT = 0;
+    // Fixed ripple pool (life <= 0 == dead) -- no push/splice on the hot path.
+    const RIPPLES = 8;
+    const ripR = new Float64Array(RIPPLES);
+    const ripLife = new Float64Array(RIPPLES);
+    let checkT = 0;
+    function spawn() {
+        for (let i = 0; i < RIPPLES; i++) {
+            if (ripLife[i] <= 0) { ripR[i] = 0; ripLife[i] = 1; return; }
+        }
+    }
     return {
-        onToggle(checked) { if (checked) ripples.push({ r: 0, life: 1 }); },
+        onToggle(checked) { if (checked) spawn(); },
         tick(ctx, dt, now, st) {
             checkT = lerp(checkT, st.toggled ? 1 : 0, dt * 10);
             const sz = Math.min(st.w, st.h), cx = sz / 2, cy = sz / 2;
@@ -1168,13 +1356,16 @@ export function RippleCheck() {
             ctx.fillStyle = st.toggled ? '#6ee7b6' : 'rgba(255,255,255,.06)';
             roundRect(ctx, 0, 0, sz, sz, 6); ctx.fill();
 
-            // Ripples
-            for (let i = ripples.length - 1; i >= 0; i--) {
-                const r = ripples[i]; r.r += 50 * dt; r.life -= 2 * dt;
-                if (r.life <= 0) { ripples.splice(i, 1); continue; }
-                ctx.strokeStyle = `rgba(110,231,182,${r.life})`; ctx.lineWidth = 2;
-                ctx.beginPath(); ctx.arc(cx, cy, r.r, 0, Math.PI * 2); ctx.stroke();
+            // Ripples -- fixed pool, const color, alpha via globalAlpha
+            ctx.strokeStyle = '#6ee7b6'; ctx.lineWidth = 2;
+            for (let i = 0; i < RIPPLES; i++) {
+                if (ripLife[i] <= 0) continue;
+                ripR[i] += 50 * dt; ripLife[i] -= 2 * dt;
+                if (ripLife[i] <= 0) continue;
+                ctx.globalAlpha = ripLife[i];
+                ctx.beginPath(); ctx.arc(cx, cy, ripR[i], 0, Math.PI * 2); ctx.stroke();
             }
+            ctx.globalAlpha = 1;
 
             // Checkmark (animated draw)
             if (checkT > 0.01) {
@@ -1201,8 +1392,15 @@ export function MorphCheck() {
             t = lerp(t, st.toggled ? 1 : 0, dt * 8);
             const sz = Math.min(st.w, st.h), cx = sz / 2, cy = sz / 2;
 
-            ctx.fillStyle = lerp(0.06, 0.15, t) < 0.1 ? 'rgba(255,255,255,.06)' : `rgba(56,189,248,${lerp(0, 0.2, t)})`;
-            roundRect(ctx, 0, 0, sz, sz, 6); ctx.fill();
+            // Box bg: faint white early, blue (alpha via globalAlpha) as t rises.
+            if (lerp(0.06, 0.15, t) < 0.1) {
+                ctx.fillStyle = 'rgba(255,255,255,.06)';
+                roundRect(ctx, 0, 0, sz, sz, 6); ctx.fill();
+            } else {
+                ctx.fillStyle = '#38bdf8'; ctx.globalAlpha = lerp(0, 0.2, t);
+                roundRect(ctx, 0, 0, sz, sz, 6); ctx.fill();
+                ctx.globalAlpha = 1;
+            }
 
             ctx.strokeStyle = t > 0.5 ? '#38bdf8' : '#9999b8'; ctx.lineWidth = 2.5; ctx.lineCap = 'round';
 
@@ -1241,34 +1439,50 @@ export function MorphCheck() {
 /** 18. Flame Counter -- Number with rising heat particles driven by slider value. */
 export function FlameCounter({ seed = 42 } = {}) {
     const rng = new Random(seed);
-    let embers = [];
+    // Fixed ember pool + heat-color LUT (rgb quantized by value), so neither the
+    // pool nor the per-ember color allocates. The number string is rebuilt only
+    // when the displayed integer changes.
+    const EMBERS = 64;
+    const ember = [];
+    for (let i = 0; i < EMBERS; i++) ember[i] = { x: 0, y: 0, vy: 0, life: 0, size: 0 };
+    const HEAT = [];
+    for (let i = 0; i <= 32; i++) HEAT[i] = 'rgb(' + Math.round(200 + (i / 32) * 55) + ',' + Math.round(60 + (i / 32) * 80) + ',20)';
+    let numStr = '0', lastNum = -1;
+    function spawn(st) {
+        for (let i = 0; i < EMBERS; i++) {
+            const e = ember[i];
+            if (e.life <= 0) { e.x = rng.range(20, st.w - 20); e.y = st.h - 5; e.vy = -rng.range(20, 60); e.life = 1; e.size = rng.range(1, 3); return; }
+        }
+    }
     return {
         tick(ctx, dt, now, st) {
             const val = Math.round(st.val * 999);
+            if (val !== lastNum) { lastNum = val; numStr = String(val); }
 
-            // Spawn embers proportional to value
-            if (st.val > 0.1 && embers.length < 60) {
-                embers.push({ x: rng.range(20, st.w - 20), y: st.h - 5, vy: -rng.range(20, 60), life: 1, size: rng.range(1, 3) });
-            }
+            // Spawn embers proportional to value (pool self-caps at EMBERS)
+            if (st.val > 0.1) spawn(st);
 
             // Background
             ctx.fillStyle = 'rgba(255,255,255,.03)'; roundRect(ctx, 0, 0, st.w, st.h, 10); ctx.fill();
 
-            // Embers
+            // Embers -- fixed pool, heat color via LUT, alpha via globalAlpha
             ctx.globalCompositeOperation = 'screen';
-            for (let i = embers.length - 1; i >= 0; i--) {
-                const e = embers[i]; e.y += e.vy * dt; e.life -= dt * 0.8;
-                if (e.life <= 0) { embers.splice(i, 1); continue; }
-                const heat = st.val;
-                ctx.fillStyle = `rgba(${200 + heat * 55},${60 + heat * 80},${20},${e.life})`;
+            ctx.fillStyle = HEAT[(st.val * 32) | 0] || HEAT[32];
+            for (let i = 0; i < EMBERS; i++) {
+                const e = ember[i];
+                if (e.life <= 0) continue;
+                e.y += e.vy * dt; e.life -= dt * 0.8;
+                if (e.life <= 0) continue;
+                ctx.globalAlpha = e.life;
                 ctx.beginPath(); ctx.arc(e.x, e.y, e.size, 0, Math.PI * 2); ctx.fill();
             }
+            ctx.globalAlpha = 1;
             ctx.globalCompositeOperation = 'source-over';
 
             // Number
             ctx.fillStyle = st.val > 0.7 ? '#ff6b6b' : st.val > 0.3 ? '#fbbf24' : '#9999b8';
             ctx.font = "700 28px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-            ctx.fillText(String(val), st.w / 2, st.h / 2);
+            ctx.fillText(numStr, st.w / 2, st.h / 2);
 
             label(ctx, 'HEAT', st.w / 2, st.h + 12);
             if (st.focused) focusRing(ctx, st.w, st.h, 10);
@@ -1279,17 +1493,20 @@ export function FlameCounter({ seed = 42 } = {}) {
 /** 19. Glitch Counter -- Number glitches and jitters as slider value increases. */
 export function GlitchCounter({ seed = 42 } = {}) {
     const rng = new Random(seed);
+    let numStr = '0', lastNum = -1;
     return {
         tick(ctx, dt, now, st) {
             const val = Math.round(st.val * 999);
+            if (val !== lastNum) { lastNum = val; numStr = String(val); }
             const intensity = st.val;
 
             ctx.fillStyle = 'rgba(255,255,255,.03)'; roundRect(ctx, 0, 0, st.w, st.h, 10); ctx.fill();
 
-            // Scanlines
+            // Scanlines -- const white, alpha via globalAlpha
             if (intensity > 0.2) {
-                ctx.fillStyle = `rgba(255,255,255,${intensity * 0.03})`;
+                ctx.fillStyle = '#ffffff'; ctx.globalAlpha = intensity * 0.03;
                 for (let y = 0; y < st.h; y += 3) ctx.fillRect(0, y, st.w, 1);
+                ctx.globalAlpha = 1;
             }
 
             // Glitched number
@@ -1298,17 +1515,20 @@ export function GlitchCounter({ seed = 42 } = {}) {
 
             if (intensity > 0.3 && rng.next() > 0.6) {
                 ctx.globalCompositeOperation = 'screen';
-                ctx.fillStyle = `rgba(255,0,85,${intensity * 0.4})`;
                 ctx.font = "700 28px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-                ctx.fillText(String(val), st.w / 2 + jx - 2, st.h / 2 + jy);
-                ctx.fillStyle = `rgba(0,255,204,${intensity * 0.4})`;
-                ctx.fillText(String(val), st.w / 2 + jx + 2, st.h / 2 + jy);
+                // RGB split -- const channel colors, shared alpha via globalAlpha
+                ctx.globalAlpha = intensity * 0.4;
+                ctx.fillStyle = '#ff0055';
+                ctx.fillText(numStr, st.w / 2 + jx - 2, st.h / 2 + jy);
+                ctx.fillStyle = '#00ffcc';
+                ctx.fillText(numStr, st.w / 2 + jx + 2, st.h / 2 + jy);
+                ctx.globalAlpha = 1;
                 ctx.globalCompositeOperation = 'source-over';
             }
 
             ctx.fillStyle = '#e2e2f0';
             ctx.font = "700 28px 'JetBrains Mono',monospace"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-            ctx.fillText(String(val), st.w / 2 + jx, st.h / 2 + jy);
+            ctx.fillText(numStr, st.w / 2 + jx, st.h / 2 + jy);
 
             label(ctx, 'SIGNAL', st.w / 2, st.h + 12);
             if (st.focused) focusRing(ctx, st.w, st.h, 10);
@@ -1324,9 +1544,27 @@ export function GlitchCounter({ seed = 42 } = {}) {
 /** 20. Bubble Rating -- 5 bubbles inflate based on slider position. Click pops them. */
 export function BubbleRating({ seed = 42 } = {}) {
     const rng = new Random(seed);
-    let pops = [], sizes = new Float32Array(5);
+    const R5 = ['0 / 5', '1 / 5', '2 / 5', '3 / 5', '4 / 5', '5 / 5']; // const labels
+    const POPS = 32;
+    const pop = [];
+    for (let i = 0; i < POPS; i++) pop[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0 };
+    const sizes = new Float32Array(5);
+    let lastW = 200;
+    function spawnPops(cx) {
+        for (let j = 0; j < 5; j++) {
+            for (let i = 0; i < POPS; i++) {
+                const p = pop[i];
+                if (p.life <= 0) {
+                    const a = rng.range(0, Math.PI * 2), v = rng.range(20, 50);
+                    p.x = cx; p.y = 14; p.vx = Math.cos(a) * v; p.vy = Math.sin(a) * v; p.life = 1;
+                    break;
+                }
+            }
+        }
+    }
     return {
         tick(ctx, dt, now, st) {
+            lastW = st.w;
             const rating = Math.round(st.val * 5);
             const gap = st.w / 5;
 
@@ -1336,9 +1574,11 @@ export function BubbleRating({ seed = 42 } = {}) {
                 sizes[i] = lerp(sizes[i] || 6, targetSz, dt * 8);
                 const cx = gap * i + gap / 2, cy = st.h / 2;
 
-                // Bubble
-                ctx.fillStyle = active ? `rgba(56,189,248,${0.3 + sizes[i] / 20})` : 'rgba(255,255,255,.05)';
+                // Bubble -- const color, active alpha via globalAlpha
+                if (active) { ctx.fillStyle = '#38bdf8'; ctx.globalAlpha = 0.3 + sizes[i] / 20; }
+                else { ctx.fillStyle = 'rgba(255,255,255,.05)'; ctx.globalAlpha = 1; }
                 ctx.beginPath(); ctx.arc(cx, cy, sizes[i], 0, Math.PI * 2); ctx.fill();
+                ctx.globalAlpha = 1;
                 ctx.strokeStyle = active ? '#38bdf8' : 'rgba(255,255,255,.08)';
                 ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(cx, cy, sizes[i], 0, Math.PI * 2); ctx.stroke();
 
@@ -1349,25 +1589,27 @@ export function BubbleRating({ seed = 42 } = {}) {
                 }
             }
 
-            // Pop particles
-            for (let i = pops.length - 1; i >= 0; i--) {
-                const p = pops[i]; p.x += p.vx * dt; p.y += p.vy * dt; p.life -= 3 * dt;
-                if (p.life <= 0) { pops.splice(i, 1); continue; }
-                ctx.fillStyle = `rgba(56,189,248,${p.life})`; ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2); ctx.fill();
+            // Pop particles -- fixed pool, const color, alpha via globalAlpha
+            ctx.fillStyle = '#38bdf8';
+            for (let i = 0; i < POPS; i++) {
+                const p = pop[i];
+                if (p.life <= 0) continue;
+                p.x += p.vx * dt; p.y += p.vy * dt; p.life -= 3 * dt;
+                if (p.life <= 0) continue;
+                ctx.globalAlpha = p.life;
+                ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2); ctx.fill();
             }
+            ctx.globalAlpha = 1;
 
-            label(ctx, `${rating} / 5`, st.w / 2, st.h + 12, rating >= 4 ? '#38bdf8' : '#9999b8');
+            label(ctx, R5[rating], st.w / 2, st.h + 12, rating >= 4 ? '#38bdf8' : '#9999b8');
             if (st.focused) focusRing(ctx, st.w, st.h, 4);
         },
         onDrag(val) {
             const rating = Math.round(val * 5);
-            // Pop the newly activated bubble
-            const gap = 200 / 5;
+            // Pop the newly activated bubble (position derived from st.w via lastW)
+            const gap = lastW / 5;
             const cx = gap * (rating - 1) + gap / 2;
-            for (let j = 0; j < 5; j++) {
-                const a = rng.range(0, Math.PI * 2), v = rng.range(20, 50);
-                pops.push({ x: cx, y: 14, vx: Math.cos(a) * v, vy: Math.sin(a) * v, life: 1 });
-            }
+            spawnPops(cx);
         },
     };
 }
@@ -1379,8 +1621,14 @@ export function BubbleRating({ seed = 42 } = {}) {
 
 /** 1. Volume Knob -- Rotary dial with tick marks and arc indicator. */
 export function VolumeKnob() {
-    let displayVal = 0;
+    let displayVal = 0, grad = null;
+    let numStr = '0', lastNum = -1;
     return {
+        init(c, w, h) {
+            // Value-arc gradient depends only on w/h (fixed per mount) -> build once.
+            grad = c.createLinearGradient(0, h, w, 0);
+            grad.addColorStop(0, '#6ee7b6'); grad.addColorStop(1, '#38bdf8');
+        },
         tick(c,dt,now,st) {
             displayVal = lerp(displayVal, st.val, dt * 12);
             const cx=st.w/2, cy=st.h/2, R=Math.min(cx,cy)-4;
@@ -1390,11 +1638,9 @@ export function VolumeKnob() {
             c.strokeStyle='rgba(255,255,255,.06)'; c.lineWidth=4;
             c.beginPath(); c.arc(cx,cy,R,startA,endA); c.stroke();
 
-            // Value arc
+            // Value arc (gradient built once in init)
             const valA = startA + displayVal * range;
-            const grad = c.createLinearGradient(0,st.h,st.w,0);
-            grad.addColorStop(0,'#6ee7b6'); grad.addColorStop(1,'#38bdf8');
-            c.strokeStyle=grad; c.lineWidth=4;
+            c.strokeStyle = grad || '#38bdf8'; c.lineWidth=4;
             c.beginPath(); c.arc(cx,cy,R,startA,valA); c.stroke();
 
             // Tick marks
@@ -1416,9 +1662,11 @@ export function VolumeKnob() {
             c.fillStyle='rgba(255,255,255,.04)';
             c.beginPath(); c.arc(cx,cy,R*0.4,0,PI2); c.fill();
 
-            // Value text
+            // Value text (rebuilt only when the integer changes)
+            const v = Math.round(displayVal * 100);
+            if (v !== lastNum) { lastNum = v; numStr = String(v); }
             c.fillStyle='#e2e2f0'; c.font="700 14px 'JetBrains Mono',monospace"; c.textAlign='center'; c.textBaseline='middle';
-            c.fillText(Math.round(displayVal*100),cx,cy);
+            c.fillText(numStr,cx,cy);
             lbl(c,'VOLUME',cx,st.h+10);
             if(st.focused)fr(c,st.w,st.h,st.h/2);
         },
@@ -1427,7 +1675,10 @@ export function VolumeKnob() {
 
 /** 2. Compass Knob -- Needle points based on slider value (0=N, 0.5=S, 1=N). */
 export function CompassKnob() {
-    let needleA=0;
+    const dirs = ['N', 'E', 'S', 'W'];                          // hoisted out of tick
+    const cols = ['#ff6b6b', '#9999b8', '#9999b8', '#9999b8'];  // (were per-frame arrays)
+    let needleA = 0;
+    let degStr = '0\u00B0', lastDeg = -1;
     return {
         tick(c,dt,now,st) {
             const targetA = st.val * PI2;
@@ -1439,7 +1690,6 @@ export function CompassKnob() {
             c.beginPath(); c.arc(cx,cy,R,0,PI2); c.stroke();
 
             // Cardinal marks
-            const dirs=['N','E','S','W'], cols=['#ff6b6b','#9999b8','#9999b8','#9999b8'];
             for(let i=0;i<4;i++){
                 const a=-Math.PI/2+i*Math.PI/2;
                 c.fillStyle=cols[i]; c.font="600 9px 'JetBrains Mono',monospace"; c.textAlign='center'; c.textBaseline='middle';
@@ -1458,7 +1708,9 @@ export function CompassKnob() {
             c.fillStyle='#333'; c.beginPath(); c.arc(cx,cy,4,0,PI2); c.fill();
             c.strokeStyle='rgba(255,255,255,.1)'; c.lineWidth=1; c.beginPath(); c.arc(cx,cy,4,0,PI2); c.stroke();
 
-            lbl(c,Math.round(st.val*360)+'\u00B0',cx,st.h+10);
+            const deg = Math.round(st.val * 360);
+            if (deg !== lastDeg) { lastDeg = deg; degStr = deg + '\u00B0'; }
+            lbl(c, degStr, cx, st.h + 10);
             if(st.focused)fr(c,st.w,st.h,st.h/2);
         },
     };
@@ -1472,8 +1724,31 @@ export function CompassKnob() {
 /** 3. Ring Progress -- Circular progress with animated fill and particles at the tip. */
 export function RingProgress({seed=42}={}) {
     const rng=new Random(seed);
-    let displayVal=0, sparks=[];
+    // Fixed spark pool + a bounded set of conic gradients (one per progress
+    // level) built in init, so the green stop still tracks the arc tip with zero
+    // per-frame gradient construction.
+    const SPARKS = 24;
+    const spark = [];
+    for (let i = 0; i < SPARKS; i++) spark[i] = { x: 0, y: 0, vx: 0, vy: 0, life: 0 };
+    const GPHASES = 16;
+    const grads = [];
+    let displayVal = 0;
+    function spawn(x, y) {
+        for (let i = 0; i < SPARKS; i++) {
+            const s = spark[i];
+            if (s.life <= 0) { s.x = x; s.y = y; s.vx = rng.range(-20, 20); s.vy = rng.range(-20, 20); s.life = 1; return; }
+        }
+    }
     return {
+        init(c, w, h) {
+            for (let p = 0; p < GPHASES; p++) {
+                const g = c.createConicGradient(-Math.PI / 2, w / 2, h / 2);
+                g.addColorStop(0, '#a78bfa');
+                g.addColorStop((p / (GPHASES - 1)) * 0.95, '#6ee7b6');
+                g.addColorStop(1, 'rgba(110,231,182,.2)');
+                grads[p] = g;
+            }
+        },
         tick(c,dt,now,st) {
             displayVal=lerp(displayVal,st.val,dt*6);
             const cx=st.w/2,cy=st.h/2,R=Math.min(cx,cy)-6,lw=6;
@@ -1482,27 +1757,30 @@ export function RingProgress({seed=42}={}) {
             c.strokeStyle='rgba(255,255,255,.06)';c.lineWidth=lw;
             c.beginPath();c.arc(cx,cy,R,0,PI2);c.stroke();
 
-            // Fill arc
+            // Fill arc (conic gradient from init; the green stop tracks the tip)
             const a=-Math.PI/2,ea=a+displayVal*PI2;
-            const g=c.createConicGradient(a,cx,cy);
-            g.addColorStop(0,'#a78bfa');g.addColorStop(displayVal*0.95,'#6ee7b6');g.addColorStop(1,'rgba(110,231,182,.2)');
-            c.strokeStyle=g;c.lineWidth=lw;
+            c.strokeStyle = grads[(displayVal * (GPHASES - 1)) | 0] || '#6ee7b6';c.lineWidth=lw;
             c.beginPath();c.arc(cx,cy,R,a,ea);c.stroke();
 
-            // Tip sparks
+            // Tip sparks -- fixed pool, const color, alpha via globalAlpha
             if(displayVal>0.02){
                 const tx=cx+Math.cos(ea)*R,ty=cy+Math.sin(ea)*R;
-                if(sparks.length<20)sparks.push({x:tx,y:ty,vx:rng.range(-20,20),vy:rng.range(-20,20),life:1});
+                spawn(tx, ty);
             }
-            for(let i=sparks.length-1;i>=0;i--){
-                const s=sparks[i];s.x+=s.vx*dt;s.y+=s.vy*dt;s.life-=2*dt;
-                if(s.life<=0){sparks.splice(i,1);continue}
-                c.fillStyle=`rgba(110,231,182,${s.life})`;c.beginPath();c.arc(s.x,s.y,1.5,0,PI2);c.fill();
+            c.fillStyle = '#6ee7b6';
+            for(let i=0;i<SPARKS;i++){
+                const s=spark[i];
+                if(s.life<=0)continue;
+                s.x+=s.vx*dt;s.y+=s.vy*dt;s.life-=2*dt;
+                if(s.life<=0)continue;
+                c.globalAlpha=s.life;
+                c.beginPath();c.arc(s.x,s.y,1.5,0,PI2);c.fill();
             }
+            c.globalAlpha=1;
 
             // Percentage
             c.fillStyle='#e2e2f0';c.font="700 16px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-            c.fillText(Math.round(displayVal*100)+'%',cx,cy);
+            c.fillText(PCT[Math.round(displayVal*100)],cx,cy);
             if(st.focused)fr(c,st.w,st.h,st.h/2);
         },
     };
@@ -1543,7 +1821,7 @@ export function BatteryGauge() {
             }
 
             c.fillStyle='#e2e2f0';c.font="600 10px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-            c.fillText(Math.round(displayVal*100)+'%',bx+bw/2,by+bh/2);
+            c.fillText(PCT[Math.round(displayVal*100)],bx+bw/2,by+bh/2);
             if(st.focused)fr(c,st.w+4,st.h,r);
         },
     };
@@ -1654,6 +1932,7 @@ export function Stepper() {
 export function RadioOrbit() {
     let selectedGlow=new Float32Array(4);
     const names=['A','B','C','D'],colors=['#ff6b6b','#fbbf24','#6ee7b6','#38bdf8'];
+    const OPTS=['OPTION A','OPTION B','OPTION C','OPTION D']; // const (was 'OPTION '+name concat)
     return {
         tick(c,dt,now,st) {
             const sel=Math.round(st.val*3);
@@ -1668,9 +1947,9 @@ export function RadioOrbit() {
                 const active=i===sel;
                 selectedGlow[i]=lerp(selectedGlow[i],active?1:0,dt*10);
 
-                // Orbit line
-                c.strokeStyle=`rgba(255,255,255,${.03+selectedGlow[i]*.05})`;c.lineWidth=1;
-                c.beginPath();c.moveTo(cx,cy);c.lineTo(ox,oy);c.stroke();
+                // Orbit line -- const white, alpha via globalAlpha
+                c.strokeStyle='#ffffff';c.globalAlpha=.03+selectedGlow[i]*.05;c.lineWidth=1;
+                c.beginPath();c.moveTo(cx,cy);c.lineTo(ox,oy);c.stroke();c.globalAlpha=1;
 
                 // Node
                 const sz=6+selectedGlow[i]*4;
@@ -1681,7 +1960,7 @@ export function RadioOrbit() {
                 c.fillStyle=active?'#fff':'#9999b8';c.font="600 9px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
                 c.fillText(names[i],ox,oy);
             }
-            lbl(c,'OPTION '+names[sel],cx,st.h+10,colors[sel]);
+            lbl(c,OPTS[sel],cx,st.h+10,colors[sel]);
             if(st.focused)fr(c,st.w,st.h,4);
         },
     };
@@ -1752,7 +2031,7 @@ export function WaterLevel() {
             c.restore();
 
             c.fillStyle='#e2e2f0';c.font="700 12px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-            c.fillText(Math.round(displayVal*100)+'%',st.w/2,st.h/2);
+            c.fillText(PCT[Math.round(displayVal*100)],st.w/2,st.h/2);
             if(st.focused)fr(c,st.w,st.h,6);
         },
     };
@@ -1763,6 +2042,10 @@ export function HeatMap({seed=42}={}) {
     const rng=new Random(seed);
     const N=15,thresholds=new Float32Array(N);
     let vals=new Float32Array(N);
+    // Heat-color LUT (rgb quantized by heat): a const lookup + globalAlpha
+    // instead of a per-cell rgb() template every frame.
+    const HEATC=[];
+    for(let i=0;i<=32;i++)HEATC[i]='rgb('+Math.round(100+i/32*155)+','+Math.round(60+i/32*20)+','+Math.round(60-i/32*40)+')';
     return {
         init(){for(let i=0;i<N;i++)thresholds[i]=rng.range(0,1)},
         tick(c,dt,now,st) {
@@ -1775,11 +2058,12 @@ export function HeatMap({seed=42}={}) {
                 const col=i%cols,row=(i/cols)|0;
                 const x=col*(cw+gap),y=row*(ch+gap);
                 const heat=vals[i];
-                const r=Math.round(100+heat*155),g=Math.round(60+heat*20),b=Math.round(60-heat*40);
-                c.fillStyle=heat>.1?`rgba(${r},${g},${b},${.15+heat*.4})`:'rgba(255,255,255,.04)';
+                if(heat>.1){c.fillStyle=HEATC[(heat*32)|0]||HEATC[32];c.globalAlpha=.15+heat*.4;}
+                else{c.fillStyle='rgba(255,255,255,.04)';c.globalAlpha=1;}
                 rr(c,x,y,cw,ch,3);c.fill();
+                c.globalAlpha=1;
             }
-            lbl(c,Math.round(st.val*100)+'%',st.w/2,st.h+10);
+            lbl(c,PCT[Math.round(st.val*100)],st.w/2,st.h+10);
             if(st.focused)fr(c,st.w,st.h,3);
         },
     };
@@ -1793,23 +2077,31 @@ export function HeatMap({seed=42}={}) {
 /** 12. Day/Night Toggle -- Sun/moon transition with star particles. */
 export function DayNightToggle({seed=42}={}) {
     const rng=new Random(seed);
-    let t=0, stars=[];
+    // Sky-color LUT (day->night rgb quantized by t): a const lookup, not an
+    // rgb() template per frame. Stars are a fixed pool filled in init.
+    const SKY=[];
+    for(let i=0;i<=32;i++){const u=i/32;SKY[i]='rgb('+Math.round(lerp(135,10,u))+','+Math.round(lerp(206,10,u))+','+Math.round(lerp(250,30,u))+')';}
+    const STARS=30;
+    const star=[];
+    let t=0;
     return {
-        init(ctx,w,h){for(let i=0;i<30;i++)stars.push({x:rng.range(4,w-4),y:rng.range(4,h-4),twinkle:rng.range(0,PI2)})},
+        init(ctx,w,h){for(let i=0;i<STARS;i++)star[i]={x:rng.range(4,w-4),y:rng.range(4,h-4),twinkle:rng.range(0,PI2)}},
         tick(c,dt,now,st) {
             t=lerp(t,st.toggled?1:0,dt*6);
-            const skyR=Math.round(lerp(135,10,t)),skyG=Math.round(lerp(206,10,t)),skyB=Math.round(lerp(250,30,t));
 
-            // Sky background
-            c.fillStyle=`rgb(${skyR},${skyG},${skyB})`;rr(c,0,0,st.w,st.h,st.h/2);c.fill();
+            // Sky background (LUT)
+            c.fillStyle=SKY[(t*32)|0]||SKY[32];rr(c,0,0,st.w,st.h,st.h/2);c.fill();
 
-            // Stars (night only)
+            // Stars (night only) -- const white, per-star alpha via globalAlpha
             if(t>.3){
-                for(const s of stars){
+                c.fillStyle='#ffffff';
+                for(let i=0;i<STARS;i++){
+                    const s=star[i];
                     const tw=Math.sin(now/400+s.twinkle)*.5+.5;
-                    c.fillStyle=`rgba(255,255,255,${(t-.3)/.7*tw*.6})`;
+                    c.globalAlpha=(t-.3)/.7*tw*.6;
                     c.fillRect(s.x,s.y,1,1);
                 }
+                c.globalAlpha=1;
             }
 
             // Sun/Moon
@@ -1817,16 +2109,18 @@ export function DayNightToggle({seed=42}={}) {
             if(t<.5){
                 // Sun
                 c.fillStyle='#fbbf24';c.beginPath();c.arc(orbX,st.h/2,10,0,PI2);c.fill();
-                // Rays
-                c.strokeStyle=`rgba(251,191,36,${.3*(1-t*2)})`;c.lineWidth=1;
+                // Rays -- const color, alpha via globalAlpha
+                c.strokeStyle='#fbbf24';c.globalAlpha=.3*(1-t*2);c.lineWidth=1;
                 for(let i=0;i<8;i++){const a=now/800+i*Math.PI/4;c.beginPath();c.moveTo(orbX+Math.cos(a)*12,st.h/2+Math.sin(a)*12);c.lineTo(orbX+Math.cos(a)*16,st.h/2+Math.sin(a)*16);c.stroke()}
+                c.globalAlpha=1;
             } else {
                 // Moon
                 c.fillStyle='#d4d4e8';c.beginPath();c.arc(orbX,st.h/2,10,0,PI2);c.fill();
-                // Crater shadows
-                c.fillStyle=`rgba(0,0,0,${(t-.5)*2*.15})`;
+                // Crater shadows -- const black, alpha via globalAlpha
+                c.fillStyle='#000000';c.globalAlpha=(t-.5)*2*.15;
                 c.beginPath();c.arc(orbX-3,st.h/2-2,3,0,PI2);c.fill();
                 c.beginPath();c.arc(orbX+4,st.h/2+3,2,0,PI2);c.fill();
+                c.globalAlpha=1;
             }
 
             lbl(c,st.toggled?'NIGHT':'DAY',st.w/2,st.h+14,st.toggled?'#9999b8':'#fbbf24');
@@ -1839,6 +2133,9 @@ export function DayNightToggle({seed=42}={}) {
 export function ReactionPicker() {
     let sizes=new Float32Array(5), selected=-1;
     const emojis=['\u{1F610}','\u{1F642}','\u{1F60A}','\u{1F604}','\u{1F929}'],colors=['#9999b8','#fbbf24','#fb923c','#f472b6','#ff6b6b'];
+    const colors30=colors.map((col)=>col+'30');                  // active fill (was `${color}30`)
+    const REACT_LABELS=['MEH','OK','NICE','GREAT','LOVE'];        // was a per-frame array literal
+    const FONTS=[]; for(let i=0;i<=48;i++)FONTS[i]=i+'px sans-serif'; // emoji font by rounded size
     return {
         tick(c,dt,now,st,ptr) {
             const gap=st.w/5;
@@ -1850,11 +2147,11 @@ export function ReactionPicker() {
                 const cx=gap*i+gap/2,cy=st.h/2;
 
                 // Circle
-                c.fillStyle=active?`${colors[i]}30`:'rgba(255,255,255,.04)';
+                c.fillStyle=active?colors30[i]:'rgba(255,255,255,.04)';
                 c.beginPath();c.arc(cx,cy-sizes[i]+10,sizes[i],0,PI2);c.fill();
 
-                // Emoji face (simplified)
-                c.font=`${Math.round(sizes[i]*1.2)}px sans-serif`;c.textAlign='center';c.textBaseline='middle';
+                // Emoji face (simplified) -- font from a const-string LUT
+                c.font=FONTS[Math.round(sizes[i]*1.2)]||FONTS[48];c.textAlign='center';c.textBaseline='middle';
                 c.fillText(emojis[i],cx,cy-sizes[i]+10);
             }
 
@@ -1865,7 +2162,7 @@ export function ReactionPicker() {
                 c.fillRect(sx-10,st.h-4,20,2);
             }
 
-            lbl(c,hoverIdx>=0?['MEH','OK','NICE','GREAT','LOVE'][hoverIdx]:'REACT',st.w/2,st.h+10,hoverIdx>=0?colors[hoverIdx]:'#9999b8');
+            lbl(c,hoverIdx>=0?REACT_LABELS[hoverIdx]:'REACT',st.w/2,st.h+10,hoverIdx>=0?colors[hoverIdx]:'#9999b8');
             if(st.focused)fr(c,st.w,st.h,4);
         },
     };
@@ -1874,9 +2171,10 @@ export function ReactionPicker() {
 /** 14. Notification Bell -- Bell icon with bounce and count badge. */
 export function NotificationBell() {
     let count=0, bellAngle=0, bellVel=0, badgeScale=0;
+    let badgeStr='0'; // rebuilt only on click (count change), not per frame
     return {
         onClick() {
-            count++;bellVel=6;badgeScale=1.5;
+            count++;bellVel=6;badgeScale=1.5;badgeStr=count>99?'99+':String(count);
         },
         tick(c,dt,now,st) {
             bellVel+=(0-bellAngle)*20*dt;bellVel*=0.9;bellAngle+=bellVel*dt;
@@ -1897,7 +2195,7 @@ export function NotificationBell() {
                 c.save();c.translate(bx,by);c.scale(badgeScale,badgeScale);
                 c.fillStyle='#ff6b6b';c.beginPath();c.arc(0,0,8,0,PI2);c.fill();
                 c.fillStyle='#fff';c.font="700 8px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-                c.fillText(count>99?'99+':String(count),0,0);
+                c.fillText(badgeStr,0,0);
                 c.restore();
             }
 
@@ -1916,6 +2214,7 @@ export function NotificationBell() {
 export function TypewriterField() {
     const text='Hello World';
     let charIdx=0, timer=0, cursorBlink=0, typing=false;
+    let display='', dispW=0, lastIdx=-1; // substring rebuilt only when a char lands
     return {
         onToggle(checked){typing=checked;if(checked){charIdx=0;timer=0}},
         tick(c,dt,now,st) {
@@ -1925,14 +2224,14 @@ export function TypewriterField() {
             c.fillStyle='rgba(255,255,255,.04)';rr(c,0,0,st.w,st.h,6);c.fill();
             c.strokeStyle='rgba(255,255,255,.06)';c.lineWidth=1;rr(c,0,0,st.w,st.h,6);c.stroke();
 
-            const display=text.substring(0,charIdx);
             c.fillStyle='#6ee7b6';c.font="500 13px 'JetBrains Mono',monospace";c.textAlign='left';c.textBaseline='middle';
+            // Rebuild the visible substring + its width only when a char is added.
+            if(charIdx!==lastIdx){lastIdx=charIdx;display=text.substring(0,charIdx);dispW=c.measureText(display).width;}
             c.fillText(display,8,st.h/2);
 
             // Cursor
             if(cursorBlink<1){
-                const tw=c.measureText(display).width;
-                c.fillStyle='#6ee7b6';c.fillRect(9+tw,st.h/2-8,1.5,16);
+                c.fillStyle='#6ee7b6';c.fillRect(9+dispW,st.h/2-8,1.5,16);
             }
 
             lbl(c,typing?'TYPING...':'TOGGLE TO TYPE',st.w/2,st.h+10,typing?'#6ee7b6':'#8888aa');
@@ -1994,7 +2293,7 @@ export function UploadProgress() {
             // Fill
             const fillH=fh*displayVal;
             const col=displayVal>=1?'#6ee7b6':'#38bdf8';
-            c.fillStyle=`${col}30`;
+            c.fillStyle=displayVal>=1?'#6ee7b630':'#38bdf830'; // was `${col}30`
             c.save();c.beginPath();c.rect(fx+1,fy+fh-fillH,fw-1,fillH);c.clip();
             c.beginPath();c.moveTo(fx,fy);c.lineTo(fx+fw-fold,fy);c.lineTo(fx+fw,fy+fold);c.lineTo(fx+fw,fy+fh);c.lineTo(fx,fy+fh);c.closePath();c.fill();
             c.restore();
@@ -2009,7 +2308,7 @@ export function UploadProgress() {
             }
             c.lineCap='butt';
 
-            lbl(c,displayVal>=.99?'DONE':Math.round(displayVal*100)+'%',cx,st.h+10,displayVal>=.99?'#6ee7b6':'#9999b8');
+            lbl(c,displayVal>=.99?'DONE':PCT[Math.round(displayVal*100)],cx,st.h+10,displayVal>=.99?'#6ee7b6':'#9999b8');
             if(st.focused)fr(c,st.w,st.h,4);
         },
     };
@@ -2023,29 +2322,45 @@ export function UploadProgress() {
 /** 18. Scratch Reveal -- Drag to erase a mask and reveal the prize beneath. */
 export function ScratchReveal({seed=42}={}) {
     const rng=new Random(seed);
-    let revealed=0, scratches=[];
+    // Fixed scratch pool (holes persist). Once all SCR slots are used the scratch
+    // stops adding holes -- existing marks are never overwritten, so earlier
+    // scratches never "heal". Spawn position derives from st.w via lastW.
+    const SCR=64;
+    const scr=[];
+    for(let i=0;i<SCR;i++)scr[i]={x:0,y:0,r:0,live:false};
+    let revealed=0, lastW=200;
+    function spawn(val){
+        for(let i=0;i<SCR;i++){
+            const s=scr[i];
+            if(!s.live){ s.x=val*lastW; s.y=rng.range(2,26); s.r=rng.range(6,14); s.live=true; return; }
+        }
+    }
     return {
         onDrag(val,vx) {
             if(Math.abs(vx)>0.5){
-                for(let i=0;i<3;i++)scratches.push({x:val*200,y:rng.range(2,26),r:rng.range(6,14)});
+                for(let i=0;i<3;i++)spawn(val);
                 revealed=Math.min(1,revealed+0.015);
             }
         },
         tick(c,dt,now,st) {
+            lastW=st.w;
             // Prize background
             c.fillStyle='rgba(110,231,182,.08)';rr(c,0,0,st.w,st.h,8);c.fill();
 
-            // Prize text (always there, hidden by mask)
-            c.fillStyle=`rgba(110,231,182,${.1+revealed*.6})`;c.font="700 14px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
+            // Prize text -- const color, alpha via globalAlpha
+            c.fillStyle='#6ee7b6';c.globalAlpha=.1+revealed*.6;c.font="700 14px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
             c.fillText(revealed>.6?'\u{1F389} WINNER!':'? ? ?',st.w/2,st.h/2);
+            c.globalAlpha=1;
 
             // Scratch mask (gets holes)
             if(revealed<.95){
                 c.fillStyle='rgba(40,40,60,.85)';rr(c,0,0,st.w,st.h,8);c.fill();
 
-                // Cut holes
+                // Cut holes -- fixed ring, indexed loop
                 c.globalCompositeOperation='destination-out';
-                for(const s of scratches){
+                for(let i=0;i<SCR;i++){
+                    const s=scr[i];
+                    if(!s.live)continue;
                     c.beginPath();c.arc(s.x,s.y,s.r,0,PI2);c.fill();
                 }
                 c.globalCompositeOperation='source-over';
@@ -2065,6 +2380,7 @@ export function ScratchReveal({seed=42}={}) {
 /** 19. Timer Countdown -- Circular countdown timer. Toggle starts/stops. */
 export function TimerCountdown() {
     let timeLeft=10, running=false, flashAlpha=0;
+    let timeStr='10.0s', lastTenths=-1; // rebuilt at ~10 Hz, not per frame
     return {
         onToggle(checked) { running=checked; if(checked)timeLeft=10; },
         tick(c,dt,now,st) {
@@ -2075,7 +2391,7 @@ export function TimerCountdown() {
             const cx=st.w/2,cy=st.h/2,R=Math.min(cx,cy)-4;
 
             // Flash bg when done
-            if(flashAlpha>0){c.fillStyle=`rgba(255,100,100,${flashAlpha*.1})`;c.beginPath();c.arc(cx,cy,R+4,0,PI2);c.fill();}
+            if(flashAlpha>0){c.fillStyle='#ff6464';c.globalAlpha=flashAlpha*.1;c.beginPath();c.arc(cx,cy,R+4,0,PI2);c.fill();c.globalAlpha=1;}
 
             // Background ring
             c.strokeStyle='rgba(255,255,255,.06)';c.lineWidth=4;c.beginPath();c.arc(cx,cy,R,0,PI2);c.stroke();
@@ -2087,8 +2403,10 @@ export function TimerCountdown() {
             c.beginPath();c.arc(cx,cy,R,-Math.PI/2,-Math.PI/2+progress*PI2,false);c.stroke();
 
             // Time text
+            const tenths=Math.round(timeLeft*10);
+            if(tenths!==lastTenths){lastTenths=tenths;timeStr=(tenths/10).toFixed(1)+'s';}
             c.fillStyle='#e2e2f0';c.font="700 16px 'JetBrains Mono',monospace";c.textAlign='center';c.textBaseline='middle';
-            c.fillText(timeLeft.toFixed(1)+'s',cx,cy);
+            c.fillText(timeStr,cx,cy);
 
             lbl(c,running?(timeLeft>0?'RUNNING':'TIME UP!'):'TOGGLE TO START',cx,st.h+10,running?col:'#8888aa');
             if(st.focused)fr(c,st.w,st.h,R);
@@ -2117,9 +2435,10 @@ export function PullRefresh() {
                 // Spinner arcs
                 for(let i=0;i<3;i++){
                     const a=spinAngle+i*PI2/3;
-                    c.strokeStyle=`rgba(56,189,248,${.3+i*.2})`;c.lineWidth=3;
+                    c.strokeStyle='#38bdf8';c.globalAlpha=.3+i*.2;c.lineWidth=3;
                     c.beginPath();c.arc(cx,cy,16,a,a+.8);c.stroke();
                 }
+                c.globalAlpha=1;
                 lbl(c,'LOADING...',cx,st.h+10,'#38bdf8');
             } else {
                 // Arrow that stretches with pull