@zakkster/lite-scratch-fx 1.0.0 → 1.2.0

package/src/ScratchRecipes.js

@@ -1,29 +1,32 @@
 /**
  * Scratch Card Reveal Recipes
  *
- * 12 one-shot reveal effects, each a standalone factory function.
- * Designed to be passed to ScratchController.reveal(recipe, onDone).
+ * All 21 one-shot reveal effects, each a standalone factory function passed to
+ * ScratchController.reveal(recipe, onDone). Grouped by family below.
  *
  * Recipe interface:
  *   { count, init(ctx, capacity, w, h),
  *     spawn(idx, rng, w, h, spot),
- *     tick(dt, elapsedMs, engine, ctx, sourceCanvas, w, h) → boolean,
+ *     tick(dt, elapsedMs, engine, ctx, sourceCanvas, w, h) -> boolean,
  *     destroy() }
  *
- * tick() returns `true` when the effect is complete.
+ * tick() returns true when the effect is complete. `spot` is a shared, reused object:
+ * read spot.x / spot.y synchronously and never retain it.
  *
  * Uses:
- *   @zakkster/lite-lerp   — easeIn, easeOut, easeInOut, clamp, lerp
- *   ./Palette.js          — resolvePalette (colors / theme option handling)
+ *   @zakkster/lite-lerp   -- easeIn, easeOut, easeInOut, clamp, lerp
+ *   ./Palette.js          -- resolvePalette (colors / theme option handling)
  */
 
 import {easeIn, easeOut, easeInOut, clamp, lerp} from '@zakkster/lite-lerp';
 import {resolvePalette} from './Palette.js';
 
 
-// ═══════════════════════════════════════════════════════════
-//  1. BURN — Ember particles rising from visible pixels
-// ═══════════════════════════════════════════════════════════
+// ===========================================================================
+//  PARTICLE REVEALS
+// ===========================================================================
+//  Spawn particles from the scratch layer's still-covered pixels and run their own physics.
+// ===========================================================================
 
 export function BurnRecipe({count = 150, duration = 1500, colors, theme} = {}) {
     let pSize, pDecay, pColorIdx;
@@ -78,76 +81,6 @@ export function BurnRecipe({count = 150, duration = 1500, colors, theme} = {}) {
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  2. SHATTER — Glass pieces with gravity + rotation
-// ═══════════════════════════════════════════════════════════
-
-export function ShatterRecipe({count = 30, duration = 1200, gravity = 0.5} = {}) {
-    let pRot, pRotSpd, pSz, pOpacity;
-    let img = null;
-
-    return {
-        count,
-        init(ctx, capacity, w, h) {
-            pRot = new Float32Array(capacity);
-            pRotSpd = new Float32Array(capacity);
-            pSz = new Float32Array(capacity);
-            pOpacity = new Float32Array(capacity);
-        },
-        spawn(idx, rng, w, h, spot) {
-            pRot[idx] = rng.range(0, Math.PI * 2);
-            pRotSpd[idx] = rng.range(-0.2, 0.2);
-            pSz[idx] = Math.sqrt((w * h) / count);
-            pOpacity[idx] = 1;
-            return {x: spot.x * w, y: spot.y * h, vx: rng.range(-15, 15), vy: rng.range(-10, -2), life: 1.0};
-        },
-        tick(dt, elapsed, engine, ctx, src, w, h) {
-            // Lazy-capture source image on first frame
-            if (!img) {
-                img = new Image();
-                img.src = src.toDataURL();
-                src.style.opacity = '0';
-            }
-            if (!img.complete) return false;
-
-            const {x, y, vx, vy, life, data, max} = engine;
-            const progress = clamp(elapsed / duration, 0, 1);
-            let alive = 0;
-
-            for (let i = 0; i < max; i++) {
-                if (life[i] <= 0) continue;
-                const p = data[i];
-                x[i] += vx[i] * dt * 60;
-                y[i] += vy[i] * dt * 60;
-                vy[i] += gravity;
-                pRot[p] += pRotSpd[p];
-                pOpacity[p] = 1 - progress;
-                if (pOpacity[p] <= 0.01) {
-                    life[i] = 0;
-                    continue;
-                }
-                alive++;
-                ctx.save();
-                ctx.globalAlpha = pOpacity[p];
-                ctx.translate(x[i], y[i]);
-                ctx.rotate(pRot[p]);
-                ctx.drawImage(img, -pSz[p] / 2, -pSz[p] / 2, pSz[p], pSz[p]);
-                ctx.restore();
-            }
-            return alive === 0;
-        },
-        destroy() {
-            pRot = pRotSpd = pSz = pOpacity = null;
-            img = null;
-        },
-    };
-}
-
-
-// ═══════════════════════════════════════════════════════════
-//  3. DISSOLVE — Particles drift upward (Thanos snap)
-// ═══════════════════════════════════════════════════════════
-
 export function DissolveRecipe({count = 150, duration = 1000, colors, theme} = {}) {
     let pSize;
     const palette = resolvePalette(colors, theme, ['#DC143C']);
@@ -189,10 +122,6 @@ export function DissolveRecipe({count = 150, duration = 1000, colors, theme} = {
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  4. EXPLODE — Radial burst from centroid
-// ═══════════════════════════════════════════════════════════
-
 export function ExplodeRecipe({count = 80, duration = 750, force = 15, colors, theme} = {}) {
     let pSize, pColorIdx;
     const palette = resolvePalette(colors, theme, ['#DC143C', '#8B0000', '#5C0000']);
@@ -240,10 +169,6 @@ export function ExplodeRecipe({count = 80, duration = 750, force = 15, colors, t
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  5. DRAGON BREATH — Fire cone from below, additive blend
-// ═══════════════════════════════════════════════════════════
-
 export function DragonBreathRecipe({count = 200, duration = 1200, colors, theme} = {}) {
     let pSize, pDecay, pColorIdx;
     const palette = resolvePalette(colors, theme, ['#FFF', '#FFD700', '#FF4500', '#8B0000', '#2F2F2F']);
@@ -308,10 +233,6 @@ export function DragonBreathRecipe({count = 200, duration = 1200, colors, theme}
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  6. ICE BREATH — Crystal shards, screen blend, friction
-// ═══════════════════════════════════════════════════════════
-
 export function IceBreathRecipe({count = 300, duration = 1500, colors, theme} = {}) {
     let pSize, pDecay, pRot, pRotSpd, pColorIdx;
     const palette = resolvePalette(colors, theme, ['#FFF', '#E0FFFF', '#00FFFF', '#1E90FF', '#4682B4']);
@@ -390,9 +311,551 @@ export function IceBreathRecipe({count = 300, duration = 1500, colors, theme} =
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  7. SHINE WAVE — Energy beam sweep L→R
-// ═══════════════════════════════════════════════════════════
+export function GoldDustRecipe({count = 150, duration = 2000, colors, theme} = {}) {
+    let pSize, pPhase; // pPhase drives twinkle, not rotation
+    const palette = resolvePalette(colors, theme, ['#FFD700']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pSize = new Float32Array(capacity);
+            pPhase = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pSize[idx] = rng.range(1, 4);
+            pPhase[idx] = rng.range(0, Math.PI * 2);
+            return {
+                x: spot.x * w,
+                y: spot.y * h,
+                vx: rng.range(-1, 1),
+                vy: rng.range(-0.5, -2.5),
+                life: 1.0,
+            };
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+
+            src.style.opacity = 1 - easeOut(clamp(elapsed / (duration * 0.5), 0, 1));
+
+            ctx.globalCompositeOperation = 'lighter';
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+                x[i] += vx[i] * ds;
+                y[i] += vy[i] * ds;
+                pPhase[p] += 0.1 * ds;
+                life[i] -= 0.008 * ds;
+                if (life[i] <= 0) continue;
+                alive++;
+
+                const twinkle = (Math.sin(pPhase[p]) + 1) / 2;
+                ctx.globalAlpha = life[i] * twinkle;
+                ctx.fillStyle = palette[0];
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], pSize[p], 0, Math.PI * 2);
+                ctx.fill();
+            }
+
+            // ← FIX: Reset composite operation every frame
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pSize = pPhase = null;
+        },
+    };
+}
+
+
+export function ConfettiBlastRecipe({count = 80, duration = 1500, colors, theme} = {}) {
+    // ← FIX: Dedicated parallel arrays instead of repurposing size/decay
+    let pWobblePhase, pWobbleSpeed, pColorIdx;
+    const palette = resolvePalette(colors, theme, ['#ff0055', '#00ffcc', '#ffcc00', '#aa00ff', '#ff6600', '#00aaff']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pWobblePhase = new Float32Array(capacity);
+            pWobbleSpeed = new Float32Array(capacity);
+            pColorIdx = new Uint8Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pWobblePhase[idx] = rng.range(0, Math.PI * 2);
+            pWobbleSpeed[idx] = rng.range(0.1, 0.3);
+            pColorIdx[idx] = rng.int(0, palette.length - 1);
+
+            const angle = rng.range(0, Math.PI * 2);
+            const spd = rng.range(5, 20);
+            return {x: w / 2, y: h / 2, vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd, life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+
+            src.style.opacity = 1 - easeOut(clamp(elapsed / (duration * 0.3), 0, 1));
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+
+                vy[i] += 0.5; // Gravity
+                x[i] += vx[i] * ds;
+                y[i] += vy[i] * ds;
+                pWobblePhase[p] += pWobbleSpeed[p] * ds;
+                life[i] -= 0.015 * ds;
+                if (life[i] <= 0) continue;
+                alive++;
+
+                ctx.save();
+                ctx.globalAlpha = life[i];
+                ctx.translate(x[i], y[i]);
+                ctx.rotate(pWobblePhase[p]); // Spin
+                ctx.scale(1, Math.cos(pWobblePhase[p] * 1.7)); // 3D tumble
+                ctx.fillStyle = palette[pColorIdx[p]];
+                ctx.fillRect(-6, -4, 12, 8);
+                ctx.restore();
+            }
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pWobblePhase = pWobbleSpeed = pColorIdx = null;
+        },
+    };
+}
+
+
+export function CosmicDustRecipe({count = 200, duration = 1800, colors, theme} = {}) {
+    let pAngle, pRadius, pColorIdx;
+    const palette = resolvePalette(colors, theme, ['#a78bfa', '#38bdf8', '#c084fc', '#6ee7b6']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pAngle = new Float32Array(capacity);
+            pRadius = new Float32Array(capacity);
+            pColorIdx = new Uint8Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            const cx = w / 2, cy = h / 2;
+            const sx = spot.x * w, sy = spot.y * h;
+            pAngle[idx] = Math.atan2(sy - cy, sx - cx);
+            pRadius[idx] = Math.hypot(sx - cx, sy - cy);
+            pColorIdx[idx] = rng.int(0, palette.length - 1);
+            return {x: sx, y: sy, vx: 0, vy: 0, life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+            const cx = w / 2, cy = h / 2;
+
+            src.style.opacity = 1 - clamp(elapsed / (duration * 0.15), 0, 1);
+            ctx.globalCompositeOperation = 'lighter';
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+
+                pRadius[p] *= 0.95; // Spiral inward
+                pAngle[p] += 0.2 * ds; // Spin
+                x[i] = cx + Math.cos(pAngle[p]) * pRadius[p];
+                y[i] = cy + Math.sin(pAngle[p]) * pRadius[p];
+                life[i] -= 0.01 * ds;
+
+                if (life[i] <= 0 || pRadius[p] < 2) {
+                    life[i] = 0;
+                    continue;
+                }
+                alive++;
+
+                ctx.globalAlpha = life[i];
+                ctx.fillStyle = palette[pColorIdx[p]];
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], 2 + life[i] * 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+
+            // ← FIX: Reset composite operation every frame
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pAngle = pRadius = pColorIdx = null;
+        },
+    };
+}
+
+
+export function MatrixDecayRecipe({count = 200, duration = 1500, colors, theme} = {}) {
+    let pCharSeed; // Pre-computed char index per particle
+    const palette = resolvePalette(colors, theme, ['#00ff41']);
+    const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$+-*/=%#&_(),.;:?!\\|{}<>[]^~';
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pCharSeed = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pCharSeed[idx] = rng.next(); // Deterministic char offset
+            return {
+                x: spot.x * w,
+                y: spot.y * h,
+                vx: 0,
+                vy: rng.range(5, 10),
+                life: 1.0,
+            };
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+
+            // Fade source
+            src.style.opacity = 1 - clamp(elapsed / (duration * 0.4), 0, 1);
+
+            // NOTE: No trail fillRect here. The ScratchController clears the canvas
+            // every frame before calling tick(). Crisp falling text over the fading
+            // scratch layer is cleaner for a reveal effect — no persistent black box
+            // obscuring the prize underneath.
+
+            ctx.font = '14px monospace';
+            ctx.textAlign = 'center';
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+                y[i] += vy[i] * ds;
+                life[i] -= 0.015 * ds;
+                if (life[i] <= 0 || y[i] > h + 20) {
+                    life[i] = 0;
+                    continue;
+                }
+                alive++;
+
+                // Cycle through chars using seed + elapsed time
+                const charIdx = ((pCharSeed[p] * CHARS.length + elapsed * 0.03) | 0) % CHARS.length;
+                ctx.globalAlpha = life[i];
+                ctx.fillStyle = palette[0];
+                ctx.fillText(CHARS[charIdx], x[i], y[i]);
+            }
+
+            ctx.globalAlpha = 1;
+            ctx.textAlign = 'start';
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pCharSeed = null;
+        },
+    };
+}
+
+
+export function LiquidMeltRecipe({count = 100, duration = 1200, colors, theme} = {}) {
+    let pSize, pOriginY; // pOriginY = where the drip started (top of the streak)
+    const palette = resolvePalette(colors, theme, ['#1e293b']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pSize = new Float32Array(capacity);
+            pOriginY = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            const sy = spot.y * h;
+            pSize[idx] = rng.range(2, 8);
+            pOriginY[idx] = sy;
+            return {x: spot.x * w, y: sy, vx: 0, vy: rng.range(0, 2), life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+
+            src.style.opacity = 1 - clamp(elapsed / (duration * 0.2), 0, 1);
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+
+                vy[i] += 0.4; // Heavy gravity
+                y[i] += vy[i] * ds;
+                life[i] -= 0.015 * ds;
+                if (life[i] <= 0 || y[i] > h + 30) {
+                    life[i] = 0;
+                    continue;
+                }
+                alive++;
+
+                const sz = pSize[p];
+                const streakHeight = y[i] - pOriginY[p] + sz;
+
+                ctx.globalAlpha = life[i];
+                ctx.fillStyle = palette[0];
+                // ← FIX: Use fillRect instead of roundRect for Safari < 17.4 compat
+                ctx.fillRect(x[i] - sz / 2, pOriginY[p], sz, streakHeight);
+                // Rounded tip at bottom
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], sz / 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            ctx.globalAlpha = 1;
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pSize = pOriginY = null;
+        },
+    };
+}
+
+
+
+// ===========================================================================
+//  IMAGE REVEALS
+// ===========================================================================
+//  Snapshot the scratch layer via toDataURL() + Image and animate the pixels. Same-origin only.
+// ===========================================================================
+
+export function ShatterRecipe({count = 30, duration = 1200, gravity = 0.5} = {}) {
+    let pRot, pRotSpd, pSz, pOpacity;
+    let img = null;
+
+    return {
+        count,
+        init(ctx, capacity, w, h) {
+            pRot = new Float32Array(capacity);
+            pRotSpd = new Float32Array(capacity);
+            pSz = new Float32Array(capacity);
+            pOpacity = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pRot[idx] = rng.range(0, Math.PI * 2);
+            pRotSpd[idx] = rng.range(-0.2, 0.2);
+            pSz[idx] = Math.sqrt((w * h) / count);
+            pOpacity[idx] = 1;
+            return {x: spot.x * w, y: spot.y * h, vx: rng.range(-15, 15), vy: rng.range(-10, -2), life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            // Lazy-capture source image on first frame
+            if (!img) {
+                img = new Image();
+                img.src = src.toDataURL();
+                src.style.opacity = '0';
+            }
+            if (!img.complete) return false;
+
+            const {x, y, vx, vy, life, data, max} = engine;
+            const progress = clamp(elapsed / duration, 0, 1);
+            let alive = 0;
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+                x[i] += vx[i] * dt * 60;
+                y[i] += vy[i] * dt * 60;
+                vy[i] += gravity;
+                pRot[p] += pRotSpd[p];
+                pOpacity[p] = 1 - progress;
+                if (pOpacity[p] <= 0.01) {
+                    life[i] = 0;
+                    continue;
+                }
+                alive++;
+                ctx.save();
+                ctx.globalAlpha = pOpacity[p];
+                ctx.translate(x[i], y[i]);
+                ctx.rotate(pRot[p]);
+                ctx.drawImage(img, -pSz[p] / 2, -pSz[p] / 2, pSz[p], pSz[p]);
+                ctx.restore();
+            }
+            return alive === 0;
+        },
+        destroy() {
+            pRot = pRotSpd = pSz = pOpacity = null;
+            img = null;
+        },
+    };
+}
+
+
+export function PixelShatterRecipe({count = 60, duration = 1200} = {}) {
+    let pRot, pRotSpd, pSz, pOrigX, pOrigY; // ← FIX: Store ORIGINAL positions
+    let img = null, imgReady = false;
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pRot = new Float32Array(capacity);
+            pRotSpd = new Float32Array(capacity);
+            pSz = new Float32Array(capacity);
+            pOrigX = new Float32Array(capacity);
+            pOrigY = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            const sx = spot.x * w, sy = spot.y * h;
+            pRot[idx] = rng.range(0, Math.PI);
+            pRotSpd[idx] = rng.range(-0.3, 0.3);
+            pSz[idx] = rng.range(5, 15);
+            pOrigX[idx] = sx; // ← FIX: Store spawn position for source crop
+            pOrigY[idx] = sy;
+
+            const angle = rng.range(0, Math.PI * 2);
+            const spd = rng.range(5, 15);
+            return {x: sx, y: sy, vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd, life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            if (!img) {
+                img = new Image();
+                img.onload = () => {
+                    imgReady = true;
+                };
+                img.src = src.toDataURL();
+                src.style.opacity = '0';
+                return false;
+            }
+            if (!imgReady) return false;
+
+            const {x, y, vx, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            const progress = clamp(elapsed / duration, 0, 1);
+            let alive = 0;
+
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+                x[i] += vx[i] * ds;
+                y[i] += vy[i] * ds;
+                vx[i] *= 0.95;
+                vy[i] *= 0.95; // Drag
+                pRot[p] += pRotSpd[p];
+                life[i] -= 0.02 * ds;
+                if (life[i] <= 0) continue;
+                alive++;
+
+                const sz = pSz[p];
+                ctx.save();
+                ctx.globalAlpha = life[i];
+                ctx.translate(x[i], y[i]);
+                ctx.rotate(pRot[p]);
+                // ← FIX: Source crop uses ORIGINAL position, not current animated position
+                ctx.drawImage(img, pOrigX[p], pOrigY[p], sz, sz, -sz / 2, -sz / 2, sz, sz);
+                ctx.restore();
+            }
+            return alive === 0;
+        },
+        destroy() {
+            pRot = pRotSpd = pSz = pOrigX = pOrigY = null;
+            img = null;
+            imgReady = false;
+        },
+    };
+}
+
+
+export function GlitchRevealRecipe({duration = 800} = {}) {
+    let img = null;
+    let imgReady = false;
+    let sliceSeeds = null; // Pre-generated random values for deterministic slicing
+
+    return {
+        count: 0,
+        init(ctx, capacity, w, h) {
+            // Pre-generate slice randomness so tick() is deterministic
+            sliceSeeds = new Float32Array(200); // 20 slices × 10 values per slice
+        },
+        spawn(idx, rng, w, h, spot) {
+            // Populate slice seeds during spawn phase (has rng access)
+            for (let i = 0; i < sliceSeeds.length; i++) sliceSeeds[i] = rng.next();
+            return {x: 0, y: 0, vx: 0, vy: 0, life: 0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            // Lazy capture with onload guard
+            if (!img) {
+                img = new Image();
+                img.onload = () => {
+                    imgReady = true;
+                };
+                img.src = src.toDataURL();
+                src.style.opacity = '0';
+                return false;
+            }
+            if (!imgReady) return false;
+
+            const raw = clamp(elapsed / duration, 0, 1);
+
+            if (raw > 0.9) return raw >= 1;
+
+            const intensity = 1 - easeIn(raw);
+            const sliceCount = 10 + (sliceSeeds[0] * 20) | 0;
+
+            ctx.globalAlpha = 1 - raw;
+            for (let i = 0; i < sliceCount; i++) {
+                const si = (i * 4) % sliceSeeds.length;
+                const sliceY = sliceSeeds[si] * h;
+                const sliceH = sliceSeeds[si + 1] * (h / 4);
+                const offsetX = (sliceSeeds[si + 2] - 0.5) * 100 * intensity;
+                const rgbShift = 5 * intensity;
+
+                // Red channel
+                ctx.globalCompositeOperation = 'screen';
+                ctx.drawImage(img, 0, sliceY, w, sliceH, offsetX - rgbShift, sliceY, w, sliceH);
+                // Cyan channel
+                ctx.drawImage(img, 0, sliceY, w, sliceH, offsetX + rgbShift, sliceY, w, sliceH);
+            }
+
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            return raw >= 1;
+        },
+        destroy() {
+            img = null;
+            imgReady = false;
+            sliceSeeds = null;
+        },
+    };
+}
+
+
+
+// ===========================================================================
+//  BEAM / CANVAS REVEALS
+// ===========================================================================
+//  Draw light, beams, or lines straight onto the overlay (mostly count: 0).
+// ===========================================================================
+
+export function ShineRecipe({duration = 500, width = 250} = {}) {
+    return {
+        count: 0,
+        init() {
+        },
+        spawn() {
+            return {x: 0, y: 0, vx: 0, vy: 0, life: 0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const raw = clamp(elapsed / duration, 0, 1);
+            const t = easeInOut(raw);
+            const posX = lerp(-width, w + width, t);
+            const g = ctx.createLinearGradient(posX - width / 2, 0, posX + width / 2, 0);
+            g.addColorStop(0, 'rgba(255,255,255,0)');
+            g.addColorStop(0.5, `rgba(255,255,255,${0.8 * (1 - Math.abs(t - 0.5) * 2)})`);
+            g.addColorStop(1, 'rgba(255,255,255,0)');
+            ctx.fillStyle = g;
+            ctx.fillRect(0, 0, w, h);
+            if (t > 0.4) src.style.opacity = 1 - (t - 0.4) / 0.5;
+            return raw >= 1;
+        },
+        destroy() {
+        },
+    };
+}
+
 
 export function ShineWaveRecipe({duration = 600, beamWidth = 80, particleCount = 60, colors, theme} = {}) {
     const palette = resolvePalette(colors, theme, ['#FFF', '#E0E8FF', '#B0C4FF', '#88AAFF']);
@@ -462,9 +925,66 @@ export function ShineWaveRecipe({duration = 600, beamWidth = 80, particleCount =
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  8. LIGHTNING CRAWL — Procedural branching polylines
-// ═══════════════════════════════════════════════════════════
+export function LaserScanRecipe({duration = 1000, colors, theme} = {}) {
+    let sparkSeeds = null;
+    const palette = resolvePalette(colors, theme, ['#00ffff']);
+
+    return {
+        count: 0,
+        init(ctx, capacity, w, h) {
+            sparkSeeds = new Float32Array(20); // Pre-computed spark X positions
+        },
+        spawn(idx, rng) {
+            for (let i = 0; i < sparkSeeds.length; i++) sparkSeeds[i] = rng.next();
+            return {x: 0, y: 0, vx: 0, vy: 0, life: 0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const raw = clamp(elapsed / duration, 0, 1);
+            const scanY = raw * h;
+
+            // Clip source canvas to only show below the scan line
+            src.style.clipPath = `polygon(0 ${scanY}px, 100% ${scanY}px, 100% 100%, 0 100%)`;
+
+
+            if (raw < 0.98) {
+                ctx.globalCompositeOperation = 'lighter';
+
+                // Laser line core (themed) with a hot white centre
+                ctx.fillStyle = palette[0];
+                ctx.fillRect(0, scanY - 2, w, 4);
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, scanY - 1, w, 2);
+
+                // Glow
+                ctx.shadowBlur = 15;
+                ctx.shadowColor = palette[0];
+
+                // Sparks (deterministic positions)
+                for (let i = 0; i < 5; i++) {
+                    ctx.beginPath();
+                    ctx.arc(sparkSeeds[i * 2] * w, scanY - sparkSeeds[i * 2 + 1] * 20, sparkSeeds[i * 2] * 2, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+
+                // ← FIX: Reset shadow + composite every frame
+                ctx.shadowBlur = 0;
+                ctx.shadowColor = 'transparent';
+                ctx.globalCompositeOperation = 'source-over';
+            }
+
+            if (raw >= 1) {
+                // ← FIX: Clean up clipPath on completion
+                src.style.clipPath = '';
+                return true;
+            }
+            return false;
+        },
+        destroy() {
+            sparkSeeds = null;
+        },
+    };
+}
+
 
 export function LightningCrawlRecipe({boltCount = 5, duration = 600, colors, theme} = {}) {
     const palette = resolvePalette(colors, theme, ['#FFF', '#E0E8FF', '#88CCFF', '#4488FF']);
@@ -575,11 +1095,8 @@ export function LightningCrawlRecipe({boltCount = 5, duration = 600, colors, the
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  9. SHINE — Flash/glint sweep
-// ═══════════════════════════════════════════════════════════
-
-export function ShineRecipe({duration = 500, width = 250} = {}) {
+export function NeonPulseRecipe({duration = 800, colors, theme} = {}) {
+    const palette = resolvePalette(colors, theme, ['#00ffcc']);
     return {
         count: 0,
         init() {
@@ -589,16 +1106,36 @@ export function ShineRecipe({duration = 500, width = 250} = {}) {
         },
         tick(dt, elapsed, engine, ctx, src, w, h) {
             const raw = clamp(elapsed / duration, 0, 1);
-            const t = easeInOut(raw);
-            const posX = lerp(-width, w + width, t);
-            const g = ctx.createLinearGradient(posX - width / 2, 0, posX + width / 2, 0);
-            g.addColorStop(0, 'rgba(255,255,255,0)');
-            g.addColorStop(0.5, `rgba(255,255,255,${0.8 * (1 - Math.abs(t - 0.5) * 2)})`);
-            g.addColorStop(1, 'rgba(255,255,255,0)');
-            ctx.fillStyle = g;
-            ctx.fillRect(0, 0, w, h);
-            if (t > 0.4) src.style.opacity = 1 - (t - 0.4) / 0.5;
-            return raw >= 1;
+            const t = easeOut(raw);
+            const cx = w / 2, cy = h / 2;
+
+            src.style.opacity = 1 - t;
+            // ← FIX: Clamp scale to prevent overflow; clean up on completion
+            src.style.transform = `scale(${1 + t * 0.3})`;
+            src.style.transformOrigin = 'center';
+
+            ctx.globalCompositeOperation = 'lighter';
+
+            for (let i = 0; i < 3; i++) {
+                const r = t * Math.max(w, h) * 0.8 * (1 - i * 0.2);
+                if (r < 1) continue;
+                ctx.beginPath();
+                ctx.arc(cx, cy, r, 0, Math.PI * 2);
+                ctx.globalAlpha = (1 - t) * (0.8 - i * 0.2);
+                ctx.strokeStyle = palette[0];
+                ctx.lineWidth = 10 - i * 3;
+                ctx.stroke();
+            }
+
+            // ← FIX: Reset composite operation
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+
+            if (raw >= 1) {
+                src.style.transform = '';
+                return true;
+            }
+            return false;
         },
         destroy() {
         },
@@ -606,9 +1143,12 @@ export function ShineRecipe({duration = 500, width = 250} = {}) {
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  10. PEEL — Paper curl away (CSS perspective)
-// ═══════════════════════════════════════════════════════════
+
+// ===========================================================================
+//  CSS REVEALS
+// ===========================================================================
+//  Drive the scratch layer's own transform/opacity; little or no particle work.
+// ===========================================================================
 
 export function PeelRecipe({duration = 1000} = {}) {
     return {
@@ -636,10 +1176,6 @@ export function PeelRecipe({duration = 1000} = {}) {
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  11. FADE — Simple opacity tween
-// ═══════════════════════════════════════════════════════════
-
 export function FadeRecipe({duration = 400} = {}) {
     return {
         count: 0,
@@ -659,10 +1195,6 @@ export function FadeRecipe({duration = 400} = {}) {
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  12. IMPLOSION — Spin + shrink + speed lines (zero particles)
-// ═══════════════════════════════════════════════════════════
-
 export function ImplosionRecipe({duration = 800} = {}) {
     return {
         count: 0,
@@ -705,15 +1237,32 @@ export function ImplosionRecipe({duration = 800} = {}) {
 }
 
 
-// ═══════════════════════════════════════════════════════════
-//  ALL RECIPES MAP
-// ═══════════════════════════════════════════════════════════
+// ===========================================================================
+//  RECIPE MAP
+// ===========================================================================
 
 export const ScratchRecipes = {
-    BurnRecipe, ShatterRecipe, DissolveRecipe, ExplodeRecipe,
-    DragonBreathRecipe, IceBreathRecipe,
-    ShineWaveRecipe, LightningCrawlRecipe, ShineRecipe,
-    PeelRecipe, FadeRecipe, ImplosionRecipe,
+    BurnRecipe,
+    DissolveRecipe,
+    ExplodeRecipe,
+    DragonBreathRecipe,
+    IceBreathRecipe,
+    GoldDustRecipe,
+    ConfettiBlastRecipe,
+    CosmicDustRecipe,
+    MatrixDecayRecipe,
+    LiquidMeltRecipe,
+    ShatterRecipe,
+    PixelShatterRecipe,
+    GlitchRevealRecipe,
+    ShineRecipe,
+    ShineWaveRecipe,
+    LaserScanRecipe,
+    LightningCrawlRecipe,
+    NeonPulseRecipe,
+    PeelRecipe,
+    FadeRecipe,
+    ImplosionRecipe,
 };
 
 export default ScratchRecipes;