@zakkster/lite-scratch-fx 1.0.0

package/src/ScratchRecipes.js

@@ -0,0 +1,719 @@
+/**
+ * Scratch Card Reveal Recipes
+ *
+ * 12 one-shot reveal effects, each a standalone factory function.
+ * Designed to be passed to ScratchController.reveal(recipe, onDone).
+ *
+ * Recipe interface:
+ *   { count, init(ctx, capacity, w, h),
+ *     spawn(idx, rng, w, h, spot),
+ *     tick(dt, elapsedMs, engine, ctx, sourceCanvas, w, h) → boolean,
+ *     destroy() }
+ *
+ * tick() returns `true` when the effect is complete.
+ *
+ * Uses:
+ *   @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
+// ═══════════════════════════════════════════════════════════
+
+export function BurnRecipe({count = 150, duration = 1500, colors, theme} = {}) {
+    let pSize, pDecay, pColorIdx;
+    const palette = resolvePalette(colors, theme, ['#ff6b00', '#ff8c00', '#ffaa00', '#ff4500', '#8B0000']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pSize = new Float32Array(capacity);
+            pDecay = new Float32Array(capacity);
+            pColorIdx = new Uint8Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pSize[idx] = rng.range(2, 5);
+            pDecay[idx] = rng.range(0.01, 0.03);
+            pColorIdx[idx] = rng.int(0, palette.length - 1);
+            return {x: spot.x * w, y: spot.y * h, vx: rng.range(-1, 1), vy: rng.range(-1, -4), life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            let alive = 0;
+            const progress = clamp(elapsed / duration, 0, 1);
+            src.style.opacity = 1 - easeIn(progress);
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+                vy[i] += 0.1;
+                x[i] += vx[i] * dt * 60;
+                y[i] += vy[i] * dt * 60;
+                life[i] -= pDecay[p] * dt * 60;
+                if (life[i] <= 0) continue;
+                alive++;
+                ctx.globalAlpha = life[i];
+                ctx.globalCompositeOperation = 'lighter';
+                ctx.fillStyle = palette[pColorIdx[p]];
+                ctx.shadowBlur = 10;
+                ctx.shadowColor = ctx.fillStyle;
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], pSize[p], 0, Math.PI * 2);
+                ctx.fill();
+            }
+            ctx.shadowBlur = 0;
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pSize = pDecay = pColorIdx = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  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']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pSize = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pSize[idx] = rng.range(2, 6);
+            return {x: spot.x * w, y: spot.y * h, vx: 0, vy: rng.range(-1, -3), life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vy, life, data, max} = engine;
+            let alive = 0;
+            src.style.opacity = 1 - clamp(elapsed / (duration * 0.3), 0, 1);
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+                y[i] += vy[i] * dt * 60;
+                life[i] -= 0.02 * dt * 60;
+                if (life[i] <= 0) continue;
+                alive++;
+                ctx.globalAlpha = life[i];
+                ctx.fillStyle = palette[0];
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], pSize[p], 0, Math.PI * 2);
+                ctx.fill();
+            }
+            ctx.globalAlpha = 1;
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pSize = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  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']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pSize = new Float32Array(capacity);
+            pColorIdx = new Uint8Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pSize[idx] = rng.range(3, 8);
+            pColorIdx[idx] = rng.int(0, palette.length - 1);
+            const ang = (Math.PI * 2 * idx) / count;
+            const spd = rng.range(5, force);
+            return {x: w / 2, y: h / 2, vx: Math.cos(ang) * spd, vy: Math.sin(ang) * spd, life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            let alive = 0;
+            src.style.opacity = 1 - clamp(elapsed / (duration * 0.4), 0, 1);
+
+            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;
+                life[i] -= 0.02 * dt * 60;
+                if (life[i] <= 0) continue;
+                alive++;
+                ctx.save();
+                ctx.globalAlpha = life[i];
+                ctx.fillStyle = palette[pColorIdx[p]];
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], pSize[p], 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pSize = pColorIdx = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  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']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pSize = new Float32Array(capacity);
+            pDecay = new Float32Array(capacity);
+            pColorIdx = new Uint8Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            const angle = -Math.PI / 2 + rng.range(-0.3, 0.3);
+            const speed = rng.range(12, 25);
+            pSize[idx] = rng.range(4, 12);
+            pDecay[idx] = rng.range(0.01, 0.025);
+            pColorIdx[idx] = rng.int(0, palette.length - 1);
+            return {
+                x: w / 2 + rng.range(-10, 10),
+                y: h + 20,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                life: 1.0
+            };
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            let alive = 0;
+            src.style.opacity = 1 - clamp(elapsed / (duration * 0.4), 0, 1);
+
+            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;
+                vx[i] += (Math.random() - 0.5) * 0.5;
+                vy[i] *= 0.98;
+                pSize[p] *= 1 + 0.04 * dt * 60;
+                life[i] -= pDecay[p] * dt * 60;
+                if (life[i] <= 0) continue;
+                alive++;
+                ctx.save();
+                ctx.globalAlpha = life[i];
+                ctx.globalCompositeOperation = 'lighter';
+                ctx.shadowBlur = 15;
+                ctx.shadowColor = palette[pColorIdx[p]];
+                ctx.fillStyle = palette[pColorIdx[p]];
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], pSize[p], 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+            ctx.shadowBlur = 0;
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pSize = pDecay = pColorIdx = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  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']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pSize = new Float32Array(capacity);
+            pDecay = new Float32Array(capacity);
+            pRot = new Float32Array(capacity);
+            pRotSpd = new Float32Array(capacity);
+            pColorIdx = new Uint8Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            const angle = -Math.PI / 2 + rng.range(-0.225, 0.225);
+            const speed = rng.range(15, 28);
+            pSize[idx] = rng.range(2, 7);
+            pDecay[idx] = rng.range(0.005, 0.025);
+            pRot[idx] = rng.range(0, Math.PI);
+            pRotSpd[idx] = rng.range(-0.2, 0.2);
+            pColorIdx[idx] = rng.int(0, palette.length - 1);
+            return {
+                x: w / 2 + rng.range(-8, 8),
+                y: h + 20,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                life: 1.0
+            };
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            let alive = 0;
+            const t = clamp(elapsed / (duration * 0.4), 0, 1);
+            src.style.opacity = 1 - t;
+            src.style.filter = `brightness(${1 + t})`;
+
+            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;
+                vx[i] *= 0.96;
+                vy[i] *= 0.96;
+                pRot[p] += pRotSpd[p];
+                life[i] -= pDecay[p] * dt * 60;
+                if (life[i] <= 0) continue;
+                alive++;
+                ctx.save();
+                ctx.globalAlpha = life[i];
+                ctx.globalCompositeOperation = 'screen';
+                ctx.translate(x[i], y[i]);
+                ctx.rotate(pRot[p]);
+                const s = pSize[p];
+                ctx.fillStyle = palette[pColorIdx[p]];
+                ctx.beginPath();
+                ctx.moveTo(0, -s);
+                ctx.lineTo(s * 0.6, 0);
+                ctx.lineTo(0, s);
+                ctx.lineTo(-s * 0.6, 0);
+                ctx.closePath();
+                ctx.fill();
+                ctx.restore();
+            }
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            if (alive === 0 && elapsed >= duration) {
+                src.style.filter = '';
+                return true;
+            }
+            return false;
+        },
+        destroy() {
+            pSize = pDecay = pRot = pRotSpd = pColorIdx = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  7. SHINE WAVE — Energy beam sweep L→R
+// ═══════════════════════════════════════════════════════════
+
+export function ShineWaveRecipe({duration = 600, beamWidth = 80, particleCount = 60, colors, theme} = {}) {
+    const palette = resolvePalette(colors, theme, ['#FFF', '#E0E8FF', '#B0C4FF', '#88AAFF']);
+    let py, pvy, pox, psz, pcol;
+
+    return {
+        count: 0, // No SoA particles — managed internally
+        init(ctx, capacity, w, h) {
+            py = new Float32Array(particleCount);
+            pvy = new Float32Array(particleCount);
+            pox = new Float32Array(particleCount);
+            psz = new Float32Array(particleCount);
+            pcol = new Uint8Array(particleCount);
+            for (let i = 0; i < particleCount; i++) {
+                py[i] = Math.random() * h;
+                pvy[i] = (Math.random() - 0.5) * 2;
+                pox[i] = (Math.random() - 0.5) * beamWidth * 0.6;
+                psz[i] = Math.random() * 4 + 2;
+                pcol[i] = (Math.random() * palette.length) | 0;
+            }
+        },
+        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 bx = lerp(-beamWidth, w + beamWidth, t);
+            src.style.opacity = t > 0.3 ? 1 - (t - 0.3) / 0.7 : 1;
+
+            // Beam core gradient
+            if (bx > -beamWidth && bx < w + beamWidth) {
+                const g = ctx.createLinearGradient(bx - beamWidth, 0, bx + beamWidth, 0);
+                g.addColorStop(0, 'rgba(255,255,255,0)');
+                g.addColorStop(0.4, 'rgba(200,220,255,.3)');
+                g.addColorStop(0.5, 'rgba(255,255,255,.6)');
+                g.addColorStop(0.6, 'rgba(200,220,255,.3)');
+                g.addColorStop(1, 'rgba(255,255,255,0)');
+                ctx.globalCompositeOperation = 'lighter';
+                ctx.fillStyle = g;
+                ctx.fillRect(bx - beamWidth, 0, beamWidth * 2, h);
+            }
+            // Beam particles
+            ctx.globalCompositeOperation = 'lighter';
+            for (let i = 0; i < particleCount; i++) {
+                const px2 = bx + pox[i];
+                py[i] += pvy[i];
+                pvy[i] += (Math.random() - 0.5) * 0.3;
+                if (py[i] < -10) py[i] = h + 10;
+                if (py[i] > h + 10) py[i] = -10;
+                psz[i] = clamp(psz[i] + (Math.random() - 0.5) * 0.3, 1, 8);
+                ctx.globalAlpha = 0.7;
+                ctx.fillStyle = palette[pcol[i]];
+                ctx.save();
+                ctx.translate(px2, py[i]);
+                ctx.fillRect(-psz[i] * 2, -psz[i] * 0.3, psz[i] * 4, psz[i] * 0.6);
+                ctx.restore();
+            }
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            return raw >= 1;
+        },
+        destroy() {
+            py = pvy = pox = psz = pcol = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  8. LIGHTNING CRAWL — Procedural branching polylines
+// ═══════════════════════════════════════════════════════════
+
+export function LightningCrawlRecipe({boltCount = 5, duration = 600, colors, theme} = {}) {
+    const palette = resolvePalette(colors, theme, ['#FFF', '#E0E8FF', '#88CCFF', '#4488FF']);
+    // Bolt is drawn in three stacked layers (outer glow -> mid -> bright core). Derive
+    // each from the ramp by relative position so any length >= 1 stays valid.
+    const cCore = palette[0];
+    const cMid = palette[(palette.length - 1) >> 1];
+    const cOuter = palette[palette.length - 1];
+    let bolts = [];
+
+    function genPts(x1, y1, x2, y2, d) {
+        let p = [{x: x1, y: y1}, {x: x2, y: y2}];
+        for (let i = 0; i < d; i++) {
+            const np = [p[0]];
+            for (let j = 0; j < p.length - 1; j++) {
+                const a = p[j], b = p[j + 1];
+                const mx = (a.x + b.x) / 2, my = (a.y + b.y) / 2;
+                const dist = Math.hypot(b.x - a.x, b.y - a.y);
+                const off = (Math.random() - 0.5) * dist * 0.4;
+                const nx = -(b.y - a.y) / (dist || 1), ny = (b.x - a.x) / (dist || 1);
+                np.push({x: mx + nx * off, y: my + ny * off});
+                np.push(b);
+            }
+            p = np;
+        }
+        return p;
+    }
+
+    function drawBolt(ctx, x1, y1, x2, y2, th, d) {
+        if (d <= 0) return;
+        const pts = genPts(x1, y1, x2, y2, d);
+        [[cOuter, th * 3, .15], [cMid, th * 1.5, .5], [cCore, th, 1]].forEach(([c, lw, a]) => {
+            ctx.strokeStyle = c;
+            ctx.lineWidth = lw;
+            ctx.globalAlpha = a;
+            ctx.beginPath();
+            ctx.moveTo(pts[0].x, pts[0].y);
+            for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x, pts[i].y);
+            ctx.stroke();
+        });
+        if (d > 2) for (let i = 2; i < pts.length - 1; i += 3) {
+            if (Math.random() > 0.5) continue;
+            const bl = Math.hypot(x2 - x1, y2 - y1) * (0.15 + Math.random() * 0.2);
+            const ba = Math.atan2(y2 - y1, x2 - x1) + (Math.random() - 0.5) * 1.5;
+            drawBolt(ctx, pts[i].x, pts[i].y, pts[i].x + Math.cos(ba) * bl, pts[i].y + Math.sin(ba) * bl, th * 0.5, d - 2);
+        }
+    }
+
+    return {
+        count: 0,
+        init(ctx, capacity, w, h) {
+            bolts = [];
+            for (let b = 0; b < boltCount; b++) {
+                const e = (Math.random() * 4) | 0;
+                let sx, sy;
+                if (e === 0) {
+                    sx = 0;
+                    sy = Math.random() * h;
+                } else if (e === 1) {
+                    sx = w;
+                    sy = Math.random() * h;
+                } else if (e === 2) {
+                    sx = Math.random() * w;
+                    sy = 0;
+                } else {
+                    sx = Math.random() * w;
+                    sy = h;
+                }
+                bolts.push({
+                    sx,
+                    sy,
+                    ex: w * (0.3 + Math.random() * 0.4),
+                    ey: h * (0.3 + Math.random() * 0.4),
+                    delay: Math.random() * 0.3
+                });
+            }
+        },
+        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 prog = easeIn(clamp(raw / 0.6, 0, 1));
+            const flash = raw > 0.5 && raw < 0.58 ? (raw - 0.5) / 0.08 : raw >= 0.58 && raw < 0.73 ? 1 - (raw - 0.58) / 0.15 : 0;
+            const fade = raw > 0.65 ? 1 - (raw - 0.65) / 0.35 : 1;
+            src.style.opacity = raw > 0.4 ? 1 - (raw - 0.4) / 0.4 : 1;
+
+            if (fade <= 0.01) return raw >= 1;
+            ctx.save();
+            ctx.globalAlpha = fade;
+            if (flash > 0.01) {
+                ctx.fillStyle = `rgba(200,220,255,${flash * 0.3})`;
+                ctx.fillRect(0, 0, w, h);
+            }
+            ctx.globalCompositeOperation = 'lighter';
+            for (const b of bolts) {
+                const bp = clamp((prog - b.delay) / (1 - b.delay), 0, 1);
+                if (bp <= 0) continue;
+                drawBolt(ctx, b.sx, b.sy, b.sx + (b.ex - b.sx) * bp, b.sy + (b.ey - b.sy) * bp, 3, 4);
+            }
+            ctx.restore();
+            return raw >= 1;
+        },
+        destroy() {
+            bolts = [];
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  9. SHINE — Flash/glint sweep
+// ═══════════════════════════════════════════════════════════
+
+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() {
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  10. PEEL — Paper curl away (CSS perspective)
+// ═══════════════════════════════════════════════════════════
+
+export function PeelRecipe({duration = 1000} = {}) {
+    return {
+        count: 0,
+        init() {
+        },
+        spawn() {
+            return {x: 0, y: 0, vx: 0, vy: 0, life: 0};
+        },
+        tick(dt, elapsed, engine, ctx, src) {
+            const raw = clamp(elapsed / duration, 0, 1);
+            const t = easeIn(raw);
+            src.style.transformOrigin = 'right center';
+            src.style.transform = `perspective(800px) rotateY(${t * 90}deg) rotateX(${t * -20}deg) translateX(${t * src.offsetWidth}px)`;
+            src.style.opacity = 1 - t;
+            if (raw >= 1) {
+                src.style.transform = '';
+                return true;
+            }
+            return false;
+        },
+        destroy() {
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  11. FADE — Simple opacity tween
+// ═══════════════════════════════════════════════════════════
+
+export function FadeRecipe({duration = 400} = {}) {
+    return {
+        count: 0,
+        init() {
+        },
+        spawn() {
+            return {x: 0, y: 0, vx: 0, vy: 0, life: 0};
+        },
+        tick(dt, elapsed, engine, ctx, src) {
+            const t = easeOut(clamp(elapsed / duration, 0, 1));
+            src.style.opacity = 1 - t;
+            return t >= 1;
+        },
+        destroy() {
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  12. IMPLOSION — Spin + shrink + speed lines (zero particles)
+// ═══════════════════════════════════════════════════════════
+
+export function ImplosionRecipe({duration = 800} = {}) {
+    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 = easeIn(raw);
+            src.style.transformOrigin = 'center';
+            src.style.transform = `scale(${1 - t}) rotate(${t * 180}deg)`;
+            src.style.filter = `blur(${t * 10}px)`;
+            src.style.opacity = 1 - t * t;
+
+            // Speed lines
+            ctx.save();
+            ctx.translate(w / 2, h / 2);
+            ctx.beginPath();
+            for (let i = 0; i < 12; i++) {
+                const a = (i / 12) * Math.PI * 2 + t * 5;
+                ctx.moveTo(Math.cos(a) * w * t, Math.sin(a) * h * t);
+                ctx.lineTo(Math.cos(a) * w, Math.sin(a) * h);
+            }
+            ctx.strokeStyle = `rgba(255,255,255,${1 - t})`;
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            ctx.restore();
+            if (raw >= 1) {
+                src.style.transform = '';
+                src.style.filter = '';
+                return true;
+            }
+            return false;
+        },
+        destroy() {
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  ALL RECIPES MAP
+// ═══════════════════════════════════════════════════════════
+
+export const ScratchRecipes = {
+    BurnRecipe, ShatterRecipe, DissolveRecipe, ExplodeRecipe,
+    DragonBreathRecipe, IceBreathRecipe,
+    ShineWaveRecipe, LightningCrawlRecipe, ShineRecipe,
+    PeelRecipe, FadeRecipe, ImplosionRecipe,
+};
+
+export default ScratchRecipes;