domotion-svg 0.13.0 → 0.13.2

package/dist/animation/animator.js

@@ -514,9 +514,15 @@ function renderTypingOverlay(overlay, frameIdx, frameStart, frameEnd, totalDurat
         cumChars += line.length;
         parts.push(`  <defs><clipPath id="${clipId}"><rect class="${id}-rev${li}" x="${overlay.x}" y="${lineY - fontSize}" width="0" height="${textHeight}" /></clipPath></defs>`);
         parts.push(`  <text class="${id}-text" x="${overlay.x}" y="${lineY}" fill="${color}" font-size="${fontSize}" font-family="'SF Mono', Menlo, Monaco, monospace" clip-path="url(#${clipId})">${escapeHtml(line)}</text>`);
+        // DM-1204: the reveal clip MUST sweep linearly so its right edge tracks the
+        // caret (whose position track is `linear`). Without an explicit timing
+        // function the width animation defaults to CSS `ease`, which races ~80%
+        // through the sweep at the time-midpoint while the linear caret is only at
+        // 50% — that desync read as the caret lagging ~10–20 chars behind the
+        // revealed text mid-type, even though the endpoints (parked state) matched.
         cssRules.push(`
     @keyframes ${id}-rev${li} { 0%, ${lineStartPct} { width: 0; } ${lineEndPct} { width: ${lineWidth}px; } ${holdEndPct} { width: ${lineWidth}px; } ${disappearPct}, 100% { width: 0; } }
-    .${id}-rev${li} { animation: ${id}-rev${li} ${totalSec.toFixed(2)}s infinite; }`);
+    .${id}-rev${li} { animation: ${id}-rev${li} ${totalSec.toFixed(2)}s linear infinite; }`);
     });
     // Whole-overlay visibility — shared by every line's <text>.
     const typeStartPct = pct(typeStartMs, totalDuration);
@@ -538,10 +544,26 @@ function renderTypingOverlay(overlay, frameIdx, frameStart, frameEnd, totalDurat
         const endY = last.li * lineHeight;
         // Position track: hold at line 0 start until typing begins, then sweep each
         // line, then hold at the text end through the blink + disappear.
+        //
+        // DM-1204 (multi-line): a line ends and the next begins at the same instant
+        // (type timing is contiguous — line N+1 starts the ms line N finishes). The
+        // end-of-line stop (x = line width, row N) and the next line's left-margin
+        // stop (x = 0, row N+1) would therefore round to the SAME keyframe percent;
+        // CSS keeps the later declaration, dropping the end-of-line x so the caret
+        // stays pinned at x=0 and merely slides down each row. We keep percentages
+        // strictly increasing (nudging the carriage-return stop a hair past the
+        // line-end stop) so both survive — the jump back to the margin then happens
+        // over ~0.01% of the timeline, i.e. visually instant.
         const posStops = [`0%, ${typeStartPct} { transform: translate(0px, 0px); }`];
+        let lastPctNum = pctNum(typeStartMs, totalDuration);
+        const pushPosStop = (pn, x, y) => {
+            const p = Math.max(pn, lastPctNum + 0.01);
+            posStops.push(`${p.toFixed(2)}% { transform: translate(${x}px, ${y}px); }`);
+            lastPctNum = p;
+        };
         for (const lt of lineTimings) {
-            posStops.push(`${pct(lt.startMs, totalDuration)} { transform: translate(0px, ${lt.li * lineHeight}px); }`);
-            posStops.push(`${pct(lt.endMs, totalDuration)} { transform: translate(${lt.len * charWidth}px, ${lt.li * lineHeight}px); }`);
+            pushPosStop(pctNum(lt.startMs, totalDuration), 0, lt.li * lineHeight);
+            pushPosStop(pctNum(lt.endMs, totalDuration), lt.len * charWidth, lt.li * lineHeight);
         }
         posStops.push(`${holdEndPct}, 100% { transform: translate(${endX}px, ${endY}px); }`);
         // Blink: invisible until typing starts, solid through typing, then toggle
@@ -612,6 +634,9 @@ function renderBlinkOverlay(overlay, frameIdx, frameStart, frameEnd, totalDurati
 function pct(ms, total) {
     return `${((ms / total) * 100).toFixed(2)}%`;
 }
+function pctNum(ms, total) {
+    return (ms / total) * 100;
+}
 /**
  * DM-599: build a step-end keyframes block that toggles `display` between
  * `none` and `inline` around a visible window. Used in parallel with the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domotion-svg",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "description": "DOM-to-animated-SVG renderer. Captures HTML/CSS via Playwright Chromium and converts it to self-contained SVG with CSS animations — pixel-faithful demos that scale crisply and load lazily.",
   "license": "MIT",
   "author": "Brian Westphal",