@sliiu/present-transition-fx 0.0.0-stage → 0.1.0

package/dist/esm/3d.js

@@ -0,0 +1,538 @@
+import { peelFlatClip, rippleAt } from "./geometry.js";
+import { dropTwins, mountTwin } from "./twin.js";
+import { easing, ms, runAll, STD_EASE } from "./util.js";
+function wrap3d(ctx) {
+    const parent = ctx.stage.parentElement;
+    if (!parent)
+        return { wrap: ctx.stage, cleanup: () => undefined };
+    const prevPerspective = parent.style.perspective;
+    const prevTransformStyle = parent.style.transformStyle;
+    parent.style.perspective = `${Math.max(ctx.stageSize.w, ctx.stageSize.h) * 1.5}px`;
+    parent.style.transformStyle = "preserve-3d";
+    ctx.stage.style.transformStyle = "preserve-3d";
+    ctx.ghost.style.transformStyle = "preserve-3d";
+    ctx.stage.style.backfaceVisibility = "hidden";
+    ctx.ghost.style.backfaceVisibility = "hidden";
+    return {
+        wrap: parent,
+        cleanup: () => {
+            parent.style.perspective = prevPerspective;
+            parent.style.transformStyle = prevTransformStyle;
+            ctx.stage.style.transformStyle = "";
+            ctx.ghost.style.transformStyle = "";
+            ctx.stage.style.backfaceVisibility = "";
+            ctx.ghost.style.backfaceVisibility = "";
+        },
+    };
+}
+export const cube = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const { cleanup } = wrap3d(ctx);
+    const w = ctx.stageSize.w;
+    const h = ctx.stageSize.h;
+    const axis = dir === "left" || dir === "right" ? "Y" : "X";
+    const sign = dir === "left" || dir === "up" ? -1 : 1;
+    const half = (axis === "Y" ? w : h) / 2;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    ctx.stage.style.transformOrigin = "center center";
+    ctx.ghost.style.transformOrigin = "center center";
+    const a = ctx.stage.animate([
+        { transform: `translateZ(-${half}px) rotate${axis}(${sign * -90}deg) translateZ(${half}px) ${sBase}` },
+        { transform: `translateZ(-${half}px) rotate${axis}(0deg) translateZ(${half}px) ${sBase}` },
+    ], { duration: ms(ctx), easing: easing(ctx), fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: `translateZ(-${half}px) rotate${axis}(0deg) translateZ(${half}px) ${gBase}` },
+        { transform: `translateZ(-${half}px) rotate${axis}(${sign * 90}deg) translateZ(${half}px) ${gBase}` },
+    ], { duration: ms(ctx), easing: easing(ctx), fill: "forwards" });
+    await runAll([a, b], cleanup);
+};
+/** 三棱柱转 120°，和立方体的 90° 分开。左右绕 Y，上下绕 X。 */
+export const prism = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const { cleanup } = wrap3d(ctx);
+    const alongY = dir === "left" || dir === "right";
+    const half = (alongY ? ctx.stageSize.w : ctx.stageSize.h) / 2;
+    const axis = alongY ? "Y" : "X";
+    const sign = dir === "left" || dir === "up" ? -1 : 1;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    ctx.stage.style.transformOrigin = "center center";
+    ctx.ghost.style.transformOrigin = "center center";
+    const a = ctx.stage.animate([
+        { transform: `translateZ(-${half}px) rotate${axis}(${sign * -120}deg) translateZ(${half}px) ${sBase}` },
+        { transform: `translateZ(-${half}px) rotate${axis}(0deg) translateZ(${half}px) ${sBase}` },
+    ], { duration: ms(ctx), easing: easing(ctx), fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: `translateZ(-${half}px) rotate${axis}(0deg) translateZ(${half}px) ${gBase}` },
+        { transform: `translateZ(-${half}px) rotate${axis}(${sign * 120}deg) translateZ(${half}px) ${gBase}` },
+    ], { duration: ms(ctx), easing: easing(ctx), fill: "forwards" });
+    await runAll([a, b], cleanup);
+};
+/** 走进盒子：新页从内侧转出来，旧页往外让开。和立方体外表面对转分开。 */
+export const box = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const { cleanup } = wrap3d(ctx);
+    const alongY = dir === "left" || dir === "right";
+    const axis = alongY ? "Y" : "X";
+    const sign = dir === "left" || dir === "up" ? -1 : 1;
+    const half = (alongY ? ctx.stageSize.w : ctx.stageSize.h) / 2;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    ctx.stage.style.transformOrigin = "center center";
+    ctx.ghost.style.transformOrigin = "center center";
+    const a = ctx.stage.animate([
+        { transform: `translateZ(${half * 0.35}px) rotate${axis}(${sign * 70}deg) scale(0.82) ${sBase}`, opacity: 0.2 },
+        { transform: `translateZ(0px) rotate${axis}(0deg) scale(1) ${sBase}`, opacity: 1 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: gBase, opacity: 1 },
+        { transform: `translateZ(-${half}px) rotate${axis}(${sign * -55}deg) scale(1.15) ${gBase}`, opacity: 0 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a, b], cleanup);
+};
+export const gallery = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "right");
+    const { cleanup } = wrap3d(ctx);
+    const sign = dir === "left" ? -1 : 1;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    const a = ctx.stage.animate([
+        { transform: `translateX(${sign * ctx.stageSize.w}px) rotateY(${-sign * 90}deg) ${sBase}` },
+        { transform: `translateX(0px) rotateY(0deg) ${sBase}` },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: `translateX(0px) rotateY(0deg) ${gBase}` },
+        { transform: `translateX(${-sign * ctx.stageSize.w}px) rotateY(${sign * 90}deg) ${gBase}` },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a, b], cleanup);
+};
+export const orbit = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const { cleanup } = wrap3d(ctx);
+    const sign = dir === "left" ? -1 : 1;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    const a = ctx.stage.animate([
+        { transform: `translateZ(-200px) rotateY(${sign * 90}deg) translateZ(200px) ${sBase}`, opacity: 0 },
+        { transform: `translateZ(0) rotateY(0) translateZ(0) ${sBase}`, opacity: 1 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: gBase, opacity: 1 },
+        { transform: `translateZ(-200px) rotateY(${-sign * 90}deg) ${gBase}`, opacity: 0 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a, b], cleanup);
+};
+export const conveyor = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "right");
+    const { cleanup } = wrap3d(ctx);
+    const sign = dir === "left" ? -1 : 1;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    const a = ctx.stage.animate([
+        { transform: `translateX(${sign * ctx.stageSize.w}px) translateZ(-400px) ${sBase}` },
+        { transform: `translateX(0) translateZ(0) ${sBase}` },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: gBase },
+        { transform: `translateX(${-sign * ctx.stageSize.w}px) translateZ(-400px) ${gBase}` },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a, b], cleanup);
+};
+function pageHalves(ctx, vert) {
+    const left = mountTwin(ctx.ghost, vert ? "inset(0 50% 0 0)" : "inset(0 0 50% 0)");
+    const right = mountTwin(ctx.ghost, vert ? "inset(0 0 0 50%)" : "inset(50% 0 0 0)");
+    const prev = ctx.ghost.style.visibility;
+    ctx.ghost.style.visibility = "hidden";
+    return { left, right, prev };
+}
+/** 旧页对开。垂直沿左右铰链转开，水平沿上下铰链转开。 */
+export const doors = async (ctx) => {
+    const vert = String(ctx.params.orient ?? "vert") !== "horz";
+    const { cleanup } = wrap3d(ctx);
+    const { left, right, prev } = pageHalves(ctx, vert);
+    left.style.transformOrigin = vert ? "left center" : "center top";
+    right.style.transformOrigin = vert ? "right center" : "center bottom";
+    const openL = vert ? "perspective(900px) rotateY(-105deg)" : "perspective(900px) rotateX(105deg)";
+    const openR = vert ? "perspective(900px) rotateY(105deg)" : "perspective(900px) rotateX(-105deg)";
+    const dur = ms(ctx);
+    await runAll([
+        left.animate([{ transform: "none", opacity: 1 }, { transform: openL, opacity: 0 }], { duration: dur, easing: STD_EASE, fill: "forwards" }),
+        right.animate([{ transform: "none", opacity: 1 }, { transform: openR, opacity: 0 }], { duration: dur, easing: STD_EASE, fill: "forwards" }),
+    ], () => {
+        dropTwins([left, right], ctx.ghost, prev);
+        cleanup();
+    });
+};
+/** 窗：两扇平着滑开，不绕铰链转。和门分开。 */
+export const window = async (ctx) => {
+    const vert = String(ctx.params.orient ?? "vert") !== "horz";
+    const { left, right, prev } = pageHalves(ctx, vert);
+    const offL = vert ? "translateX(-100%)" : "translateY(-100%)";
+    const offR = vert ? "translateX(100%)" : "translateY(100%)";
+    const baseL = left.style.transform || "";
+    const baseR = right.style.transform || "";
+    const dur = ms(ctx);
+    await runAll([
+        left.animate([{ transform: baseL }, { transform: `${offL} ${baseL}` }], { duration: dur, easing: STD_EASE, fill: "forwards" }),
+        right.animate([{ transform: baseR }, { transform: `${offR} ${baseR}` }], { duration: dur, easing: STD_EASE, fill: "forwards" }),
+    ], () => dropTwins([left, right], ctx.ghost, prev));
+};
+// 旧页绕一侧边缘翻起：towardRight 时铰链在右缘、左缘翻向右侧，否则镜像。
+async function curlAway(ctx, towardRight) {
+    const { cleanup } = wrap3d(ctx);
+    const gBase = ctx.ghost.style.transform || "";
+    ctx.ghost.style.transformOrigin = towardRight ? "right center" : "left center";
+    const deg = towardRight ? -160 : 160;
+    const a = ctx.ghost.animate([
+        { transform: `perspective(1200px) rotateY(0deg) ${gBase}` },
+        { transform: `perspective(1200px) rotateY(${deg}deg) ${gBase}`, opacity: 0 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a], cleanup);
+}
+export const pageCurl = (ctx) => curlAway(ctx, true);
+/** p15 pageCurlSingle：只掀起一角。整页卷曲走 pageCurl 的书页翻边。 */
+export const pageCurlSingle = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const fromRight = dir === "right";
+    const fromTop = dir === "up" || dir === "down";
+    const { cleanup } = wrap3d(ctx);
+    ctx.ghost.style.transformOrigin = `${fromRight ? "0%" : "100%"} ${fromTop ? "0%" : "100%"}`;
+    const gBase = ctx.ghost.style.transform || "";
+    const ry = fromRight ? -62 : 62;
+    const rx = fromTop ? -36 : 36;
+    const a = ctx.ghost.animate([
+        { transform: gBase, opacity: 1 },
+        { transform: `rotateX(${rx * 0.45}deg) rotateY(${ry * 0.45}deg) ${gBase}`, opacity: 1, offset: 0.4 },
+        { transform: `rotateX(${rx}deg) rotateY(${ry}deg) translateZ(80px) ${gBase}`, opacity: 0 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a], () => {
+        ctx.ghost.style.transformOrigin = "";
+        cleanup();
+    });
+};
+/** p15 wind：旧页切成细条，顺着风向依次吹出。向右 / 向下镜像。 */
+export const wind = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const vertical = dir === "up" || dir === "down";
+    const sign = dir === "right" || dir === "down" ? 1 : -1;
+    const count = 12;
+    const strips = [];
+    for (let i = 0; i < count; i++) {
+        const start = (i / count) * 100;
+        const end = ((count - i - 1) / count) * 100;
+        const clip = vertical ? `inset(0 ${end}% 0 ${start}%)` : `inset(${start}% 0 ${end}% 0)`;
+        strips.push(mountTwin(ctx.ghost, clip));
+    }
+    const prev = ctx.ghost.style.visibility;
+    ctx.ghost.style.visibility = "hidden";
+    const dur = ms(ctx);
+    const anims = strips.map((el, i) => {
+        const base = el.style.transform || "";
+        const shift = vertical
+            ? `translate(0, ${sign * 120}%) rotate(${sign * 16}deg)`
+            : `translate(${sign * 120}%, ${sign * -6}%) rotate(${sign * 18}deg)`;
+        return el.animate([
+            { transform: base, opacity: 1 },
+            { transform: `${shift} ${base}`, opacity: 0 },
+        ], { duration: dur * 0.62, delay: (i / count) * dur * 0.4, easing: easing(ctx), fill: "forwards" });
+    });
+    await runAll(anims, () => dropTwins(strips, ctx.ghost, prev));
+};
+/** p15 crush：旧页朝选定的边压成一条线。 */
+export const crush = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const vertical = dir === "up" || dir === "down";
+    ctx.ghost.style.transformOrigin = vertical
+        ? (dir === "down" ? "center bottom" : "center top")
+        : (dir === "right" ? "right center" : "left center");
+    const gBase = ctx.ghost.style.transform || "";
+    const flat = vertical ? "scaleX(1.12) scaleY(0.02)" : "scaleX(0.02) scaleY(1.12)";
+    const a = ctx.ghost.animate([
+        { transform: gBase, opacity: 1 },
+        { transform: `${flat} ${gBase}`, opacity: 0 },
+    ], { duration: ms(ctx), easing: easing(ctx), fill: "forwards" });
+    await runAll([a], () => {
+        ctx.ghost.style.transformOrigin = "";
+    });
+};
+// [MS-PPTX] p15:prstTrans prst="airplane"：旧页原地折成纸飞机（两个前角折向中线成机头，
+// 右缘收成机尾），再朝左上飞出画面，新页一直静止在下面。invX（params.dir="right"）镜像成朝右上。
+// clip-path 各帧点数必须相同，WAAPI 才能插值：左边两个角都收到机头，右缘三个点收成尾翼缺口。
+const AIRPLANE_SHEET = [[0, 0], [100, 0], [100, 40], [100, 50], [100, 60], [100, 100], [0, 100]];
+const AIRPLANE_PLANE = [[4, 49], [96, 8], [84, 42], [92, 50], [84, 58], [96, 92], [4, 51]];
+function airplanePolygon(pts, mirror) {
+    return `polygon(${pts.map(([x, y]) => `${mirror ? 100 - x : x}% ${y}%`).join(", ")})`;
+}
+export const airplane = async (ctx) => {
+    const ghost = ctx.ghost;
+    const doc = ghost.ownerDocument;
+    const mirror = String(ctx.params.dir ?? "left") === "right";
+    const sx = mirror ? -1 : 1;
+    const gBase = ghost.style.transform || "";
+    const tf = (x, y, deg, s) => `translate(${-sx * x}%, ${y}%) rotate(${sx * deg}deg) scale(${s}) ${gBase}`.trim();
+    const sheet = airplanePolygon(AIRPLANE_SHEET, mirror);
+    const plane = airplanePolygon(AIRPLANE_PLANE, mirror);
+    // clip-path 会连 filter 一起裁掉，投影只能挂在外层；外层 0×0 + overflow 可见，不改变 ghost 的定位基准。
+    const parent = ghost.parentElement;
+    const shadowWrap = doc.createElement("div");
+    shadowWrap.style.cssText = "position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none";
+    shadowWrap.style.zIndex = ghost.style.zIndex || "2";
+    if (parent) {
+        parent.insertBefore(shadowWrap, ghost);
+        shadowWrap.appendChild(ghost);
+    }
+    // 折痕：机身中线一道暗线，上翼略亮、下翼略暗；跟随 ghost 一起被裁成飞机形。
+    const crease = doc.createElement("div");
+    crease.style.cssText = [
+        "position:absolute",
+        "inset:0",
+        "pointer-events:none",
+        "opacity:0",
+        "background:linear-gradient(to bottom, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 44%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 56%, rgba(0,0,0,0.28) 100%)",
+    ].join(";");
+    ghost.appendChild(crease);
+    const prevOrigin = ghost.style.transformOrigin;
+    const prevClip = ghost.style.clipPath;
+    ghost.style.transformOrigin = "50% 50%";
+    const dur = ms(ctx);
+    const fold = "cubic-bezier(0.45, 0, 0.55, 1)";
+    const a = ghost.animate([
+        { offset: 0, clipPath: sheet, transform: tf(0, 0, 0, 1), easing: fold },
+        { offset: 0.1, clipPath: sheet, transform: tf(0, 0, 0, 0.94), easing: fold },
+        { offset: 0.45, clipPath: plane, transform: tf(0, 0, 0, 0.5), easing: fold },
+        // 起飞前先往反方向压一下，再加速爬升。
+        { offset: 0.55, clipPath: plane, transform: tf(-6, 4, 4, 0.5), easing: "cubic-bezier(0.55, 0, 0.9, 0.45)" },
+        { offset: 1, clipPath: plane, transform: tf(135, -110, 24, 0.34) },
+    ], { duration: dur, fill: "forwards" });
+    const b = crease.animate([
+        { offset: 0, opacity: 0 },
+        { offset: 0.1, opacity: 0 },
+        { offset: 0.45, opacity: 1 },
+        { offset: 1, opacity: 1 },
+    ], { duration: dur, fill: "forwards" });
+    const c = shadowWrap.animate([
+        { offset: 0, filter: "drop-shadow(0 0 0 rgba(0,0,0,0))" },
+        { offset: 0.45, filter: "drop-shadow(0 12px 16px rgba(0,0,0,0.45))" },
+        { offset: 1, filter: "drop-shadow(0 24px 22px rgba(0,0,0,0.35))" },
+    ], { duration: dur, fill: "forwards" });
+    await runAll([a, b, c], () => {
+        crease.remove();
+        ghost.style.transformOrigin = prevOrigin;
+        ghost.style.clipPath = prevClip;
+        if (parent) {
+            parent.insertBefore(ghost, shadowWrap);
+            shadowWrap.remove();
+        }
+    });
+};
+/** 对折两次再飞走。向右时折痕在右缘。和翻页的单次卷起分开。 */
+export const origami = async (ctx) => {
+    const mirror = String(ctx.params.dir ?? "left") === "right";
+    const gBase = ctx.ghost.style.transform || "";
+    const origin = ctx.ghost.style.transformOrigin;
+    ctx.ghost.style.transformOrigin = mirror ? "right center" : "left center";
+    const fly = mirror ? -130 : 130;
+    const a = ctx.ghost.animate([
+        { offset: 0, transform: `scaleX(1) ${gBase}`, opacity: 1 },
+        { offset: 0.42, transform: `scaleX(0.06) ${gBase}`, opacity: 1 },
+        { offset: 1, transform: `scaleX(0.06) translate(${fly}%, -36%) rotate(${mirror ? -18 : 18}deg) ${gBase}`, opacity: 0 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a], () => {
+        ctx.ghost.style.transformOrigin = origin;
+    });
+};
+export const flythrough = async (ctx) => {
+    const out = String(ctx.params.dir ?? "in") === "out";
+    const { cleanup } = wrap3d(ctx);
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    const anims = out
+        ? [
+            ctx.stage.animate([
+                { transform: `${sBase} translateZ(-1400px) scale(0.35)`, opacity: 0 },
+                { transform: sBase, opacity: 1 },
+            ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" }),
+            ctx.ghost.animate([{ opacity: 1 }, { opacity: 0 }], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" }),
+        ]
+        : [
+            ctx.ghost.animate([
+                { transform: gBase, opacity: 1 },
+                { transform: `${gBase} translateZ(900px) scale(2.6)`, opacity: 0 },
+            ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" }),
+        ];
+    await runAll(anims, cleanup);
+};
+export const rotate = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const { cleanup } = wrap3d(ctx);
+    const axis = dir === "left" || dir === "right" ? "Y" : "X";
+    const sign = dir === "left" || dir === "up" ? -1 : 1;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    const a = ctx.stage.animate([
+        { transform: `${sBase} rotate${axis}(${sign * 180}deg)`, opacity: 0 },
+        { transform: sBase, opacity: 1 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    const b = ctx.ghost.animate([{ transform: gBase, opacity: 1 }, { transform: `${gBase} rotate${axis}(${-sign * 180}deg)`, opacity: 0 }], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a, b], cleanup);
+};
+/** 绕画面外侧的轴转过去，像摩天轮的一格，不是原地翻面。 */
+export const ferris = async (ctx) => {
+    const toRight = String(ctx.params.dir ?? "left") === "right";
+    const { cleanup } = wrap3d(ctx);
+    const origin = toRight ? "120% 50%" : "-20% 50%";
+    const sign = toRight ? 1 : -1;
+    const prevS = ctx.stage.style.transformOrigin;
+    const prevG = ctx.ghost.style.transformOrigin;
+    ctx.stage.style.transformOrigin = origin;
+    ctx.ghost.style.transformOrigin = origin;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    const a = ctx.stage.animate([
+        { transform: `rotate(${sign * -180}deg) ${sBase}` },
+        { transform: `rotate(0deg) ${sBase}` },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: `rotate(0deg) ${gBase}` },
+        { transform: `rotate(${sign * 180}deg) ${gBase}` },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a, b], () => {
+        ctx.stage.style.transformOrigin = prevS;
+        ctx.ghost.style.transformOrigin = prevG;
+        cleanup();
+    });
+};
+// [MS-PPTX] p15:prstTrans prst="peelOff"：默认从右下角朝左揭起，invX（params.dir="right"）朝右。
+export const peelOff = async (ctx) => {
+    const towardRight = String(ctx.params.dir ?? "left") === "right";
+    const { cleanup } = wrap3d(ctx);
+    const prevOrigin = ctx.ghost.style.transformOrigin;
+    const gBase = ctx.ghost.style.transform || "";
+    ctx.ghost.style.transformOrigin = towardRight ? "100% 0%" : "0% 0%";
+    const lift = towardRight ? 58 : -58;
+    const a = ctx.ghost.animate([
+        { clipPath: peelFlatClip(towardRight, 0), transform: gBase, opacity: 1 },
+        { clipPath: peelFlatClip(towardRight, 0.45), transform: `perspective(1100px) rotate(${lift * 0.35}deg) ${gBase}`, opacity: 1, offset: 0.45 },
+        { clipPath: peelFlatClip(towardRight, 1), transform: `perspective(1100px) rotateX(62deg) rotate(${lift}deg) ${gBase}`, opacity: 0 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a], () => {
+        ctx.ghost.style.clipPath = "";
+        ctx.ghost.style.transformOrigin = prevOrigin;
+        cleanup();
+    });
+};
+/** 卡片翻面：转到 90° 时只看见棱，没有旋转那种半透明交叠。 */
+export const flip = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const { cleanup } = wrap3d(ctx);
+    const axis = dir === "up" || dir === "down" ? "X" : "Y";
+    const sign = dir === "right" || dir === "down" ? 1 : -1;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    ctx.stage.style.backfaceVisibility = "hidden";
+    ctx.ghost.style.backfaceVisibility = "hidden";
+    const a = ctx.stage.animate([
+        { transform: `${sBase} rotate${axis}(${sign * -180}deg)` },
+        { transform: sBase },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: gBase },
+        { transform: `${gBase} rotate${axis}(${sign * 180}deg)` },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a, b], cleanup);
+};
+/** 两页左右错身换位，带一点倾斜。 */
+export const switchFx = async (ctx) => {
+    const toLeft = String(ctx.params.dir ?? "left") !== "right";
+    const sign = toLeft ? -1 : 1;
+    const w = ctx.stageSize.w;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    const a = ctx.stage.animate([
+        { transform: `translateX(${sign * w}px) rotate(${sign * -7}deg) ${sBase}` },
+        { transform: sBase },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: gBase },
+        { transform: `translateX(${-sign * w}px) rotate(${sign * 7}deg) ${gBase}` },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a, b]);
+};
+export const drape = async (ctx) => {
+    const toRight = String(ctx.params.dir ?? "left") === "right";
+    const sign = toRight ? 1 : -1;
+    const sBase = ctx.stage.style.transform || "";
+    const gBase = ctx.ghost.style.transform || "";
+    const ease = "cubic-bezier(0.16, 1, 0.3, 1)";
+    const a = ctx.stage.animate([{ transform: `${sBase} translateY(-100%)` }, { transform: sBase }], { duration: ms(ctx), easing: ease, fill: "forwards" });
+    const b = ctx.ghost.animate([
+        { transform: gBase, opacity: 1 },
+        { transform: `${gBase} translate(${sign * 28}%, 110%) rotate(${sign * 11}deg)`, opacity: 0 },
+    ], { duration: ms(ctx), easing: ease, fill: "forwards" });
+    await runAll([a, b]);
+};
+/** 帘幕：多条竖褶从中缝向两边收走。 */
+export const curtains = async (ctx) => {
+    const count = 8;
+    const folds = [];
+    for (let i = 0; i < count; i++) {
+        const left = (i / count) * 100;
+        const right = ((count - i - 1) / count) * 100;
+        folds.push(mountTwin(ctx.ghost, `inset(0 ${right}% 0 ${left}%)`));
+    }
+    const prev = ctx.ghost.style.visibility;
+    ctx.ghost.style.visibility = "hidden";
+    const dur = ms(ctx);
+    const anims = folds.map((el, i) => {
+        const toLeft = i < count / 2;
+        const base = el.style.transform || "";
+        return el.animate([
+            { transform: base, opacity: 1 },
+            { transform: `translateX(${toLeft ? -110 : 110}%) scaleX(0.35) ${base}`, opacity: 0.15 },
+        ], { duration: dur, easing: STD_EASE, fill: "forwards", delay: Math.abs(i - (count - 1) / 2) * dur * 0.04 });
+    });
+    await runAll(anims, () => dropTwins(folds, ctx.ghost, prev));
+};
+export const ripple = async (ctx) => {
+    const at = rippleAt(String(ctx.params.dir ?? ""));
+    const a = ctx.ghost.animate([
+        { clipPath: `circle(160% at ${at})`, opacity: 1 },
+        { clipPath: `circle(0% at ${at})`, opacity: 0 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a], () => {
+        ctx.ghost.style.clipPath = "";
+    });
+};
+export const warp = async (ctx) => {
+    const out = String(ctx.params.dir ?? "in") === "out";
+    const gBase = ctx.ghost.style.transform || "";
+    const sBase = ctx.stage.style.transform || "";
+    if (out) {
+        const a = ctx.stage.animate([
+            { transform: `scale(0.08) skew(22deg) ${sBase}`, opacity: 0 },
+            { transform: sBase, opacity: 1 },
+        ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+        const b = ctx.ghost.animate([{ opacity: 1 }, { opacity: 0 }], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+        await runAll([a, b]);
+        return;
+    }
+    const a = ctx.ghost.animate([
+        { transform: gBase, opacity: 1 },
+        { transform: `scale(0.08) skew(-22deg) ${gBase}`, opacity: 0 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a]);
+};
+export const vortex = async (ctx) => {
+    const dir = String(ctx.params.dir ?? "left");
+    const gBase = ctx.ghost.style.transform || "";
+    const clockwise = dir === "right" || dir === "down";
+    const spin = clockwise ? 540 : -540;
+    const vertical = dir === "up" || dir === "down";
+    const turn = vertical ? `rotateX(${spin}deg)` : `rotate(${spin}deg)`;
+    const a = ctx.ghost.animate([
+        { transform: gBase, opacity: 1 },
+        { transform: `scale(0) ${turn} ${gBase}`, opacity: 0 },
+    ], { duration: ms(ctx), easing: STD_EASE, fill: "forwards" });
+    await runAll([a]);
+};

package/dist/esm/geometry.js

@@ -0,0 +1,127 @@
+// 切换效果里可以脱离 DOM 核对的几何：分割的开合、轮子的轮辐、条纹的角、涟漪的圆心、剥离的折角。
+// 播放函数只负责把这些字符串套到 clip-path / mask 上。
+/** orient=vert 左右分开，horz 上下分开。dir=in 从两侧收到中间，其余从中间向外展开。 */
+export function splitMotion(orient, dir) {
+    const vert = orient === "vert";
+    if (dir === "in")
+        return { kind: "meet", axis: vert ? "x" : "y" };
+    return { kind: "expand", clip: vert ? "inset(0 50% 0 50%)" : "inset(50% 0 50% 0)" };
+}
+/** 面板上的四档（中央向左右展开 / 左右向中央收缩 / …）和 OOXML orient+dir 互转。 */
+export function splitToken(orient, dir) {
+    return `${orient === "vert" ? "vert" : "horz"}${dir === "in" ? "In" : "Out"}`;
+}
+export function splitParamsFromToken(token) {
+    const vert = token.startsWith("vert");
+    const inward = token.endsWith("In");
+    return { orient: vert ? "vert" : "horz", dir: inward ? "in" : "out" };
+}
+/** OOXML CT_WheelTransition 的 spokes。缺省 4。界面提供 1/2/3/4/8，其它 1–8 的整数照播。 */
+export function wheelSpokes(pattern) {
+    const n = Number(pattern);
+    if (!Number.isFinite(n))
+        return 4;
+    const rounded = Math.round(n);
+    if (rounded < 1 || rounded > 8)
+        return 4;
+    return rounded;
+}
+/** 固定点数的轮辐多边形，portion 0 收成射线，1 铺满画面。reverse 往反方向张开。 */
+export function wheelPolygon(spokes, portion, reverse) {
+    const n = Math.max(1, Math.min(8, Math.round(spokes)));
+    const steps = 6;
+    const p = Math.min(1, Math.max(0, portion));
+    const spin = reverse ? -1 : 1;
+    const pts = [];
+    for (let s = 0; s < n; s++) {
+        const startAng = spin * (s / n) * Math.PI * 2 - Math.PI / 2;
+        const sweep = spin * ((p * Math.PI * 2) / n);
+        pts.push("50% 50%");
+        for (let i = 0; i <= steps; i++) {
+            const ang = startAng + sweep * (i / steps);
+            const x = 50 + Math.cos(ang) * 90;
+            const y = 50 + Math.sin(ang) * 90;
+            pts.push(`${x.toFixed(2)}% ${y.toFixed(2)}%`);
+        }
+    }
+    return `polygon(${pts.join(",")})`;
+}
+const STRIP_ORIGIN = {
+    topLeft: [100, 100],
+    topRight: [0, 100],
+    bottomLeft: [100, 0],
+    bottomRight: [0, 0],
+};
+/** 条纹沿 dir 扫过。dir 是运动方向（topLeft = 朝左上，即从右下进来）。三点同点数，方便插值。 */
+export function stripsClips(dir) {
+    const [ox, oy] = STRIP_ORIGIN[dir] ?? STRIP_ORIGIN.bottomRight;
+    const sx = ox === 0 ? 1 : -1;
+    const sy = oy === 0 ? 1 : -1;
+    const at = (dx, dy) => {
+        const x = ox + sx * dx;
+        const y = oy + sy * dy;
+        return `polygon(${x}% ${y}%, ${x}% ${y}%, ${ox}% ${oy}%, ${ox}% ${oy}%)`;
+    };
+    const end = "polygon(-15% -15%, 115% -15%, 115% 115%, -15% 115%)";
+    return [at(0, 0), at(70, 35), end];
+}
+/** 涟漪收缩的圆心。角方向用面板的 topLeft / topRight / bottomLeft / bottomRight。 */
+export function rippleAt(dir) {
+    switch (dir) {
+        case "topLeft":
+            return "0% 0%";
+        case "topRight":
+            return "100% 0%";
+        case "bottomLeft":
+            return "0% 100%";
+        case "bottomRight":
+            return "100% 100%";
+        default:
+            return "50% 50%";
+    }
+}
+const DIAMOND_TILE = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><polygon points="14,2 26,14 14,26 2,14" fill="black"/></svg>`;
+const HEX_TILE = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="28" viewBox="0 0 32 28"><polygon points="8,2 24,2 30,14 24,26 8,26 2,14" fill="black"/></svg>`;
+const HONEY_TILE = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="36" viewBox="0 0 40 36"><polygon points="12,3 28,3 36,18 28,33 12,33 4,18" fill="black"/></svg>`;
+/** 闪耀的菱形 / 六边形，以及蜂巢的疏六边形。mask 里黑色是露出的部分。 */
+export function cellMask(kind) {
+    const svg = kind === "honeycomb" ? HONEY_TILE : kind === "hexagon" ? HEX_TILE : DIAMOND_TILE;
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+/** 面板上「方向 · 图案」和 params.dir + params.pattern 互转。缺省向左、菱形。 */
+export function glitterToken(dir, pattern) {
+    const d = dir === "right" || dir === "up" || dir === "down" ? String(dir) : "left";
+    const p = pattern === "hexagon" ? "hexagon" : "diamond";
+    return `${d}:${p}`;
+}
+export function glitterParamsFromToken(token) {
+    const [rawDir, rawPattern] = token.split(":");
+    const dir = rawDir === "right" || rawDir === "up" || rawDir === "down" ? rawDir : "left";
+    const pattern = rawPattern === "hexagon" ? "hexagon" : "diamond";
+    return { dir, pattern };
+}
+/** 闪耀扫过的起点和终点。向左从左缘扫到右缘，其余镜像。 */
+export function glitterSweep(dir) {
+    switch (dir) {
+        case "right":
+            return { from: "120% 50%", to: "-20% 50%" };
+        case "up":
+            return { from: "50% 120%", to: "50% -20%" };
+        case "down":
+            return { from: "50% -20%", to: "50% 120%" };
+        default:
+            return { from: "-20% 50%", to: "120% 50%" };
+    }
+}
+/** 剥离后仍平贴的那一块。towardRight 从左下角往右揭，否则从右下角往左揭。amount 0 整页，1 几乎揭完。 */
+export function peelFlatClip(towardRight, amount) {
+    const a = Math.min(1, Math.max(0, amount));
+    if (towardRight) {
+        const x = (a * 78).toFixed(1);
+        const y = (100 - a * 78).toFixed(1);
+        return `polygon(0% 0%, 100% 0%, 100% 100%, ${x}% ${y}%)`;
+    }
+    const x = (100 - a * 78).toFixed(1);
+    const y = (100 - a * 78).toFixed(1);
+    return `polygon(0% 0%, 100% 0%, ${x}% ${y}%, 0% 100%)`;
+}

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+export { alignClosedPolylines, ellipsePathFromSize, flattenPathToPoints, makeMorphPathTween, morphPathCompatible, morphPathSignature, linePathFromPoints, parsePathCommands, pathToAbsolute, polygonPointsToPath, rectPathFromSize, } from "./morph-path.js";
+export { auditMorphDeck, auditMorphSlides, averageMorphIssuesPerPair, averageMorphReadinessPercent, averagePathMorphCoveragePercent, collectMorphCandidatesFromSlide, collectUnmatchedMorphShapesInDeck, countMorphPairsClean, countMorphPairsWithIssues, exportMorphAuditText, exportMorphDeckAuditText, exportMorphDeckCompactText, exportMorphDeckFilteredCompactText, exportMorphDeckIssuesCompactText, exportMorphDeckReadinessText, exportMorphIssuesCompactText, exportMorphPairCoverageText, exportMorphPairCompactText, exportMorphReadinessText, exportMorphUnmatchedShapesText, filterMorphDeckEntries, findFirstIssueMorphPair, findHighestPathCoverageMorphPair, findLowestPathCoverageMorphPair, findMostIssueMorphPair, findStrongestMorphPair, findWeakestMorphPair, formatMorphDeckChromeLines, formatMorphDeckReadinessLine, formatMorphDeckStatsLine, formatMorphLowestPathLine, formatMorphMatchReasonBreakdown, formatMorphPairCoverageBreakdownLine, formatMorphReadinessLine, formatMorphReadinessScoreLine, formatMorphReadinessSummary, morphCandidateFromShape, morphIssueCount, morphPairsWithIssues, morphReadinessPercent, countMorphDeckIssues, pathMorphCoveragePercent, summarizeMorphMatchReasons, } from "./morph-audit.js";
+export { matchMorphShapePairs, morphGeometryHash, morphMatchReason, morphSimilarity, } from "./morph-match.js";
+export * from "./types.js";
+export { cellMask, glitterParamsFromToken, glitterSweep, glitterToken, peelFlatClip, rippleAt, splitMotion, splitParamsFromToken, splitToken, stripsClips, wheelPolygon, wheelSpokes, } from "./geometry.js";
+export { getTransition, listTransitions, registerTransition, runTransition, } from "./registry.js";