@docmentis/udoc-viewer 0.6.14 → 0.6.16

package/dist/src/ui/viewer/transition.js

@@ -150,23 +150,6 @@ function oppositeEightDir(dir) {
     };
     return map[dir];
 }
-/**
- * Build a clip-path: inset() that reveals the incoming element
- * progressively from the given direction.
- */
-function revealInset(dir, t) {
-    const p = (1 - t) * 100;
-    switch (dir) {
-        case "right":
-            return `inset(0 0 0 ${p}%)`;
-        case "left":
-            return `inset(0 ${p}% 0 0)`;
-        case "down":
-            return `inset(${p}% 0 0 0)`;
-        case "up":
-            return `inset(0 0 ${p}% 0)`;
-    }
-}
 function eightDirToRevealInset(dir, t) {
     const p = (1 - t) * 100;
     let top = 0, right = 0, bottom = 0, left = 0;
@@ -190,14 +173,10 @@ function resolveEffect(effect, forward) {
             return effect.throughBlack ? cutThroughBlack : null;
         case "dissolve":
             return dissolveEffect();
-        case "push": {
-            const dir = forward ? effect.direction : oppositeSide(effect.direction);
-            return pushEffect(dir);
-        }
-        case "wipe": {
-            const dir = forward ? effect.direction : oppositeSide(effect.direction);
-            return wipeEffect(dir);
-        }
+        case "push":
+            return pushEffect(effect.direction);
+        case "wipe":
+            return wipeEffect(effect.direction);
         case "cover":
             return coverEffect(oppositeEightDir(effect.direction));
         case "uncover":
@@ -228,7 +207,7 @@ function resolveEffect(effect, forward) {
         case "wheel":
             return wheelSweepEffect(effect.spokes, true);
         case "newsflash":
-            return circleEffect;
+            return newsflashEffect;
         case "blinds":
             return blindsEffect(effect.orientation);
         case "checker":
@@ -355,10 +334,15 @@ function cutThroughBlack(t, outgoing, _incoming) {
  * Push: snapshot slides away on top, incoming revealed via clip-path underneath.
  */
 function pushEffect(dir) {
+    const opp = oppositeSide(dir);
     return (t, outgoing, incoming) => {
+        if (t >= 1) {
+            incoming.style.transform = "";
+            return;
+        }
         outgoing.style.zIndex = "1";
         outgoing.style.transform = sideToTranslate(dir, t);
-        incoming.style.clipPath = revealInset(oppositeSide(dir), t);
+        incoming.style.transform = sideToTranslate(opp, 1 - t);
     };
 }
 /**
@@ -366,7 +350,28 @@ function pushEffect(dir) {
  */
 function wipeEffect(dir) {
     return (t, _outgoing, incoming) => {
-        incoming.style.clipPath = revealInset(dir, t);
+        if (t >= 1) {
+            clearMask(incoming);
+            return;
+        }
+        const p = (1 - t) * 100;
+        const blur = Math.max(0.5, t * 50 * 0.08);
+        let rect;
+        switch (dir) {
+            case "right":
+                rect = `<rect x="${p}" y="0" width="${100 - p}" height="100" fill="white" filter="url(#b)"/>`;
+                break;
+            case "left":
+                rect = `<rect x="0" y="0" width="${100 - p}" height="100" fill="white" filter="url(#b)"/>`;
+                break;
+            case "down":
+                rect = `<rect x="0" y="0" width="100" height="${100 - p}" fill="white" filter="url(#b)"/>`;
+                break;
+            case "up":
+                rect = `<rect x="0" y="${p}" width="100" height="${100 - p}" fill="white" filter="url(#b)"/>`;
+                break;
+        }
+        applyMask(incoming, svgMask(rect, blur));
     };
 }
 /**
@@ -390,10 +395,9 @@ function uncoverEffect(dir) {
  * Pull: snapshot slides away on top while incoming is revealed via clip-path.
  */
 function pullEffect(dir) {
-    return (t, outgoing, incoming) => {
+    return (t, outgoing, _incoming) => {
         outgoing.style.zIndex = "1";
         outgoing.style.transform = eightDirToTranslate(dir, t);
-        incoming.style.clipPath = eightDirToRevealInset(oppositeEightDir(dir), t);
     };
 }
 /**
@@ -401,19 +405,36 @@ function pullEffect(dir) {
  * Split "in": incoming revealed from edges inward — clip-path on snapshot (outgoing).
  */
 function splitEffect(orientation, inOut) {
+    const isH = orientation === "horizontal";
     if (inOut === "out") {
         // Center outward: incoming starts fully clipped, opens from center
         return (t, _outgoing, incoming) => {
+            if (t >= 1) {
+                clearMask(incoming);
+                return;
+            }
             const p = (1 - t) * 50;
-            incoming.style.clipPath = orientation === "horizontal" ? `inset(${p}% 0)` : `inset(0 ${p}%)`;
+            const blur = Math.max(0.5, t * 50 * 0.08);
+            const rect = isH
+                ? `<rect x="0" y="${p}" width="100" height="${100 - 2 * p}" fill="white" filter="url(#b)"/>`
+                : `<rect x="${p}" y="0" width="${100 - 2 * p}" height="100" fill="white" filter="url(#b)"/>`;
+            applyMask(incoming, svgMask(rect, blur));
         };
     }
     else {
         // Edges inward: snapshot collapses toward center, revealing incoming at edges
         return (t, outgoing, _incoming) => {
+            if (t >= 1) {
+                clearMask(outgoing);
+                return;
+            }
             outgoing.style.zIndex = "1";
             const p = t * 50;
-            outgoing.style.clipPath = orientation === "horizontal" ? `inset(${p}% 0)` : `inset(0 ${p}%)`;
+            const blur = Math.max(0.5, p * 0.08);
+            const rect = isH
+                ? `<rect x="0" y="${p}" width="100" height="${100 - 2 * p}" fill="white" filter="url(#b)"/>`
+                : `<rect x="${p}" y="0" width="${100 - 2 * p}" height="100" fill="white" filter="url(#b)"/>`;
+            applyMask(outgoing, svgMask(rect, blur));
         };
     }
 }
@@ -455,31 +476,86 @@ function circleEffect(t, _outgoing, incoming) {
         return;
     }
     if (t <= 0) {
-        const mask = "radial-gradient(circle 0% at 50% 50%, #000 0%, transparent 0%)";
+        const mask = "radial-gradient(circle at 50% 50%, #000 0%, transparent 0%)";
         incoming.style.maskImage = mask;
         incoming.style.setProperty("-webkit-mask-image", mask);
         return;
     }
-    const r = t * 71;
-    const edge = Math.max(1, r * 0.12); // ~12% of radius for soft edge
+    // Color stops are relative to the gradient ray (farthest-corner by default),
+    // so r must reach 100% to fully cover the slide at t=1.
+    const r = t * 100;
+    const edge = Math.max(1, r * 0.15);
     const inner = Math.max(0, r - edge);
-    const mask = `radial-gradient(circle ${r}% at 50% 50%, #000 ${inner}%, transparent ${r + 0.5}%)`;
+    const mask = `radial-gradient(circle at 50% 50%, #000 ${inner}%, transparent ${r + 0.5}%)`;
     incoming.style.maskImage = mask;
     incoming.style.setProperty("-webkit-mask-image", mask);
 }
-/** Diamond reveal from center. */
+/** Diamond reveal from center with feathered edge via SVG mask + blur. */
 function diamondEffect(t, _outgoing, incoming) {
-    const p = t * 50;
-    incoming.style.clipPath = `polygon(50% ${50 - p}%, ${50 + p}% 50%, 50% ${50 + p}%, ${50 - p}% 50%)`;
+    if (t >= 1) {
+        clearMask(incoming);
+        return;
+    }
+    const p = t * 100;
+    const blur = Math.max(0.5, p * 0.08);
+    applyMask(incoming, diamondMaskSvg(p, blur));
+}
+/** Shared helper: wrap SVG shape content into a blurred mask data-URI. */
+function svgMask(shapeContent, blur) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">` +
+        `<defs><filter id="b" x="-50%" y="-50%" width="200%" height="200%">` +
+        `<feGaussianBlur stdDeviation="${blur}"/></filter></defs>` +
+        shapeContent +
+        `</svg>`;
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
-/** Plus/cross reveal from center. */
+function applyMask(el, mask) {
+    el.style.maskImage = mask;
+    el.style.maskSize = "100% 100%";
+    el.style.setProperty("-webkit-mask-image", mask);
+    el.style.setProperty("-webkit-mask-size", "100% 100%");
+}
+function clearMask(el) {
+    el.style.maskImage = "";
+    el.style.setProperty("-webkit-mask-image", "");
+}
+function diamondMaskSvg(p, blur) {
+    return svgMask(`<polygon points="50,${50 - p} ${50 + p},50 50,${50 + p} ${50 - p},50" fill="white" filter="url(#b)"/>`, blur);
+}
+/** Plus/cross reveal from center with feathered edge via SVG mask + blur. */
 function plusEffect(t, _outgoing, incoming) {
-    const h = t * 50;
-    const v = t * 50;
-    incoming.style.clipPath =
-        `polygon(${50 - v}% 0%, ${50 + v}% 0%, ${50 + v}% ${50 - h}%, 100% ${50 - h}%, ` +
-            `100% ${50 + h}%, ${50 + v}% ${50 + h}%, ${50 + v}% 100%, ${50 - v}% 100%, ` +
-            `${50 - v}% ${50 + h}%, 0% ${50 + h}%, 0% ${50 - h}%, ${50 - v}% ${50 - h}%)`;
+    if (t >= 1) {
+        clearMask(incoming);
+        return;
+    }
+    const p = t * 50;
+    const blur = Math.max(0.5, p * 0.08);
+    applyMask(incoming, plusMaskSvg(p, blur));
+}
+function plusMaskSvg(p, blur) {
+    // Plus shape: a cross centered at (50,50) with arm half-widths of p
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">` +
+        `<defs><filter id="b" x="-50%" y="-50%" width="200%" height="200%">` +
+        `<feGaussianBlur stdDeviation="${blur}"/></filter></defs>` +
+        `<polygon points="${50 - p},0 ${50 + p},0 ${50 + p},${50 - p} 100,${50 - p} ` +
+        `100,${50 + p} ${50 + p},${50 + p} ${50 + p},100 ${50 - p},100 ` +
+        `${50 - p},${50 + p} 0,${50 + p} 0,${50 - p} ${50 - p},${50 - p}" ` +
+        `fill="white" filter="url(#b)"/></svg>`;
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+/** Newsflash: incoming slide expands from a single pixel at center while rotating 360°. */
+function newsflashEffect(t, _outgoing, incoming) {
+    if (t >= 1) {
+        incoming.style.transform = "";
+        incoming.style.opacity = "";
+        return;
+    }
+    // Scale from near-zero to 1, rotate a full 360°.
+    const scale = Math.max(0.01, t);
+    const deg = -t * 360;
+    incoming.style.transform = `scale(${scale}) rotate(${deg}deg)`;
+    incoming.style.transformOrigin = "50% 50%";
+    incoming.style.opacity = String(t);
 }
 /**
  * Strips: diagonal wipe that reveals the incoming slide from a corner.
@@ -488,125 +564,235 @@ function plusEffect(t, _outgoing, incoming) {
 function stripsEffect(dir) {
     return (t, _outgoing, incoming) => {
         if (t >= 1) {
-            incoming.style.clipPath = "none";
+            clearMask(incoming);
             return;
         }
         if (t <= 0) {
-            incoming.style.clipPath = "polygon(0% 0%, 0% 0%, 0% 0%)";
+            applyMask(incoming, svgMask(`<polygon points="0,0 0,0 0,0" fill="white" filter="url(#b)"/>`, 0));
             return;
         }
-        // d goes from 0 to 200 — the diagonal sweep distance across the rectangle
         const d = t * 200;
+        const blur = Math.max(0.5, t * 50 * 0.08);
         let points;
         if (d <= 100) {
-            // Triangle phase: expanding triangle from the corner
             switch (dir) {
                 case "rightDown":
-                    points = `0% 0%, ${d}% 0%, 0% ${d}%`;
+                    points = `0,0 ${d},0 0,${d}`;
                     break;
                 case "leftDown":
-                    points = `100% 0%, ${100 - d}% 0%, 100% ${d}%`;
+                    points = `100,0 ${100 - d},0 100,${d}`;
                     break;
                 case "rightUp":
-                    points = `0% 100%, ${d}% 100%, 0% ${100 - d}%`;
+                    points = `0,100 ${d},100 0,${100 - d}`;
                     break;
                 case "leftUp":
-                    points = `100% 100%, ${100 - d}% 100%, 100% ${100 - d}%`;
+                    points = `100,100 ${100 - d},100 100,${100 - d}`;
                     break;
             }
         }
         else {
-            // Quadrilateral phase: the diagonal has passed the opposite edges
             const e = d - 100;
             switch (dir) {
                 case "rightDown":
-                    points = `0% 0%, 100% 0%, 100% ${e}%, ${e}% 100%, 0% 100%`;
+                    points = `0,0 100,0 100,${e} ${e},100 0,100`;
                     break;
                 case "leftDown":
-                    points = `100% 0%, 0% 0%, 0% ${e}%, ${100 - e}% 100%, 100% 100%`;
+                    points = `100,0 0,0 0,${e} ${100 - e},100 100,100`;
                     break;
                 case "rightUp":
-                    points = `0% 100%, 100% 100%, 100% ${100 - e}%, ${e}% 0%, 0% 0%`;
+                    points = `0,100 100,100 100,${100 - e} ${e},0 0,0`;
                     break;
                 case "leftUp":
-                    points = `100% 100%, 0% 100%, 0% ${100 - e}%, ${100 - e}% 0%, 100% 0%`;
+                    points = `100,100 0,100 0,${100 - e} ${100 - e},0 100,0`;
                     break;
             }
         }
-        incoming.style.clipPath = `polygon(${points})`;
+        applyMask(incoming, svgMask(`<polygon points="${points}" fill="white" filter="url(#b)"/>`, blur));
     };
 }
 // ---------------------------------------------------------------------------
 // Blinds / Comb
 // ---------------------------------------------------------------------------
-const BLIND_STRIPS = 6;
+const BLIND_STRIPS = 14;
 /**
- * Blinds: 3D flip effect per strip.
- * First half:  outgoing strips narrow toward their top/left edge (rotating away).
- * Second half: incoming strips widen from their top/left edge (rotating toward viewer).
- * Simulates each strip flipping over to reveal the new slide on its back.
+ * Blinds: CSS 3D box-rotation effect matching PowerPoint.
+ *
+ * Each strip is modelled as a 3D box whose cross-section is a square
+ * (depth === strip height). The front face shows the outgoing slide and the
+ * bottom face shows the incoming slide. All boxes rotate 90° around the X
+ * axis (horizontal) or Y axis (vertical) at the box centre, so the bottom
+ * face rolls into view like a real window blind.
+ *
+ * All faces share a single `preserve-3d` context rooted on the outgoing
+ * snapshot element, so the browser z-sorts faces across strips correctly.
  */
 function blindsEffect(orientation) {
     const N = BLIND_STRIPS;
+    const isH = orientation === "horizontal";
+    let setup = null;
     return (t, outgoing, incoming) => {
         if (t >= 1) {
+            incoming.style.opacity = "";
             incoming.style.clipPath = "none";
-            outgoing.style.clipPath = "polygon(0% 0%, 0% 0%, 0% 0%)";
+            // outgoing (now containing strips) is removed by onComplete
             return;
         }
-        if (t <= 0) {
+        // Lazy init: build 3D strip DOM on first frame
+        if (!setup) {
+            setup = setupBlinds3D(outgoing, incoming, N, isH);
+        }
+        // Fallback to crossfade if 3D setup failed (no canvases)
+        if (!setup || setup.flippers.length === 0) {
             outgoing.style.zIndex = "1";
-            incoming.style.clipPath = "polygon(0% 0%, 0% 0%, 0% 0%)";
+            outgoing.style.opacity = `${1 - t}`;
             return;
         }
-        if (t < 0.5) {
-            // First half: outgoing strips narrow (flip away from viewer)
-            outgoing.style.zIndex = "1";
-            const frac = 1 - t * 2; // 1 → 0
-            const outPoints = [];
-            if (orientation === "horizontal") {
-                const stripH = 100 / N;
-                for (let i = 0; i < N; i++) {
-                    const top = i * stripH;
-                    const bot = top + frac * stripH;
-                    outPoints.push("0% 0%", `0% ${top}%`, `100% ${top}%`, `100% ${bot}%`, `0% ${bot}%`, `0% ${top}%`, "0% 0%");
-                }
-            }
-            else {
-                const stripW = 100 / N;
-                for (let i = 0; i < N; i++) {
-                    const left = i * stripW;
-                    const right = left + frac * stripW;
-                    outPoints.push("0% 0%", `${left}% 0%`, `${right}% 0%`, `${right}% 100%`, `${left}% 100%`, `${left}% 0%`, "0% 0%");
-                }
-            }
-            outgoing.style.clipPath = `polygon(${outPoints.join(", ")})`;
-            incoming.style.clipPath = "polygon(0% 0%, 0% 0%, 0% 0%)";
+        // Staggered rotation: center strips start first, edges start last.
+        // Each strip's local progress is derived from its distance to center.
+        const hd = setup.halfDepth;
+        const stagger = 0.7; // fraction of total duration used for stagger spread
+        const center = (N - 1) / 2;
+        for (let i = 0; i < setup.flippers.length; i++) {
+            const dist = Math.abs(i - center) / center; // 0 at center, 1 at edges
+            const delay = dist * stagger;
+            const stripT = Math.max(0, Math.min(1, (t - delay) / (1 - stagger)));
+            const angle = stripT * 90;
+            setup.flippers[i].style.transform = isH
+                ? `translateZ(-${hd}px) rotateX(${angle}deg)`
+                : `translateZ(-${hd}px) rotateY(-${angle}deg)`;
+        }
+    };
+}
+/**
+ * Build N 3D box-strip elements inside the outgoing snapshot.
+ *
+ * DOM structure (horizontal example):
+ *   outgoing  [perspective, preserve-3d]
+ *   ├── flipper-0  [preserve-3d, position: absolute, rotateX(angle)]
+ *   │   ├── front  [canvas, translateZ(d/2)]
+ *   │   └── bottom [canvas, rotateX(-90deg) translateZ(d/2)]
+ *   ├── flipper-1  ...
+ *   └── ...
+ */
+function setupBlinds3D(outgoing, incoming, N, isH) {
+    // The outgoing snapshot is a div (positioned at the slot area) containing a canvas.
+    // The incoming is the real spread — find its main canvas.
+    const outCanvas = outgoing.querySelector("canvas");
+    const inCanvas = incoming.querySelector(".udoc-spread__canvas") ??
+        incoming.querySelector("canvas");
+    if (!outCanvas || !inCanvas || outCanvas.width === 0 || inCanvas.width === 0) {
+        return { flippers: [], halfDepth: 0 };
+    }
+    // Derive CSS dimensions from the canvas physical size / DPR so they are
+    // on exact device-pixel boundaries (the snapshot is built this way).
+    const dpr = window.devicePixelRatio || 1;
+    const slideW = outCanvas.width / dpr;
+    const slideH = outCanvas.height / dpr;
+    const d = isH ? slideH / N : slideW / N; // box depth = strip size (square cross-section)
+    // Repurpose the disposable snapshot as the container.
+    // Since the snapshot is now a canvas positioned at the slot area,
+    // all children are placed at (0,0) relative to it — no offset needed.
+    outgoing.innerHTML = "";
+    outgoing.style.overflow = "visible";
+    outgoing.style.zIndex = "1";
+    // Hide the real spread during animation (resetIncoming restores on cancel)
+    incoming.style.opacity = "0";
+    // Black backdrop — flat 2D element, NOT inside the preserve-3d context.
+    // Sits behind the 3D scene in normal stacking order (DOM before scene).
+    const backdrop = document.createElement("div");
+    backdrop.style.position = "absolute";
+    backdrop.style.left = "0";
+    backdrop.style.top = "0";
+    backdrop.style.width = `${slideW}px`;
+    backdrop.style.height = `${slideH}px`;
+    backdrop.style.background = "#000";
+    outgoing.appendChild(backdrop);
+    // 3D scene container — preserve-3d + perspective live here,
+    // separate from the flat backdrop so it doesn't interfere.
+    const scene = document.createElement("div");
+    scene.style.position = "absolute";
+    scene.style.left = "0";
+    scene.style.top = "0";
+    scene.style.width = `${slideW}px`;
+    scene.style.height = `${slideH}px`;
+    scene.style.perspective = `${(isH ? slideH : slideW) * 2}px`;
+    scene.style.transformStyle = "preserve-3d";
+    outgoing.appendChild(scene);
+    const flippers = [];
+    for (let i = 0; i < N; i++) {
+        // Flipper — the rotating 3D box for this strip
+        const flipper = document.createElement("div");
+        flipper.style.position = "absolute";
+        flipper.style.transformStyle = "preserve-3d";
+        const pad = 0.5; // half-pixel overlap to hide sub-pixel seams
+        if (isH) {
+            flipper.style.left = "0";
+            flipper.style.top = `${i * d - pad}px`;
+            flipper.style.width = `${slideW}px`;
+            flipper.style.height = `${d + pad * 2}px`;
         }
         else {
-            // Second half: incoming strips widen (flip toward viewer)
-            outgoing.style.opacity = "0";
-            const frac = (t - 0.5) * 2; // 0 → 1
-            const inPoints = [];
-            if (orientation === "horizontal") {
-                const stripH = 100 / N;
-                for (let i = 0; i < N; i++) {
-                    const top = i * stripH;
-                    const bot = top + frac * stripH;
-                    inPoints.push("0% 0%", `0% ${top}%`, `100% ${top}%`, `100% ${bot}%`, `0% ${bot}%`, `0% ${top}%`, "0% 0%");
-                }
-            }
-            else {
-                const stripW = 100 / N;
-                for (let i = 0; i < N; i++) {
-                    const left = i * stripW;
-                    const right = left + frac * stripW;
-                    inPoints.push("0% 0%", `${left}% 0%`, `${right}% 0%`, `${right}% 100%`, `${left}% 100%`, `${left}% 0%`, "0% 0%");
-                }
-            }
-            incoming.style.clipPath = `polygon(${inPoints.join(", ")})`;
+            flipper.style.top = "0";
+            flipper.style.left = `${i * d - pad}px`;
+            flipper.style.width = `${d + pad * 2}px`;
+            flipper.style.height = `${slideH}px`;
         }
-    };
+        // transform-origin defaults to center — correct for box-centre rotation
+        // Front face: outgoing content, pushed forward by d/2
+        const front = createBlindFace(outCanvas, i, N, isH, pad);
+        front.style.backfaceVisibility = "hidden";
+        front.style.transform = `translateZ(${d / 2}px)`;
+        // Bottom/right face: incoming content, rotated into position then pushed out
+        const bottom = createBlindFace(inCanvas, i, N, isH, pad);
+        bottom.style.backfaceVisibility = "hidden";
+        bottom.style.transform = isH
+            ? `rotateX(-90deg) translateZ(${d / 2}px)`
+            : `rotateY(90deg) translateZ(${d / 2}px)`;
+        flipper.appendChild(front);
+        flipper.appendChild(bottom);
+        scene.appendChild(flipper);
+        flippers.push(flipper);
+    }
+    return { flippers, halfDepth: d / 2 };
+}
+/** Create a canvas element showing one strip slice of a source canvas.
+ *  The slice includes `pad` CSS-pixel overlap on each side so that
+ *  `width:100%; height:100%` fills the padded flipper without scaling. */
+function createBlindFace(source, index, total, isHorizontal, pad) {
+    const dpr = window.devicePixelRatio || 1;
+    const padPx = Math.ceil(pad * dpr); // padding in device pixels
+    const canvas = document.createElement("canvas");
+    canvas.style.position = "absolute";
+    canvas.style.top = "0";
+    canvas.style.left = "0";
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    canvas.style.display = "block";
+    if (isHorizontal) {
+        const stripTop = Math.round((index * source.height) / total);
+        const stripBot = Math.round(((index + 1) * source.height) / total);
+        const sy = Math.max(0, stripTop - padPx);
+        const syEnd = Math.min(source.height, stripBot + padPx);
+        const sh = syEnd - sy;
+        canvas.width = source.width;
+        canvas.height = sh;
+        const ctx = canvas.getContext("2d");
+        if (ctx)
+            ctx.drawImage(source, 0, sy, source.width, sh, 0, 0, source.width, sh);
+    }
+    else {
+        const stripLeft = Math.round((index * source.width) / total);
+        const stripRight = Math.round(((index + 1) * source.width) / total);
+        const sx = Math.max(0, stripLeft - padPx);
+        const sxEnd = Math.min(source.width, stripRight + padPx);
+        const sw = sxEnd - sx;
+        canvas.width = sw;
+        canvas.height = source.height;
+        const ctx = canvas.getContext("2d");
+        if (ctx)
+            ctx.drawImage(source, sx, 0, sw, source.height, 0, 0, sw, source.height);
+    }
+    return canvas;
 }
 /**
  * Comb: N strips revealed from alternating directions.
@@ -677,27 +863,28 @@ function wheelSweepEffect(spokes, clockwise) {
     const dir = clockwise ? 1 : -1;
     return (t, _outgoing, incoming) => {
         if (t >= 1) {
-            incoming.style.clipPath = "none";
+            clearMask(incoming);
             return;
         }
         if (t <= 0) {
-            incoming.style.clipPath = "polygon(50% 50%, 50% 50%, 50% 50%)";
+            applyMask(incoming, svgMask(`<polygon points="50,50 50,50 50,50" fill="white" filter="url(#b)"/>`, 0));
             return;
         }
+        const blur = Math.max(0.3, t * 50 * 0.06);
         const sectorAngle = 360 / n;
         const sweep = t * sectorAngle;
-        const points = [];
+        let path = "";
         for (let s = 0; s < n; s++) {
             const startDeg = -90 + s * sectorAngle;
-            points.push("50% 50%");
+            path += "M50,50 ";
             for (let j = 0; j <= ARC_STEPS; j++) {
                 const deg = startDeg + dir * (j / ARC_STEPS) * sweep;
                 const rad = (deg * Math.PI) / 180;
-                points.push(`${50 + SWEEP_RADIUS * Math.cos(rad)}% ${50 + SWEEP_RADIUS * Math.sin(rad)}%`);
+                path += `L${50 + SWEEP_RADIUS * Math.cos(rad)},${50 + SWEEP_RADIUS * Math.sin(rad)} `;
             }
-            points.push("50% 50%");
+            path += "Z ";
         }
-        incoming.style.clipPath = `polygon(${points.join(", ")})`;
+        applyMask(incoming, svgMask(`<path d="${path}" fill="white" filter="url(#b)"/>`, blur));
     };
 }
 /**
@@ -705,28 +892,30 @@ function wheelSweepEffect(spokes, clockwise) {
  */
 function wedgeEffect(t, _outgoing, incoming) {
     if (t >= 1) {
-        incoming.style.clipPath = "none";
+        clearMask(incoming);
         return;
     }
     if (t <= 0) {
-        incoming.style.clipPath = "polygon(50% 50%, 50% 50%, 50% 50%)";
+        applyMask(incoming, svgMask(`<polygon points="50,50 50,50 50,50" fill="white" filter="url(#b)"/>`, 0));
         return;
     }
+    const blur = Math.max(0.3, t * 50 * 0.06);
     const sweep = t * 180;
-    const points = ["50% 50%"];
+    let path = "M50,50 ";
     // Counter-clockwise half
     for (let j = ARC_STEPS; j >= 0; j--) {
         const deg = -90 - (j / ARC_STEPS) * sweep;
         const rad = (deg * Math.PI) / 180;
-        points.push(`${50 + SWEEP_RADIUS * Math.cos(rad)}% ${50 + SWEEP_RADIUS * Math.sin(rad)}%`);
+        path += `L${50 + SWEEP_RADIUS * Math.cos(rad)},${50 + SWEEP_RADIUS * Math.sin(rad)} `;
     }
     // Clockwise half
     for (let j = 0; j <= ARC_STEPS; j++) {
         const deg = -90 + (j / ARC_STEPS) * sweep;
         const rad = (deg * Math.PI) / 180;
-        points.push(`${50 + SWEEP_RADIUS * Math.cos(rad)}% ${50 + SWEEP_RADIUS * Math.sin(rad)}%`);
+        path += `L${50 + SWEEP_RADIUS * Math.cos(rad)},${50 + SWEEP_RADIUS * Math.sin(rad)} `;
     }
-    incoming.style.clipPath = `polygon(${points.join(", ")})`;
+    path += "Z";
+    applyMask(incoming, svgMask(`<path d="${path}" fill="white" filter="url(#b)"/>`, blur));
 }
 // ---------------------------------------------------------------------------
 // Checker / Random Bar
@@ -734,79 +923,153 @@ function wedgeEffect(t, _outgoing, incoming) {
 const CHECKER_COLS = 8;
 const CHECKER_ROWS = 6;
 /**
- * Checker: 3D flip effect per cell in a checkerboard pattern.
- * Each cell flips individually: outgoing cell narrows (first half),
- * then incoming cell widens (second half). The flip is staggered
- * by position, sweeping "across" or "down" with checkerboard offset.
+ * Checker: 3D tile-flip effect in a checkerboard pattern.
+ *
+ * The slide is divided into a grid of tiles. Each tile is a 3D object
+ * with the outgoing slide on the front face and the incoming slide on
+ * the back face. Tiles flip 180° around the X axis (across/horizontal)
+ * or Y axis (down/vertical), staggered in a checkerboard sweep pattern.
  */
 function checkerEffect(orientation) {
-    const cols = orientation === "horizontal" ? CHECKER_COLS : CHECKER_ROWS;
-    const rows = orientation === "horizontal" ? CHECKER_ROWS : CHECKER_COLS;
-    const sweepLen = (orientation === "horizontal" ? cols : rows) + 1;
-    // Each cell's flip takes 1 sweep-unit. Total time = sweepLen + 1 (for flip duration)
-    const totalLen = sweepLen + 1;
+    const isH = orientation === "horizontal";
+    const cols = CHECKER_COLS;
+    const rows = CHECKER_ROWS;
+    let setup = null;
+    // Sweep across columns (horizontal) or down rows (vertical),
+    // with checkerboard phase offset.
+    const sweepLen = (isH ? cols : rows) + 1;
+    const flipDur = 3; // each tile takes 3 sweep-units to flip
+    const totalLen = sweepLen + flipDur;
     return (t, outgoing, incoming) => {
         if (t >= 1) {
+            incoming.style.opacity = "";
             incoming.style.clipPath = "none";
-            outgoing.style.clipPath = "polygon(0% 0%, 0% 0%, 0% 0%)";
             return;
         }
-        const cellW = 100 / cols;
-        const cellH = 100 / rows;
+        if (!setup) {
+            setup = setupChecker3D(outgoing, incoming, cols, rows, isH);
+        }
         const sweep = t * totalLen;
-        const outPoints = [];
-        const inPoints = [];
         for (let r = 0; r < rows; r++) {
             for (let c = 0; c < cols; c++) {
-                const pos = orientation === "horizontal" ? c : r;
+                const idx = r * cols + c;
+                const pos = isH ? c : r;
                 const phase = (r + c) % 2;
                 const cellStart = pos + phase;
-                // cellT: 0 = not started, 0→0.5 = outgoing shrinks, 0.5→1 = incoming grows
-                const cellT = Math.max(0, Math.min(1, sweep - cellStart));
-                const left = c * cellW;
-                const top = r * cellH;
-                if (cellT <= 0) {
-                    // Cell hasn't started flipping — outgoing fully visible
-                    outPoints.push("0% 0%", `${left}% ${top}%`, `${left + cellW}% ${top}%`, `${left + cellW}% ${top + cellH}%`, `${left}% ${top + cellH}%`, `${left}% ${top}%`, "0% 0%");
-                }
-                else if (cellT < 0.5) {
-                    // First half: outgoing cell narrows (flip away)
-                    const frac = 1 - cellT * 2;
-                    if (orientation === "horizontal") {
-                        const bot = top + frac * cellH;
-                        outPoints.push("0% 0%", `${left}% ${top}%`, `${left + cellW}% ${top}%`, `${left + cellW}% ${bot}%`, `${left}% ${bot}%`, `${left}% ${top}%`, "0% 0%");
-                    }
-                    else {
-                        const right = left + frac * cellW;
-                        outPoints.push("0% 0%", `${left}% ${top}%`, `${right}% ${top}%`, `${right}% ${top + cellH}%`, `${left}% ${top + cellH}%`, `${left}% ${top}%`, "0% 0%");
-                    }
-                }
-                else {
-                    // Second half: incoming cell widens (flip toward viewer)
-                    const frac = (cellT - 0.5) * 2;
-                    if (orientation === "horizontal") {
-                        const bot = top + frac * cellH;
-                        inPoints.push("0% 0%", `${left}% ${top}%`, `${left + cellW}% ${top}%`, `${left + cellW}% ${bot}%`, `${left}% ${bot}%`, `${left}% ${top}%`, "0% 0%");
-                    }
-                    else {
-                        const right = left + frac * cellW;
-                        inPoints.push("0% 0%", `${left}% ${top}%`, `${right}% ${top}%`, `${right}% ${top + cellH}%`, `${left}% ${top + cellH}%`, `${left}% ${top}%`, "0% 0%");
-                    }
-                }
+                const cellT = Math.max(0, Math.min(1, (sweep - cellStart) / flipDur));
+                const angle = cellT * 180;
+                setup.flippers[idx].style.transform = isH ? `rotateY(-${angle}deg)` : `rotateX(${angle}deg)`;
             }
         }
-        outgoing.style.zIndex = "1";
-        outgoing.style.clipPath = outPoints.length
-            ? `polygon(${outPoints.join(", ")})`
-            : "polygon(0% 0%, 0% 0%, 0% 0%)";
-        incoming.style.clipPath = inPoints.length ? `polygon(${inPoints.join(", ")})` : "polygon(0% 0%, 0% 0%, 0% 0%)";
     };
 }
+/**
+ * Build a grid of 3D flipper tiles for the checker transition.
+ *
+ * DOM structure:
+ *   outgoing  [container]
+ *   ├── backdrop  [black background]
+ *   └── scene  [perspective, preserve-3d]
+ *       ├── flipper-0,0  [preserve-3d, rotateX/Y]
+ *       │   ├── front  [canvas tile of outgoing]
+ *       │   └── back   [canvas tile of incoming, rotated 180°]
+ *       ├── flipper-0,1  ...
+ *       └── ...
+ */
+function setupChecker3D(outgoing, incoming, cols, rows, isH) {
+    const outCanvas = outgoing.querySelector("canvas");
+    const inCanvas = incoming.querySelector(".udoc-spread__canvas") ??
+        incoming.querySelector("canvas");
+    if (!outCanvas || !inCanvas || outCanvas.width === 0 || inCanvas.width === 0) {
+        return { flippers: [] };
+    }
+    // Derive CSS dimensions from the canvas physical size / DPR so they are
+    // on exact device-pixel boundaries (the snapshot is built this way).
+    const dpr = window.devicePixelRatio || 1;
+    const slideW = outCanvas.width / dpr;
+    const slideH = outCanvas.height / dpr;
+    const tileW = slideW / cols;
+    const tileH = slideH / rows;
+    outgoing.innerHTML = "";
+    outgoing.style.overflow = "visible";
+    outgoing.style.zIndex = "1";
+    incoming.style.opacity = "0";
+    const backdrop = document.createElement("div");
+    backdrop.style.position = "absolute";
+    backdrop.style.left = "0";
+    backdrop.style.top = "0";
+    backdrop.style.width = `${slideW}px`;
+    backdrop.style.height = `${slideH}px`;
+    backdrop.style.background = "#000";
+    outgoing.appendChild(backdrop);
+    const scene = document.createElement("div");
+    scene.style.position = "absolute";
+    scene.style.left = "0";
+    scene.style.top = "0";
+    scene.style.width = `${slideW}px`;
+    scene.style.height = `${slideH}px`;
+    scene.style.perspective = `${Math.max(slideW, slideH) * 2}px`;
+    scene.style.transformStyle = "preserve-3d";
+    outgoing.appendChild(scene);
+    const flippers = [];
+    for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+            const flipper = document.createElement("div");
+            flipper.style.position = "absolute";
+            flipper.style.transformStyle = "preserve-3d";
+            const pad = 0.5; // half-pixel overlap to hide sub-pixel seams
+            flipper.style.left = `${c * tileW - pad}px`;
+            flipper.style.top = `${r * tileH - pad}px`;
+            flipper.style.width = `${tileW + pad * 2}px`;
+            flipper.style.height = `${tileH + pad * 2}px`;
+            const front = createCheckerFace(outCanvas, c, r, cols, rows, pad);
+            front.style.backfaceVisibility = "hidden";
+            const back = createCheckerFace(inCanvas, c, r, cols, rows, pad);
+            back.style.backfaceVisibility = "hidden";
+            back.style.transform = isH ? "rotateY(-180deg)" : "rotateX(180deg)";
+            flipper.appendChild(front);
+            flipper.appendChild(back);
+            scene.appendChild(flipper);
+            flippers.push(flipper);
+        }
+    }
+    return { flippers };
+}
+/** Create a canvas element showing one tile of a source canvas.
+ *  The slice includes `pad` CSS-pixel overlap on each side so that
+ *  `width:100%; height:100%` fills the padded flipper without scaling. */
+function createCheckerFace(source, col, row, cols, rows, pad) {
+    const dpr = window.devicePixelRatio || 1;
+    const padPx = Math.ceil(pad * dpr);
+    const canvas = document.createElement("canvas");
+    canvas.style.position = "absolute";
+    canvas.style.top = "0";
+    canvas.style.left = "0";
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    canvas.style.display = "block";
+    const tileLeft = Math.round((col * source.width) / cols);
+    const tileRight = Math.round(((col + 1) * source.width) / cols);
+    const tileTop = Math.round((row * source.height) / rows);
+    const tileBot = Math.round(((row + 1) * source.height) / rows);
+    const sx = Math.max(0, tileLeft - padPx);
+    const sxEnd = Math.min(source.width, tileRight + padPx);
+    const sy = Math.max(0, tileTop - padPx);
+    const syEnd = Math.min(source.height, tileBot + padPx);
+    const sw = sxEnd - sx;
+    const sh = syEnd - sy;
+    canvas.width = sw;
+    canvas.height = sh;
+    const ctx = canvas.getContext("2d");
+    if (ctx)
+        ctx.drawImage(source, sx, sy, sw, sh, 0, 0, sw, sh);
+    return canvas;
+}
 // ---------------------------------------------------------------------------
 // Dissolve
 // ---------------------------------------------------------------------------
-const DISSOLVE_COLS = 12;
-const DISSOLVE_ROWS = 8;
+const DISSOLVE_COLS = 60;
+const DISSOLVE_ROWS = 40;
 /**
  * Dissolve: random grid cells appear progressively, approximating PowerPoint's
  * pixelated dissolve pattern. Cells snap fully visible in shuffled order.