fix(cli): sign SVG stroke-dash motion in the shared motion classifier

A "draw the line in" SVG entrance animates stroke-dasharray /
stroke-dashoffset on a shape whose geometry never changes, so the
box+opacity channels read it as a frozen timeline and `hyperframes check`
false-positives sweep_static on a visibly animating composition.

- Append strokeDashChannel to ELEMENT_CHANNELS: hashes the computed dash
  pattern and offset for SVG geometry elements with a painted stroke;
  `none` / all-zero patterns, unpainted (none, transparent, zero-width,
  stroke-opacity 0) strokes and non-SVG elements contribute "".
- Widen isVisibleElement for stroked geometry with one degenerate bbox
  axis: Chromium's getBoundingClientRect for SVG shapes excludes the
  stroke, so a straight horizontal or vertical connector reports 0 height
  or 0 width and was dropped by the box gate — the most common shape for
  this animation. motion-sample's `visible` bit for such connectors is
  corrected as a consequence.
- Treat <defs>, <clipPath> and <symbol> as never-painted subtrees in the
  hidden-subtree walk (display is not inherited, so descendants are hidden
  only through the ancestor walk) rather than relying on one engine's
  empty-box behaviour for their descendants.

Tests: happy-dom pins for the degenerate-bbox connector (moves / frozen),
a display:none ancestor, <defs>/<clipPath> content and a stroke-opacity:0
decoy; real-Chromium pins for the connector draw-in and the ignored cases.

Co-Authored-By: Miguel Ángel <miguel.sierra@heygen.com>

Author: miga-heygen

docs/packages/cli.mdx

@@ -717,7 +717,8 @@ HTML. Without a sidecar, nothing changes.
 
 `keepsMoving` uses the same motion classifier as the frozen-sweep guard: box
 geometry, opacity, text and generated content, form-control state, painted CSS
-counters, clip-path, variable-font axes, and the pixels of visible
+counters, clip-path, variable-font axes, SVG stroke dashing
+(`stroke-dasharray` / `stroke-dashoffset`), and the pixels of visible
 canvas/video/img elements all count as motion — so a playing same-origin (or
 CORS-readable) background video keeps a scope live on its own. Elements under
 `data-layout-ignore` never count.

packages/cli/src/commands/motion-signature.browser.chromium.test.ts

@@ -327,6 +327,46 @@ describe.skipIf(!executablePath)("motion-signature.browser in Chromium", () => {
     expect(after.liveness).not.toBe(before.liveness);
   });
 
+  // Blink reports a 290x0 box for this path (object bounding box, no stroke),
+  // so this also pins that a stroked straight connector counts as visible.
+  it("sees a stroke-dashoffset draw-in on a straight connector", async () => {
+    await load(
+      composition(
+        "#wire { stroke: #000; stroke-width: 4; fill: none; stroke-dasharray: 290; stroke-dashoffset: 290; }",
+        '<svg width="640" height="360"><path id="wire" d="M 10 10 L 300 10"/></svg>',
+      ),
+    );
+    const before = await sample();
+    await mutate('document.getElementById("wire").style.strokeDashoffset = "145"');
+    const after = await sample();
+
+    expect(after.sweep).not.toBe(before.sweep);
+    expect(after.liveness).not.toBe(before.liveness);
+  });
+
+  // Blink already reports an empty box inside <defs> / <clipPath>; this pins
+  // that the platform and the classifier agree, not the container rule alone.
+  it("ignores stroke-dash motion under display:none and inside <defs> / <clipPath>", async () => {
+    await load(
+      composition(
+        "path { stroke: #000; stroke-width: 4; fill: none; stroke-dasharray: 290; stroke-dashoffset: 290; } #offstage { display: none; }",
+        `<svg width="640" height="360">
+          <g id="offstage"><path id="hidden" d="M 10 10 L 300 10"/></g>
+          <defs><path id="template" d="M 10 20 L 300 20"/></defs>
+          <clipPath id="reveal"><path id="clip" d="M 10 30 L 300 30"/></clipPath>
+          <rect id="anchor" x="10" y="100" width="200" height="50" fill="#f00"/>
+        </svg>`,
+      ),
+    );
+    const before = await sample();
+    await mutate(
+      'for (const id of ["hidden", "template", "clip"]) document.getElementById(id).style.strokeDashoffset = "0"',
+    );
+    const after = await sample();
+
+    expect(after).toEqual(before);
+  });
+
   it("sees textarea value and checkbox indeterminate changes", async () => {
     await load(
       composition(

packages/cli/src/commands/motion-signature.browser.js

@@ -19,7 +19,7 @@
 // bucketing, while the sweep guard wants exact (0.01) rounding because it asks
 // whether the seek moved anything at all.
 //
-// Adding a channel (e.g. SVG stroke-dasharray/dashoffset): append one reader
+// Adding a channel (e.g. SVG fill-opacity): append one reader
 // `(element, ctx) => string` to ELEMENT_CHANNELS. `ctx` carries the element's
 // computed style, its ::before/::after styles, its inherited opacity, and the
 // quantize flag. A reader returns a string that is equal between two samples
@@ -33,6 +33,17 @@
 (function () {
   const IGNORE_TAGS = new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT", "META", "LINK"]);
   const MEDIA_TAGS = new Set(["CANVAS", "VIDEO", "IMG"]);
+  // SVG containers whose direct content is never painted: <defs> and
+  // <clipPath> only lend geometry to a referencing element, and <symbol>
+  // renders only as <use> instances, whose shadow trees querySelectorAll
+  // cannot reach. Blink happens to report an empty box for their descendants,
+  // but a never-painted subtree should be excluded by rule, not by one
+  // engine's bbox behaviour. SVG tag names are case-preserved (`clipPath`),
+  // hence the lower-cased match.
+  const UNPAINTED_SVG_CONTAINERS = new Set(["defs", "clippath", "symbol"]);
+  // A computed stroke that paints nothing: `none`, or a fully transparent
+  // colour (`transparent` computes to rgba(0, 0, 0, 0)).
+  const TRANSPARENT_COLOR = /^(?:transparent|rgba\([^)]*,\s*0(?:\.0+)?\))$/;
   const FNV_OFFSET_BASIS = 2166136261;
   const FNV_PRIME = 16777619;
   const LIVENESS_POSITION_BUCKET_PX = 2;
@@ -71,7 +82,35 @@
     );
   }
 
-  // Same visibility floor as layout-audit.browser.js isVisibleElement's default.
+  // `display` is not inherited: a child of a display:none parent still
+  // computes display:block, and a shape inside <defs> computes as painted. A
+  // subtree starts here when nothing under it can generate a box.
+  function startsHiddenSubtree(element, style) {
+    return style.display === "none" || UNPAINTED_SVG_CONTAINERS.has(element.tagName.toLowerCase());
+  }
+
+  function paintsStroke(style) {
+    const stroke = cssValue(style.stroke);
+    return (
+      stroke !== "" &&
+      !TRANSPARENT_COLOR.test(stroke) &&
+      Number.parseFloat(style.strokeWidth) > 0 &&
+      Number.parseFloat(style.strokeOpacity) > 0
+    );
+  }
+
+  // An SVG geometry element (path/circle/ellipse/rect/line/polyline/polygon)
+  // with a painted stroke. Chromium's getBoundingClientRect for SVG shapes is
+  // the object bounding box WITHOUT the stroke, so a straight horizontal or
+  // vertical connector reports 0 height or 0 width regardless of stroke-width
+  // even though it is plainly on screen.
+  function isStrokedShape(element, style) {
+    return element instanceof SVGGeometryElement && paintsStroke(style);
+  }
+
+  // layout-audit.browser.js isVisibleElement's default floor, widened by one
+  // case: a stroked SVG shape whose geometry bbox is degenerate along one axis
+  // (see isStrokedShape) is on screen even though that floor rejects it.
   // The author opt-out (data-layout-ignore / data-layout-check=ignore) is NOT
   // applied here: motion-sample reports this bit for explicitly asserted
   // selectors, and an assertion naming an element outranks a layout-audit
@@ -81,10 +120,13 @@
   // fallow-ignore-next-line complexity
   function isVisibleElement(element, style, opacity) {
     if (IGNORE_TAGS.has(element.tagName)) return false;
-    if (isHiddenStyle(style || getComputedStyle(element))) return false;
+    const computed = style || getComputedStyle(element);
+    if (isHiddenStyle(computed)) return false;
     if ((opacity === undefined ? opacityChain(element) : opacity) < 0.2) return false;
     const rect = element.getBoundingClientRect();
-    return rect.width > 0.5 && rect.height > 0.5;
+    if (rect.width > 0.5 && rect.height > 0.5) return true;
+    // A stroked shape paints along its one non-degenerate axis.
+    return isStrokedShape(element, computed) && (rect.width > 0.5 || rect.height > 0.5);
   }
 
   function foldField(hash, value) {
@@ -142,6 +184,25 @@
     return clip ? hashFields([clip]) : "";
   }
 
+  // `none` and an all-zero list (`0`, `0px 0px`) both render a solid stroke,
+  // on which the offset has no visible effect.
+  function dashPattern(style) {
+    const dashes = cssValue(style.strokeDasharray);
+    if (!dashes) return "";
+    return dashes.split(/[\s,]+/).some((dash) => Number.parseFloat(dash) > 0) ? dashes : "";
+  }
+
+  // A "draw the line in" SVG entrance animates stroke-dasharray /
+  // stroke-dashoffset on a shape whose geometry never changes: no box, no
+  // opacity, only how much of the stroke is currently dash-visible. Without a
+  // dash pattern the offset has no visible effect, and without a painted
+  // stroke neither does, so ordinary shapes stay "".
+  function strokeDashChannel(element, ctx) {
+    if (!isStrokedShape(element, ctx.style)) return "";
+    const dashes = dashPattern(ctx.style);
+    return dashes ? hashFields([dashes, ctx.style.strokeDashoffset || ""]) : "";
+  }
+
   // Direct text nodes only: descendants are signed separately, and a hidden
   // descendant's text mutation must not masquerade as visible motion.
   function textChannel(element) {
@@ -228,6 +289,7 @@
     opacityChannel,
     fontAxesChannel,
     clipPathChannel,
+    strokeDashChannel,
     textChannel,
     controlChannel,
     generatedContentChannel,
@@ -326,7 +388,7 @@
     for (const element of [root, ...root.querySelectorAll("*")]) {
       if (IGNORE_TAGS.has(element.tagName)) continue;
       const style = getComputedStyle(element);
-      if (style.display === "none" || hiddenSubtree.has(element.parentElement)) {
+      if (startsHiddenSubtree(element, style) || hiddenSubtree.has(element.parentElement)) {
         hiddenSubtree.add(element);
         continue;
       }

packages/cli/src/commands/motion-signature.browser.test.ts

@@ -32,6 +32,11 @@ const BASE_STYLE: StyleOverride = {
   opacity: "1",
   fontVariationSettings: "normal",
   clipPath: "none",
+  stroke: "none",
+  strokeWidth: "1px",
+  strokeOpacity: "1",
+  strokeDasharray: "none",
+  strokeDashoffset: "0px",
   counterReset: "none",
   counterIncrement: "none",
   counterSet: "none",
@@ -117,6 +122,14 @@ const ROOT = { left: 0, top: 0, width: 640, height: 360 };
 const COUNTDOWN = { left: 280, top: 140, width: 80, height: 48 };
 const ZERO_BOX = { left: 0, top: 0, width: 0, height: 0 };
 const COUNTER_CONSUMER = { after: { content: "counter(countdown)" } };
+// The real Chromium bbox of a horizontal stroked path: the object bounding
+// box excludes the stroke, so height is 0 regardless of stroke-width.
+const FLAT_CONNECTOR = { left: 10, top: 10, width: 290, height: 0 };
+const DASHED_STROKE: StyleOverride = {
+  stroke: "rgb(0, 0, 0)",
+  strokeWidth: "4px",
+  strokeDasharray: "290px",
+};
 
 afterEach(() => {
   vi.restoreAllMocks();
@@ -261,6 +274,153 @@ describe("motion-signature.browser media and geometry channels", () => {
     expect(collect()).toBe(collect());
   });
 
+  // A "draw the line in" SVG entrance (stroke-dashoffset animating on a path
+  // whose `d` never changes) shares the font-axis blind spot: no box change,
+  // no opacity change. The connector rect is deliberately degenerate (height
+  // 0) so the test also pins that a stroked straight line passes the
+  // visibility gate at all — the common real shape for this animation.
+  it("changes the sweep fingerprint when only stroke-dashoffset moves on a straight connector", () => {
+    document.body.innerHTML = `
+      <div id="root" data-composition-id="main" data-width="640" data-height="360">
+        <svg id="diagram"><path id="connector" d="M 10 10 L 300 10" /></svg>
+      </div>
+    `;
+    let dashOffset = "290px";
+    installFixture({
+      rects: { root: ROOT, diagram: ROOT, connector: FLAT_CONNECTOR },
+      styles: {
+        connector: {
+          ...DASHED_STROKE,
+          get strokeDashoffset() {
+            return dashOffset;
+          },
+        } as StyleOverride,
+      },
+    });
+
+    const collect = installScript();
+    const hidden = collect();
+    dashOffset = "145px"; // half drawn in
+    const half = collect();
+    dashOffset = "0px"; // fully revealed
+    const drawn = collect();
+
+    expect(half).not.toBe(hidden);
+    expect(drawn).not.toBe(half);
+  });
+
+  it("keeps the sweep fingerprint identical when nothing moves, stroke dash included", () => {
+    document.body.innerHTML = `
+      <div id="root" data-composition-id="main" data-width="640" data-height="360">
+        <svg id="diagram"><path id="connector" d="M 10 10 L 300 10" /></svg>
+      </div>
+    `;
+    installFixture({
+      rects: { root: ROOT, diagram: ROOT, connector: FLAT_CONNECTOR },
+      styles: { connector: { ...DASHED_STROKE, strokeDashoffset: "0px" } },
+    });
+
+    const collect = installScript();
+
+    expect(collect()).toBe(collect());
+  });
+
+  // `display` is not inherited: the fake getComputedStyle reports the child as
+  // display:block, so only the classifier's ancestor walk can hide it.
+  it("ignores stroke-dash motion under a display:none ancestor", () => {
+    document.body.innerHTML = `
+      <div id="root" data-composition-id="main" data-width="640" data-height="360">
+        <svg id="diagram"><g id="offstage"><path id="connector" d="M 10 10 L 300 10" /></g></svg>
+      </div>
+    `;
+    let dashOffset = "290px";
+    installFixture({
+      rects: { root: ROOT, diagram: ROOT, offstage: ROOT, connector: FLAT_CONNECTOR },
+      styles: {
+        offstage: { display: "none" },
+        connector: {
+          ...DASHED_STROKE,
+          get strokeDashoffset() {
+            return dashOffset;
+          },
+        } as StyleOverride,
+      },
+    });
+
+    const collect = installScript();
+    const before = collect();
+    dashOffset = "0px";
+
+    expect(collect()).toBe(before);
+  });
+
+  // The stroke is never painted, so the dash pattern on it is not motion — and
+  // the connector must not report as visible on the strength of its stroke.
+  it("ignores stroke-dash motion on a stroke-opacity:0 connector", () => {
+    document.body.innerHTML = `
+      <div id="root" data-composition-id="main" data-width="640" data-height="360">
+        <svg id="diagram"><path id="connector" d="M 10 10 L 300 10" /></svg>
+      </div>
+    `;
+    let dashOffset = "290px";
+    installFixture({
+      rects: { root: ROOT, diagram: ROOT, connector: FLAT_CONNECTOR },
+      styles: {
+        connector: {
+          ...DASHED_STROKE,
+          strokeOpacity: "0",
+          get strokeDashoffset() {
+            return dashOffset;
+          },
+        } as StyleOverride,
+      },
+    });
+
+    const collect = installScript();
+    const before = collect();
+    dashOffset = "0px";
+
+    expect(collect()).toBe(before);
+  });
+
+  // Blink reports an empty box for descendants of these containers; the
+  // fixture deliberately gives them a rendered path's box so this pins the
+  // container rule itself rather than the box gate.
+  it("ignores stroke-dash motion inside <defs> and <clipPath>", () => {
+    document.body.innerHTML = `
+      <div id="root" data-composition-id="main" data-width="640" data-height="360">
+        <svg id="diagram">
+          <defs><path id="template" d="M 10 10 L 300 10" /></defs>
+          <clipPath id="reveal"><path id="clip" d="M 10 20 L 300 20" /></clipPath>
+        </svg>
+      </div>
+    `;
+    let dashOffset = "290px";
+    const animated = {
+      ...DASHED_STROKE,
+      get strokeDashoffset() {
+        return dashOffset;
+      },
+    } as StyleOverride;
+    installFixture({
+      rects: {
+        root: ROOT,
+        diagram: ROOT,
+        defs: ROOT,
+        reveal: ROOT,
+        template: FLAT_CONNECTOR,
+        clip: { left: 10, top: 20, width: 290, height: 0 },
+      },
+      styles: { template: animated, clip: animated },
+    });
+
+    const collect = installScript();
+    const before = collect();
+    dashOffset = "0px";
+
+    expect(collect()).toBe(before);
+  });
+
   it("changes the sweep fingerprint when only clip-path moves", () => {
     document.body.innerHTML = `
       <div id="root" data-composition-id="main" data-width="640" data-height="360">