@shotstack/shotstack-canvas 1.5.6 → 1.5.8

package/dist/entry.node.cjs

@@ -100,7 +100,8 @@ var fontSchema = import_joi.default.object({
   size: import_joi.default.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
   weight: import_joi.default.alternatives().try(import_joi.default.string(), import_joi.default.number()).default("400"),
   color: import_joi.default.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
-  opacity: import_joi.default.number().min(0).max(1).default(1)
+  opacity: import_joi.default.number().min(0).max(1).default(1),
+  background: import_joi.default.string().pattern(HEX6).optional()
 }).unknown(false);
 var styleSchema = import_joi.default.object({
   letterSpacing: import_joi.default.number().default(0),
@@ -854,7 +855,7 @@ function normalizePadding(padding) {
 async function buildDrawOps(p) {
   const ops = [];
   const padding = normalizePadding(p.padding);
-  const borderWidth = p.background?.border?.width ?? 0;
+  const borderWidth = p.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
@@ -887,6 +888,7 @@ async function buildDrawOps(p) {
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
   const textOps = [];
+  const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
@@ -905,6 +907,20 @@ async function buildDrawOps(p) {
     let xCursor = lineX;
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
+    if (p.font.background) {
+      const highlightPadding = p.font.size * 0.15;
+      const verticalPadding = p.font.size * 0.12;
+      const highlightHeight = p.font.size * 0.92 + verticalPadding * 2;
+      const highlightY = baselineY - p.font.size * 0.78 - verticalPadding;
+      highlighterOps.push({
+        op: "Rectangle",
+        x: lineX - highlightPadding,
+        y: highlightY,
+        width: line.width + highlightPadding * 2,
+        height: highlightHeight,
+        fill: { kind: "solid", color: p.font.background, opacity: 1 }
+      });
+    }
     for (const glyph of line.glyphs) {
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
@@ -1018,6 +1034,7 @@ async function buildDrawOps(p) {
       });
     }
   }
+  ops.push(...highlighterOps);
   ops.push(...textOps);
   return ops;
 }
@@ -1145,7 +1162,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
     const wordSegments = getWordSegments(lines);
     const totalWords = wordSegments.length;
     const visibleWords = Math.floor(progress * totalWords);
-    if (visibleWords === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleWords === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     let totalVisibleGlyphs = 0;
     for (let i = 0; i < Math.min(visibleWords, wordSegments.length); i++) {
       totalVisibleGlyphs += wordSegments[i].glyphCount;
@@ -1159,7 +1178,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
   } else {
     const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
     const visibleGlyphs = Math.floor(progress * totalGlyphs);
-    if (visibleGlyphs === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleGlyphs === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     const visibleOpsRaw = sliceGlyphOps(ops, visibleGlyphs);
     const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
     if (progress < 1 && visibleGlyphs > 0) {
@@ -1175,8 +1196,10 @@ function applyAscendAnimation(ops, lines, progress, direction, fontSize, duratio
   const result = [];
   let glyphIndex = 0;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1235,8 +1258,10 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
   if (totalUnits === 0) return ops;
   const result = [];
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1510,7 +1535,7 @@ function sliceGlyphOps(ops, maxGlyphs) {
   let glyphCount = 0;
   let foundGlyphs = false;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
       continue;
     }
@@ -1538,9 +1563,11 @@ function sliceGlyphOps(ops, maxGlyphs) {
   return result;
 }
 function addTypewriterCursor(ops, glyphCount, fontSize, time) {
-  const blinkRate = 2;
+  if (glyphCount === 0) return ops;
+  const blinkRate = 1;
   const cursorVisible = Math.floor(time * blinkRate * 2) % 2 === 0;
-  if (!cursorVisible || glyphCount === 0) return ops;
+  const alwaysShowCursor = true;
+  if (!alwaysShowCursor && !cursorVisible) return ops;
   let last = null;
   let count = 0;
   for (const op of ops) {
@@ -1556,13 +1583,16 @@ function addTypewriterCursor(ops, glyphCount, fontSize, time) {
     const color = getTextColorFromOps(ops);
     const cursorX = last.x + fontSize * 0.5;
     const cursorY = last.y;
+    const cursorWidth = Math.max(3, fontSize / 15);
     const cursorOp = {
       op: "DecorationLine",
-      from: { x: cursorX, y: cursorY - fontSize * 0.7 },
-      to: { x: cursorX, y: cursorY + fontSize * 0.1 },
-      width: Math.max(2, fontSize / 25),
+      from: { x: cursorX, y: cursorY - fontSize * 0.75 },
+      // Slightly taller
+      to: { x: cursorX, y: cursorY + fontSize * 0.15 },
+      width: cursorWidth,
       color,
-      opacity: 1
+      opacity: alwaysShowCursor ? 1 : cursorVisible ? 1 : 0
+      // Always visible or blink
     };
     return [...ops, cursorOp];
   }
@@ -2288,16 +2318,29 @@ var VideoGenerator = class {
       });
       try {
         const painter = await createNodePainter({ width, height, pixelRatio });
-        for (let frame = 0; frame < totalFrames; frame++) {
-          const t = frame / (totalFrames - 1) * duration;
-          const ops = await frameGenerator(t);
-          await painter.render(ops);
-          const png = await painter.toPNG();
-          const ok = ffmpeg.stdin.write(png);
-          if (!ok) await new Promise((r) => ffmpeg.stdin.once("drain", r));
-          if (frame % Math.max(1, Math.floor(fps / 2)) === 0) {
-            const pct = Math.round((frame + 1) / totalFrames * 100);
-            console.log(`\u{1F39E}\uFE0F Rendering frames: ${pct}%`);
+        const CHUNK_SIZE = 30;
+        for (let chunkStart = 0; chunkStart < totalFrames; chunkStart += CHUNK_SIZE) {
+          const chunkEnd = Math.min(chunkStart + CHUNK_SIZE, totalFrames);
+          const chunkSize = chunkEnd - chunkStart;
+          const chunkOps = [];
+          for (let frame = chunkStart; frame < chunkEnd; frame++) {
+            const t = frame / (totalFrames - 1) * duration;
+            chunkOps.push(await frameGenerator(t));
+          }
+          for (let i = 0; i < chunkSize; i++) {
+            const frame = chunkStart + i;
+            await painter.render(chunkOps[i]);
+            const png = await painter.toPNG();
+            const ok = ffmpeg.stdin.write(png);
+            if (!ok) await new Promise((r) => ffmpeg.stdin.once("drain", r));
+            if (frame % Math.max(1, Math.floor(fps / 2)) === 0) {
+              const pct = Math.round((frame + 1) / totalFrames * 100);
+              console.log(`\u{1F39E}\uFE0F Rendering frames: ${pct}%`);
+            }
+          }
+          chunkOps.length = 0;
+          if (global.gc && chunkEnd < totalFrames) {
+            global.gc();
           }
         }
         ffmpeg.stdin.end();
@@ -2452,7 +2495,8 @@ async function createTextEngine(opts = {}) {
               size: main.size,
               weight: `${main.weight}`,
               color: main.color,
-              opacity: main.opacity
+              opacity: main.opacity,
+              background: main.background
             },
             style: {
               lineHeight: asset.style?.lineHeight ?? 1.2,

package/dist/entry.node.d.cts

@@ -33,6 +33,7 @@ type RichTextValidated = Required<{
         weight: string | number;
         color: string;
         opacity: number;
+        background?: string;
     };
     style?: {
         letterSpacing: number;

package/dist/entry.node.d.ts

@@ -33,6 +33,7 @@ type RichTextValidated = Required<{
         weight: string | number;
         color: string;
         opacity: number;
+        background?: string;
     };
     style?: {
         letterSpacing: number;

package/dist/entry.node.js

@@ -62,7 +62,8 @@ var fontSchema = Joi.object({
   size: Joi.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
   weight: Joi.alternatives().try(Joi.string(), Joi.number()).default("400"),
   color: Joi.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
-  opacity: Joi.number().min(0).max(1).default(1)
+  opacity: Joi.number().min(0).max(1).default(1),
+  background: Joi.string().pattern(HEX6).optional()
 }).unknown(false);
 var styleSchema = Joi.object({
   letterSpacing: Joi.number().default(0),
@@ -815,7 +816,7 @@ function normalizePadding(padding) {
 async function buildDrawOps(p) {
   const ops = [];
   const padding = normalizePadding(p.padding);
-  const borderWidth = p.background?.border?.width ?? 0;
+  const borderWidth = p.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
@@ -848,6 +849,7 @@ async function buildDrawOps(p) {
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
   const textOps = [];
+  const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
@@ -866,6 +868,20 @@ async function buildDrawOps(p) {
     let xCursor = lineX;
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
+    if (p.font.background) {
+      const highlightPadding = p.font.size * 0.15;
+      const verticalPadding = p.font.size * 0.12;
+      const highlightHeight = p.font.size * 0.92 + verticalPadding * 2;
+      const highlightY = baselineY - p.font.size * 0.78 - verticalPadding;
+      highlighterOps.push({
+        op: "Rectangle",
+        x: lineX - highlightPadding,
+        y: highlightY,
+        width: line.width + highlightPadding * 2,
+        height: highlightHeight,
+        fill: { kind: "solid", color: p.font.background, opacity: 1 }
+      });
+    }
     for (const glyph of line.glyphs) {
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
@@ -979,6 +995,7 @@ async function buildDrawOps(p) {
       });
     }
   }
+  ops.push(...highlighterOps);
   ops.push(...textOps);
   return ops;
 }
@@ -1106,7 +1123,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
     const wordSegments = getWordSegments(lines);
     const totalWords = wordSegments.length;
     const visibleWords = Math.floor(progress * totalWords);
-    if (visibleWords === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleWords === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     let totalVisibleGlyphs = 0;
     for (let i = 0; i < Math.min(visibleWords, wordSegments.length); i++) {
       totalVisibleGlyphs += wordSegments[i].glyphCount;
@@ -1120,7 +1139,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
   } else {
     const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
     const visibleGlyphs = Math.floor(progress * totalGlyphs);
-    if (visibleGlyphs === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleGlyphs === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     const visibleOpsRaw = sliceGlyphOps(ops, visibleGlyphs);
     const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
     if (progress < 1 && visibleGlyphs > 0) {
@@ -1136,8 +1157,10 @@ function applyAscendAnimation(ops, lines, progress, direction, fontSize, duratio
   const result = [];
   let glyphIndex = 0;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1196,8 +1219,10 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
   if (totalUnits === 0) return ops;
   const result = [];
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1471,7 +1496,7 @@ function sliceGlyphOps(ops, maxGlyphs) {
   let glyphCount = 0;
   let foundGlyphs = false;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
       continue;
     }
@@ -1499,9 +1524,11 @@ function sliceGlyphOps(ops, maxGlyphs) {
   return result;
 }
 function addTypewriterCursor(ops, glyphCount, fontSize, time) {
-  const blinkRate = 2;
+  if (glyphCount === 0) return ops;
+  const blinkRate = 1;
   const cursorVisible = Math.floor(time * blinkRate * 2) % 2 === 0;
-  if (!cursorVisible || glyphCount === 0) return ops;
+  const alwaysShowCursor = true;
+  if (!alwaysShowCursor && !cursorVisible) return ops;
   let last = null;
   let count = 0;
   for (const op of ops) {
@@ -1517,13 +1544,16 @@ function addTypewriterCursor(ops, glyphCount, fontSize, time) {
     const color = getTextColorFromOps(ops);
     const cursorX = last.x + fontSize * 0.5;
     const cursorY = last.y;
+    const cursorWidth = Math.max(3, fontSize / 15);
     const cursorOp = {
       op: "DecorationLine",
-      from: { x: cursorX, y: cursorY - fontSize * 0.7 },
-      to: { x: cursorX, y: cursorY + fontSize * 0.1 },
-      width: Math.max(2, fontSize / 25),
+      from: { x: cursorX, y: cursorY - fontSize * 0.75 },
+      // Slightly taller
+      to: { x: cursorX, y: cursorY + fontSize * 0.15 },
+      width: cursorWidth,
       color,
-      opacity: 1
+      opacity: alwaysShowCursor ? 1 : cursorVisible ? 1 : 0
+      // Always visible or blink
     };
     return [...ops, cursorOp];
   }
@@ -2249,16 +2279,29 @@ var VideoGenerator = class {
       });
       try {
         const painter = await createNodePainter({ width, height, pixelRatio });
-        for (let frame = 0; frame < totalFrames; frame++) {
-          const t = frame / (totalFrames - 1) * duration;
-          const ops = await frameGenerator(t);
-          await painter.render(ops);
-          const png = await painter.toPNG();
-          const ok = ffmpeg.stdin.write(png);
-          if (!ok) await new Promise((r) => ffmpeg.stdin.once("drain", r));
-          if (frame % Math.max(1, Math.floor(fps / 2)) === 0) {
-            const pct = Math.round((frame + 1) / totalFrames * 100);
-            console.log(`\u{1F39E}\uFE0F Rendering frames: ${pct}%`);
+        const CHUNK_SIZE = 30;
+        for (let chunkStart = 0; chunkStart < totalFrames; chunkStart += CHUNK_SIZE) {
+          const chunkEnd = Math.min(chunkStart + CHUNK_SIZE, totalFrames);
+          const chunkSize = chunkEnd - chunkStart;
+          const chunkOps = [];
+          for (let frame = chunkStart; frame < chunkEnd; frame++) {
+            const t = frame / (totalFrames - 1) * duration;
+            chunkOps.push(await frameGenerator(t));
+          }
+          for (let i = 0; i < chunkSize; i++) {
+            const frame = chunkStart + i;
+            await painter.render(chunkOps[i]);
+            const png = await painter.toPNG();
+            const ok = ffmpeg.stdin.write(png);
+            if (!ok) await new Promise((r) => ffmpeg.stdin.once("drain", r));
+            if (frame % Math.max(1, Math.floor(fps / 2)) === 0) {
+              const pct = Math.round((frame + 1) / totalFrames * 100);
+              console.log(`\u{1F39E}\uFE0F Rendering frames: ${pct}%`);
+            }
+          }
+          chunkOps.length = 0;
+          if (global.gc && chunkEnd < totalFrames) {
+            global.gc();
           }
         }
         ffmpeg.stdin.end();
@@ -2413,7 +2456,8 @@ async function createTextEngine(opts = {}) {
               size: main.size,
               weight: `${main.weight}`,
               color: main.color,
-              opacity: main.opacity
+              opacity: main.opacity,
+              background: main.background
             },
             style: {
               lineHeight: asset.style?.lineHeight ?? 1.2,

package/dist/entry.web.d.ts

@@ -33,6 +33,7 @@ type RichTextValidated = Required<{
         weight: string | number;
         color: string;
         opacity: number;
+        background?: string;
     };
     style?: {
         letterSpacing: number;

package/dist/entry.web.js

@@ -66,7 +66,8 @@ var fontSchema = Joi.object({
   size: Joi.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
   weight: Joi.alternatives().try(Joi.string(), Joi.number()).default("400"),
   color: Joi.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
-  opacity: Joi.number().min(0).max(1).default(1)
+  opacity: Joi.number().min(0).max(1).default(1),
+  background: Joi.string().pattern(HEX6).optional()
 }).unknown(false);
 var styleSchema = Joi.object({
   letterSpacing: Joi.number().default(0),
@@ -820,7 +821,7 @@ function normalizePadding(padding) {
 async function buildDrawOps(p) {
   const ops = [];
   const padding = normalizePadding(p.padding);
-  const borderWidth = p.background?.border?.width ?? 0;
+  const borderWidth = p.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
@@ -853,6 +854,7 @@ async function buildDrawOps(p) {
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
   const textOps = [];
+  const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
@@ -871,6 +873,20 @@ async function buildDrawOps(p) {
     let xCursor = lineX;
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
+    if (p.font.background) {
+      const highlightPadding = p.font.size * 0.15;
+      const verticalPadding = p.font.size * 0.12;
+      const highlightHeight = p.font.size * 0.92 + verticalPadding * 2;
+      const highlightY = baselineY - p.font.size * 0.78 - verticalPadding;
+      highlighterOps.push({
+        op: "Rectangle",
+        x: lineX - highlightPadding,
+        y: highlightY,
+        width: line.width + highlightPadding * 2,
+        height: highlightHeight,
+        fill: { kind: "solid", color: p.font.background, opacity: 1 }
+      });
+    }
     for (const glyph of line.glyphs) {
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
@@ -984,6 +1000,7 @@ async function buildDrawOps(p) {
       });
     }
   }
+  ops.push(...highlighterOps);
   ops.push(...textOps);
   return ops;
 }
@@ -1111,7 +1128,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
     const wordSegments = getWordSegments(lines);
     const totalWords = wordSegments.length;
     const visibleWords = Math.floor(progress * totalWords);
-    if (visibleWords === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleWords === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     let totalVisibleGlyphs = 0;
     for (let i = 0; i < Math.min(visibleWords, wordSegments.length); i++) {
       totalVisibleGlyphs += wordSegments[i].glyphCount;
@@ -1125,7 +1144,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
   } else {
     const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
     const visibleGlyphs = Math.floor(progress * totalGlyphs);
-    if (visibleGlyphs === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleGlyphs === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     const visibleOpsRaw = sliceGlyphOps(ops, visibleGlyphs);
     const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
     if (progress < 1 && visibleGlyphs > 0) {
@@ -1141,8 +1162,10 @@ function applyAscendAnimation(ops, lines, progress, direction, fontSize, duratio
   const result = [];
   let glyphIndex = 0;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1201,8 +1224,10 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
   if (totalUnits === 0) return ops;
   const result = [];
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1476,7 +1501,7 @@ function sliceGlyphOps(ops, maxGlyphs) {
   let glyphCount = 0;
   let foundGlyphs = false;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
       continue;
     }
@@ -1504,9 +1529,11 @@ function sliceGlyphOps(ops, maxGlyphs) {
   return result;
 }
 function addTypewriterCursor(ops, glyphCount, fontSize, time) {
-  const blinkRate = 2;
+  if (glyphCount === 0) return ops;
+  const blinkRate = 1;
   const cursorVisible = Math.floor(time * blinkRate * 2) % 2 === 0;
-  if (!cursorVisible || glyphCount === 0) return ops;
+  const alwaysShowCursor = true;
+  if (!alwaysShowCursor && !cursorVisible) return ops;
   let last = null;
   let count = 0;
   for (const op of ops) {
@@ -1522,13 +1549,16 @@ function addTypewriterCursor(ops, glyphCount, fontSize, time) {
     const color = getTextColorFromOps(ops);
     const cursorX = last.x + fontSize * 0.5;
     const cursorY = last.y;
+    const cursorWidth = Math.max(3, fontSize / 15);
     const cursorOp = {
       op: "DecorationLine",
-      from: { x: cursorX, y: cursorY - fontSize * 0.7 },
-      to: { x: cursorX, y: cursorY + fontSize * 0.1 },
-      width: Math.max(2, fontSize / 25),
+      from: { x: cursorX, y: cursorY - fontSize * 0.75 },
+      // Slightly taller
+      to: { x: cursorX, y: cursorY + fontSize * 0.15 },
+      width: cursorWidth,
       color,
-      opacity: 1
+      opacity: alwaysShowCursor ? 1 : cursorVisible ? 1 : 0
+      // Always visible or blink
     };
     return [...ops, cursorOp];
   }
@@ -2137,7 +2167,8 @@ async function createTextEngine(opts = {}) {
               size: main.size,
               weight: `${main.weight}`,
               color: main.color,
-              opacity: main.opacity
+              opacity: main.opacity,
+              background: main.background
             },
             style: {
               lineHeight: asset.style?.lineHeight ?? 1.2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",