@zakkster/lite-scratch-fx 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.3.1] - 2026-08-22
+
+### Fixed
+- **`PeelRecipe`** -- removed a per-frame forced synchronous layout read. `tick`
+  previously read `src.offsetWidth` (a layout property) inside the transform
+  template string on every frame, immediately after writing `style.transform` /
+  `style.transformOrigin`, forcing a synchronous reflow each frame while a peel
+  reveal was active. The source layer's logical width is now captured once in
+  `init` (the engine already measures it to size the effect canvas and passes it
+  as `w`) and reused, so the per-frame `tick` body is write-only. No visual or
+  API change.
+
 ## [1.3.0] - 2026-08-22
 
 Abortable, self-restoring reveals. A reveal can now be cancelled, and the host scratch

package/index.js

@@ -13,7 +13,7 @@
 
 // Three-place version sync: this constant, package.json "version", and the top
 // CHANGELOG.md heading must always match. /release keeps them locked.
-export const VERSION = '1.3.0';
+export const VERSION = '1.3.1';
 
 export { createScratchController } from './src/ScratchController.js';
 export { default as ScratchController } from './src/ScratchController.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zakkster/lite-scratch-fx",
   "author": "Zahary Shinikchiev <shinikchiev@yahoo.com>",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "One-shot scratch-card reveal effects on canvas. A controller scans the still-covered pixels of a scratch layer, spawns particles from them, and delegates physics and rendering to a recipe. 21 themeable recipes (burn, shatter, dissolve, glitch, gold dust, cosmic dust, and more), a registry with a register hook, zero GSAP, a zero-GC hot path, deterministic seeded RNG, and a stage that runs a grid of simultaneous reveals over one shared pool.",
   "type": "module",
   "main": "./index.js",

package/src/ScratchRecipes.js

@@ -1151,9 +1151,11 @@ export function NeonPulseRecipe({duration = 800, colors, theme} = {}) {
 // ===========================================================================
 
 export function PeelRecipe({duration = 1000} = {}) {
+    let peelW = 0;
     return {
         count: 0,
-        init() {
+        init(ctx, capacity, w) {
+            peelW = w > 0 ? w : 0;
         },
         spawn() {
             return {x: 0, y: 0, vx: 0, vy: 0, life: 0};
@@ -1162,7 +1164,7 @@ export function PeelRecipe({duration = 1000} = {}) {
             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.transform = `perspective(800px) rotateY(${t * 90}deg) rotateX(${t * -20}deg) translateX(${t * peelW}px)`;
             src.style.opacity = 1 - t;
             if (raw >= 1) {
                 src.style.transform = '';