@wallarm-org/design-system 0.58.1 → 0.59.0

package/dist/components/AnimatedBackground/module/celebration.js

@@ -0,0 +1,628 @@
+import { SPAWN_EDGE } from "./game-logic.js";
+import { clamp01, easeIn, easeOut } from "./math.js";
+const CEL_DUR = [
+    0,
+    2.6,
+    3.8,
+    4.0,
+    5.2
+];
+const CEL_MAX_PARTICLES = 900;
+const CEL_SWEEP_START = 1.6;
+const CEL_SWEEP_DUR = 1.2;
+const CEL_WAVE_DUR = 2.4;
+const CEL_WAVE_RISE = 1.5;
+const CEL_WAVE_FADE_AT = 1.4;
+const CEL_WAVE_SIGMA_SQ2 = 4608;
+const CEL_WAVE_STRENGTH = 0.95;
+const CEL_BLAST_WAVE_DUR = 1.6;
+const CEL_BLAST_WAVE_RISE = 0.9;
+const CEL_BLAST_WAVE_FADE_AT = 0.8;
+const CEL_BLAST_WAVE_SIGMA_SQ2 = 5408;
+const CEL_BLAST_WAVE_STRENGTH = 0.9;
+const CEL_BURST_DUR = 0.6;
+const CEL_BURST_RADIUS = 70;
+const CEL_BURST_SIGMA_SQ2 = 1152;
+const CEL_BURST_STRENGTH = 0.9;
+const CEL_LIFT_AT = 0.5;
+const CEL_LIFT_DUR = 1.2;
+const CEL_CANNON_AWAY_AT = 1.7;
+const CEL_LABEL_AT = [
+    0,
+    0.7,
+    2.8,
+    2.4,
+    2.6
+];
+const CEL_LABEL_RISE_DUR = 0.5;
+const CEL_RAINBOW_START = 3.0;
+const CEL_RAINBOW_END = 4.6;
+const CEL_RAIN_START = 2.0;
+const CEL_RAIN_END = 4.6;
+const CEL_RAIN_RATE = 360;
+const CEL_GLYPHS = {
+    0: [
+        14,
+        17,
+        19,
+        21,
+        25,
+        17,
+        14
+    ],
+    1: [
+        4,
+        12,
+        4,
+        4,
+        4,
+        4,
+        14
+    ],
+    2: [
+        14,
+        17,
+        1,
+        6,
+        8,
+        16,
+        31
+    ],
+    3: [
+        14,
+        17,
+        1,
+        6,
+        1,
+        17,
+        14
+    ],
+    4: [
+        2,
+        6,
+        10,
+        18,
+        31,
+        2,
+        2
+    ],
+    5: [
+        31,
+        16,
+        30,
+        1,
+        1,
+        17,
+        14
+    ],
+    6: [
+        6,
+        8,
+        16,
+        30,
+        17,
+        17,
+        14
+    ],
+    7: [
+        31,
+        1,
+        2,
+        4,
+        8,
+        8,
+        8
+    ],
+    8: [
+        14,
+        17,
+        17,
+        14,
+        17,
+        17,
+        14
+    ],
+    9: [
+        14,
+        17,
+        17,
+        15,
+        1,
+        2,
+        12
+    ],
+    '%': [
+        25,
+        26,
+        4,
+        4,
+        4,
+        11,
+        19
+    ]
+};
+const CEL_PAL = [
+    'rgb(255,60,60)',
+    'rgb(255,180,40)',
+    'rgb(60,220,80)',
+    'rgb(60,200,220)',
+    'rgb(80,100,255)',
+    'rgb(180,80,220)',
+    'rgb(255,100,180)'
+];
+const CEL_CAUGHT_COL = '__caught__';
+function tierForScore(score) {
+    if (score < 20) return 0;
+    if (score < 35) return 1;
+    if (score < 90) return 2;
+    if (score < 100) return 3;
+    return 4;
+}
+function buildScoreCells(score, gridCols, gridSp, w, h, exclusionBox) {
+    const str = `${Math.round(score)}%`;
+    const glyphW = 5;
+    const glyphH = 7;
+    const gap = 1;
+    const totalCols = str.length * (glyphW + gap) - gap;
+    const totalRows = glyphH;
+    const blockW = totalCols * gridSp;
+    const blockH = totalRows * gridSp;
+    const totalGridRows = gridCols > 0 ? Math.ceil(h / gridSp) : 0;
+    if (0 === gridCols || totalGridRows < glyphH) return {
+        cells: new Map(),
+        colCount: totalCols
+    };
+    let startCol;
+    let startRow;
+    if (exclusionBox) {
+        const cardTop = (h - exclusionBox.height) / 2;
+        const cardLeft = (w - exclusionBox.width) / 2;
+        if (cardTop >= blockH + 8) {
+            const stripCenterY = cardTop / 2;
+            startRow = Math.max(0, Math.round((stripCenterY - blockH / 2) / gridSp));
+            startCol = Math.max(0, Math.round((w / 2 - blockW / 2) / gridSp));
+        } else {
+            if (!(cardLeft >= blockW + 32)) return {
+                cells: new Map(),
+                colCount: totalCols
+            };
+            const gutterCenterX = cardLeft / 2;
+            startCol = Math.max(0, Math.round((gutterCenterX - blockW / 2) / gridSp));
+            startRow = Math.max(0, Math.round((h / 2 - blockH / 2) / gridSp));
+        }
+    } else {
+        const topY = Math.max(gridSp, 0.16 * h);
+        startRow = Math.max(0, Math.round(topY / gridSp));
+        startCol = Math.max(0, Math.round((w / 2 - blockW / 2) / gridSp));
+    }
+    if (startCol + totalCols > gridCols) startCol = Math.max(0, gridCols - totalCols);
+    if (startRow + totalRows > totalGridRows) startRow = Math.max(0, totalGridRows - totalRows);
+    const cells = new Map();
+    let colOffset = 0;
+    for (const ch of str){
+        const glyph = CEL_GLYPHS[ch];
+        if (!glyph) {
+            colOffset += glyphW + gap;
+            continue;
+        }
+        for(let row = 0; row < glyphH; row++){
+            const bits = glyph[row];
+            for(let gc = 0; gc < glyphW; gc++)if (bits & 1 << glyphW - 1 - gc) {
+                const c = startCol + colOffset + gc;
+                const r = startRow + row;
+                if (c >= 0 && c < gridCols && r >= 0) {
+                    const idx = r * gridCols + c;
+                    cells.set(idx, true);
+                }
+            }
+        }
+        colOffset += glyphW + gap;
+    }
+    return {
+        cells,
+        colCount: totalCols
+    };
+}
+function spawnConfetti(particles, count, w, spread) {
+    for(let i = 0; i < count; i++){
+        if (particles.length >= CEL_MAX_PARTICLES) break;
+        particles.push({
+            x: Math.random() * w,
+            y: -8 - Math.random() * spread,
+            vx: (Math.random() - 0.5) * 30,
+            vy: 110 + 130 * Math.random(),
+            age: 0,
+            life: 7,
+            half: 4,
+            color: CEL_PAL[Math.random() * CEL_PAL.length | 0],
+            conf: true,
+            drag: 0,
+            gravity: 0
+        });
+    }
+}
+function spawnBurst(particles, x, y, count, caughtColor, dotColor) {
+    for(let i = 0; i < count; i++){
+        if (particles.length >= CEL_MAX_PARTICLES) break;
+        const angle = Math.random() * Math.PI * 2;
+        const speed = 80 + 120 * Math.random();
+        particles.push({
+            x,
+            y,
+            vx: Math.cos(angle) * speed,
+            vy: Math.sin(angle) * speed,
+            age: 0,
+            life: 0.9 + 0.4 * Math.random(),
+            half: 4,
+            color: Math.random() < 0.7 ? caughtColor : dotColor,
+            conf: false,
+            drag: 2.5,
+            gravity: 30
+        });
+    }
+}
+function startCelebration(score, t, host) {
+    const tier = tierForScore(score);
+    if (0 === tier) return null;
+    const { gridCols, gridSp } = host;
+    const { cells, colCount } = buildScoreCells(score, gridCols, gridSp, host.w, host.h, host.exclusionBox);
+    const headlines = {
+        1: 'THREAT CONTAINED',
+        2: 'PERIMETER HELD',
+        3: 'ZERO BREACH',
+        4: 'AIRTIGHT \u2014 100%'
+    };
+    const sublines = {
+        1: 'well done \u2014 share it with your mates',
+        2: 'you nailed it',
+        3: 'you rock \u2014 worth a screenshot',
+        4: 'flawless \u00B7 the field salutes you'
+    };
+    const cel = {
+        t0: t,
+        tier,
+        score,
+        settled: false,
+        particles: [],
+        rockets: [],
+        pulses: [],
+        headline: headlines[tier] ?? '',
+        subline: sublines[tier] ?? '',
+        scoreCells: cells,
+        scoreColCount: colCount,
+        liftStarted: false,
+        confettiSpawned2: 0,
+        confettiVolley1: false,
+        confettiVolley2: false,
+        burstSpawned: false,
+        rainAccum: 0
+    };
+    if (2 === tier) {
+        const cannonX = host.w / 2;
+        const cannonY = host.h - 40;
+        const targets = computeRocketTargets(host);
+        for(let i = 0; i < 3 && i < targets.length; i++)cel.rockets.push({
+            t0: t + 0.4 * i,
+            sx: cannonX,
+            sy: cannonY,
+            tx: targets[i].x,
+            ty: targets[i].y,
+            dur: 0.6,
+            burst: false
+        });
+    }
+    return cel;
+}
+function computeRocketTargets(host) {
+    const { w, h, exclusionBox } = host;
+    const targets = [];
+    const clamp = (v, lo, hi)=>Math.max(lo, Math.min(hi, v));
+    if (exclusionBox) {
+        const cardLeft = (w - exclusionBox.width) / 2;
+        const cardRight = (w + exclusionBox.width) / 2;
+        const cardTop = (h - exclusionBox.height) / 2;
+        targets.push({
+            x: clamp(cardLeft / 2, SPAWN_EDGE, w - SPAWN_EDGE),
+            y: 0.42 * h
+        });
+        targets.push({
+            x: clamp((cardRight + w) / 2, SPAWN_EDGE, w - SPAWN_EDGE),
+            y: 0.42 * h
+        });
+        targets.push({
+            x: w / 2,
+            y: Math.max(40, 0.45 * cardTop)
+        });
+    } else {
+        targets.push({
+            x: 0.2 * w,
+            y: 0.3 * h
+        });
+        targets.push({
+            x: 0.8 * w,
+            y: 0.3 * h
+        });
+        targets.push({
+            x: 0.5 * w,
+            y: 0.15 * h
+        });
+    }
+    return targets;
+}
+function stepCelebration(cel, t, dt, host, caughtColor, dotColor) {
+    const elapsed = t - cel.t0;
+    const { tier, particles, rockets } = cel;
+    const { w, h } = host;
+    let kept = 0;
+    for (const p of particles){
+        p.age += dt;
+        if (!(p.age >= p.life)) {
+            if (p.conf) {
+                p.x += p.vx * dt;
+                p.y += p.vy * dt;
+            } else {
+                const dragFactor = Math.exp(-p.drag * dt);
+                p.vx *= dragFactor;
+                p.vy *= dragFactor;
+                p.vy += p.gravity * dt;
+                p.x += p.vx * dt;
+                p.y += p.vy * dt;
+            }
+            if (!(p.y > h + 12) && !(p.x < -20) && !(p.x > w + 20)) particles[kept++] = p;
+        }
+    }
+    particles.length = kept;
+    if (2 === tier) {
+        const confettiTarget = cel.score >= 60 ? 56 : 32;
+        if (elapsed > 1.0 && cel.confettiSpawned2 < confettiTarget) {
+            const batch = Math.min(confettiTarget - cel.confettiSpawned2, confettiTarget);
+            spawnConfetti(particles, batch, w, 40);
+            cel.confettiSpawned2 += batch;
+        }
+        for (const rocket of rockets){
+            if (rocket.burst) continue;
+            const re = t - rocket.t0;
+            if (re >= rocket.dur) {
+                rocket.burst = true;
+                spawnBurst(particles, rocket.tx, rocket.ty, 16, caughtColor, dotColor);
+                cel.pulses.push({
+                    t0: t,
+                    x: rocket.tx,
+                    y: rocket.ty,
+                    dur: CEL_BURST_DUR
+                });
+            }
+        }
+    }
+    if (3 === tier) {
+        if (elapsed > 1.7 && !cel.confettiVolley1) {
+            cel.confettiVolley1 = true;
+            spawnConfetti(particles, 60, w, 60);
+        }
+        if (elapsed > 2.6 && !cel.confettiVolley2) {
+            cel.confettiVolley2 = true;
+            spawnConfetti(particles, 40, w, 40);
+        }
+    }
+    if (4 === tier) {
+        if (elapsed > 0.8 && !cel.burstSpawned) {
+            cel.burstSpawned = true;
+            spawnConfetti(particles, 80, w, 80);
+        }
+        if (elapsed >= CEL_RAIN_START && elapsed < CEL_RAIN_END) {
+            cel.rainAccum += CEL_RAIN_RATE * dt;
+            const toSpawn = Math.floor(cel.rainAccum);
+            if (toSpawn > 0) {
+                cel.rainAccum -= toSpawn;
+                spawnConfetti(particles, toSpawn, w, 20);
+            }
+        }
+    }
+    if (tier >= 3 && !cel.settled) {
+        const liftE = elapsed - CEL_LIFT_AT;
+        if (liftE > 0 && liftE < CEL_LIFT_DUR) {
+            const rise = easeIn(clamp01(liftE / CEL_LIFT_DUR));
+            const cannonX = host.w / 2;
+            const baseY = h - 22 - rise * (h + 120);
+            for(let i = 0; i < 3; i++){
+                if (particles.length >= CEL_MAX_PARTICLES) break;
+                particles.push({
+                    x: cannonX + (Math.random() - 0.5) * 10,
+                    y: baseY,
+                    vx: (Math.random() - 0.5) * 20,
+                    vy: 80 + 80 * Math.random(),
+                    age: 0,
+                    life: 0.45,
+                    half: 3,
+                    color: Math.random() < 0.5 ? caughtColor : dotColor,
+                    conf: false,
+                    drag: 0,
+                    gravity: 0
+                });
+            }
+        }
+    }
+    let pKept = 0;
+    for (const pulse of cel.pulses)if (t - pulse.t0 < pulse.dur) cel.pulses[pKept++] = pulse;
+    cel.pulses.length = pKept;
+    for (const rocket of rockets){
+        if (rocket.burst) continue;
+        const re = t - rocket.t0;
+        if (re < 0 || re >= rocket.dur) continue;
+        const p = easeOut(re / rocket.dur);
+        const rx = rocket.sx + (rocket.tx - rocket.sx) * p;
+        const ry = rocket.sy + (rocket.ty - rocket.sy) * p;
+        if (particles.length < CEL_MAX_PARTICLES) particles.push({
+            x: rx,
+            y: ry,
+            vx: (Math.random() - 0.5) * 8,
+            vy: 20 + 20 * Math.random(),
+            age: 0,
+            life: 0.3,
+            half: 3,
+            color: dotColor,
+            conf: false,
+            drag: 0,
+            gravity: 0
+        });
+    }
+    if (tier >= 3 && elapsed > CEL_CANNON_AWAY_AT) cel.liftStarted = true;
+    const dur = CEL_DUR[tier] ?? 0;
+    if (!cel.settled && elapsed >= dur) cel.settled = true;
+}
+function adjustCelebrationTimeMarkers(cel, skip) {
+    cel.t0 += skip;
+    for (const rocket of cel.rockets)rocket.t0 += skip;
+    for (const pulse of cel.pulses)pulse.t0 += skip;
+}
+function computeCelFrameParams(cel, t, w, h) {
+    const elapsed = t - cel.t0;
+    const tier = cel.tier;
+    const diag = Math.hypot(w / 2, h);
+    let waveRadius = 0;
+    let waveStrength = 0;
+    const waveOriginX = w / 2;
+    const waveOriginY = h - 30;
+    if (1 === tier && elapsed < CEL_WAVE_DUR) {
+        waveRadius = easeOut(clamp01(elapsed / CEL_WAVE_RISE)) * diag * 0.9;
+        waveStrength = CEL_WAVE_STRENGTH * (1 - clamp01((elapsed - CEL_WAVE_FADE_AT) / 1));
+    }
+    let blastRadius = 0;
+    let blastStrength = 0;
+    const blastOriginX = w / 2;
+    const blastOriginY = h - 30;
+    if (tier >= 3 && elapsed < CEL_BLAST_WAVE_DUR) {
+        blastRadius = easeOut(clamp01(elapsed / CEL_BLAST_WAVE_RISE)) * diag;
+        blastStrength = CEL_BLAST_WAVE_STRENGTH * (1 - clamp01((elapsed - CEL_BLAST_WAVE_FADE_AT) / 0.8));
+    }
+    const sweepStart = cel.t0 + CEL_SWEEP_START;
+    const sweepEnd = sweepStart + CEL_SWEEP_DUR;
+    const sweepActive = tier >= 2 && t >= sweepStart && t <= sweepEnd + 0.5;
+    let sweepXPos = -9999;
+    if (sweepActive && cel.scoreColCount > 0) {
+        const sweepProgress = clamp01((t - sweepStart) / CEL_SWEEP_DUR);
+        sweepXPos = sweepProgress * cel.scoreColCount;
+    }
+    const rainbowActive = 4 === tier && elapsed >= CEL_RAINBOW_START && elapsed < CEL_RAINBOW_END;
+    let rainbowQ = 0;
+    if (rainbowActive) rainbowQ = 0.5 * Math.sin((elapsed - CEL_RAINBOW_START) / (CEL_RAINBOW_END - CEL_RAINBOW_START) * Math.PI);
+    return {
+        elapsed,
+        tier,
+        waveRadius,
+        waveStrength,
+        waveOriginX,
+        waveOriginY,
+        waveSigmaSq2: CEL_WAVE_SIGMA_SQ2,
+        blastRadius,
+        blastStrength,
+        blastOriginX,
+        blastOriginY,
+        blastSigmaSq2: CEL_BLAST_WAVE_SIGMA_SQ2,
+        sweepX: sweepXPos,
+        sweepActive,
+        rainbowQ,
+        rainbowActive,
+        t,
+        cel
+    };
+}
+function celDotEffect(dotIndex, dotX, dotY, p, w, h) {
+    let boost = 0;
+    let col = null;
+    const isDigit = p.cel.scoreCells.has(dotIndex);
+    if (isDigit) {
+        const scoreColCount = p.cel.scoreColCount;
+        if (scoreColCount > 0) {
+            const sweepStart = p.cel.t0 + CEL_SWEEP_START;
+            const elapsed = p.t - sweepStart;
+            if (elapsed >= 0) {
+                const revealProgress = clamp01(elapsed / CEL_SWEEP_DUR);
+                if (revealProgress > 0) {
+                    boost = 1;
+                    col = CEL_CAUGHT_COL;
+                }
+            }
+        }
+    }
+    if (p.waveStrength > 0) {
+        const dx = dotX - p.waveOriginX;
+        const dy = dotY - p.waveOriginY;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const dd = dist - p.waveRadius;
+        const gauss = Math.exp(-(dd * dd) / p.waveSigmaSq2);
+        const waveVal = gauss * p.waveStrength;
+        if (waveVal > boost) {
+            boost = waveVal;
+            if (!isDigit) col = CEL_CAUGHT_COL;
+        }
+    }
+    if (p.blastStrength > 0) {
+        const dx = dotX - p.blastOriginX;
+        const dy = dotY - p.blastOriginY;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const dd = dist - p.blastRadius;
+        const gauss = Math.exp(-(dd * dd) / p.blastSigmaSq2);
+        const waveVal = gauss * p.blastStrength;
+        if (waveVal > boost) {
+            boost = waveVal;
+            if (!isDigit) col = CEL_CAUGHT_COL;
+        }
+    }
+    for (const pulse of p.cel.pulses){
+        const pe = p.t - pulse.t0;
+        if (pe < 0 || pe >= pulse.dur) continue;
+        const dx = dotX - pulse.x;
+        const dy = dotY - pulse.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const pRadius = easeOut(pe / pulse.dur) * CEL_BURST_RADIUS;
+        const dd = dist - pRadius;
+        const gauss = Math.exp(-(dd * dd) / CEL_BURST_SIGMA_SQ2);
+        const pulseVal = gauss * CEL_BURST_STRENGTH * (1 - pe / pulse.dur);
+        if (pulseVal > boost) {
+            boost = pulseVal;
+            if (!isDigit) col = CEL_CAUGHT_COL;
+        }
+    }
+    if (p.rainbowActive && p.rainbowQ > 0) {
+        const palIdx = Math.floor(0.03 * dotX + 0.02 * dotY + 3 * p.elapsed) % CEL_PAL.length;
+        const idx = palIdx < 0 ? palIdx + CEL_PAL.length : palIdx;
+        const rainbowBoost = p.rainbowQ;
+        if (rainbowBoost > boost || rainbowBoost > 0.05 && !isDigit) {
+            boost = Math.max(boost, rainbowBoost);
+            if (!isDigit) col = CEL_PAL[idx];
+        }
+    }
+    if (boost < 0.02 && !isDigit) return null;
+    return {
+        celBoost: boost,
+        celCol: col
+    };
+}
+function computeHeadlineY(h, exclusionBox) {
+    const cannonClear = 72;
+    if (exclusionBox) {
+        const cardBottom = (h + exclusionBox.height) / 2;
+        return cardBottom + (h - cannonClear - cardBottom) * 0.45;
+    }
+    return 0.75 * h;
+}
+function headlineAlpha(cel, t) {
+    const labelAt = CEL_LABEL_AT[cel.tier] ?? 0;
+    const elapsed = t - cel.t0 - labelAt;
+    if (elapsed < 0) return 0;
+    return clamp01(elapsed / CEL_LABEL_RISE_DUR);
+}
+function headlineRise(cel, t) {
+    const labelAt = CEL_LABEL_AT[cel.tier] ?? 0;
+    const elapsed = t - cel.t0 - labelAt;
+    if (elapsed < 0) return 10;
+    return 10 * (1 - easeOut(clamp01(elapsed / CEL_LABEL_RISE_DUR)));
+}
+function cannonLiftOffset(cel, t, h) {
+    const elapsed = t - cel.t0;
+    const liftE = elapsed - CEL_LIFT_AT;
+    if (liftE <= 0) return 0;
+    return easeIn(clamp01(liftE / CEL_LIFT_DUR)) * (h + 120);
+}
+export { CEL_CAUGHT_COL, CEL_DUR, CEL_LIFT_AT, CEL_LIFT_DUR, CEL_MAX_PARTICLES, CEL_PAL, adjustCelebrationTimeMarkers, buildScoreCells, cannonLiftOffset, celDotEffect, computeCelFrameParams, computeHeadlineY, headlineAlpha, headlineRise, startCelebration, stepCelebration, tierForScore };

package/dist/components/AnimatedBackground/module/engine-grid.d.ts

@@ -1,6 +1,13 @@
 export interface Dot {
     x: number;
     y: number;
+    /** Pre-computed spatial noise phase: x * NOISE_FREQ_X + y * NOISE_FREQ_Y */
+    noiseSpatial: number;
 }
-export declare function buildGrid(w: number, h: number, sp: number): Dot[];
+export interface GridResult {
+    dots: Dot[];
+    cols: number;
+    sp: number;
+}
+export declare function buildGrid(w: number, h: number, sp: number): GridResult;
 export declare function sweepX(t: number, w: number, period: number): number;

package/dist/components/AnimatedBackground/module/engine-grid.js

@@ -1,12 +1,26 @@
+import { NOISE_FREQ_X, NOISE_FREQ_Y } from "./constants.js";
 function buildGrid(w, h, sp) {
     const cap = 20000;
     const safeSp = Math.max(sp, Math.sqrt(w * h / cap));
     const a = [];
-    for(let y = safeSp / 2; y < h; y += safeSp)for(let x = safeSp / 2; x < w; x += safeSp)a.push({
-        x,
-        y
-    });
-    return a;
+    let cols = 0;
+    for(let y = safeSp / 2; y < h; y += safeSp){
+        let rowCols = 0;
+        for(let x = safeSp / 2; x < w; x += safeSp){
+            a.push({
+                x,
+                y,
+                noiseSpatial: x * NOISE_FREQ_X + y * NOISE_FREQ_Y
+            });
+            rowCols++;
+        }
+        if (0 === cols) cols = rowCols;
+    }
+    return {
+        dots: a,
+        cols,
+        sp: safeSp
+    };
 }
 function sweepX(t, w, period) {
     return t % period / period * (w + 140) - 70;

package/dist/components/AnimatedBackground/module/engine.d.ts

@@ -29,5 +29,7 @@ export interface SweepEngine {
         width: number;
         height: number;
     } | null): void;
+    celebrate(score: number): void;
+    setSound(on: boolean): void;
 }
 export declare function createSweepEngine(canvas: HTMLCanvasElement, options: EngineOptions): SweepEngine;