@clypra/engine 1.1.1 → 1.2.0

package/dist/index.cjs

@@ -21,6 +21,7 @@ var index_exports = {};
 __export(index_exports, {
   COMPOSITION_PRESETS: () => COMPOSITION_PRESETS,
   CUSTOM_ENGINE_IDS: () => CUSTOM_ENGINE_IDS,
+  CanvasDevice: () => CanvasDevice,
   DEFAULT_CANVAS_HEIGHT: () => DEFAULT_CANVAS_HEIGHT,
   DEFAULT_CANVAS_WIDTH: () => DEFAULT_CANVAS_WIDTH,
   DEFAULT_DURATION: () => DEFAULT_DURATION,
@@ -32,6 +33,7 @@ __export(index_exports, {
   ENTRANCE_PRESETS: () => ENTRANCE_PRESETS,
   EXIT_PRESETS: () => EXIT_PRESETS,
   FONT_WEIGHT_OPTIONS: () => FONT_WEIGHT_OPTIONS,
+  FontLoader: () => FontLoader,
   InkBrushEngine: () => InkBrushEngine,
   LEGACY_RENDERER_MAP: () => LEGACY_RENDERER_MAP,
   LOOP_PRESETS: () => LOOP_PRESETS,
@@ -43,6 +45,7 @@ __export(index_exports, {
   TextEffectRenderer: () => TextEffectRenderer,
   WEBM_EXPORT_MAX_FRAMES: () => WEBM_EXPORT_MAX_FRAMES,
   WebGLCompositor: () => WebGLCompositor,
+  _buildConfig: () => _buildConfig,
   _resetPlatformCache: () => _resetPlatformCache,
   addImageLayer: () => addImageLayer,
   addKeyframeAtTime: () => addKeyframeAtTime,
@@ -100,6 +103,7 @@ __export(index_exports, {
   encodeGif: () => encodeGif,
   ensureDefaultTimeline: () => ensureDefaultTimeline,
   ensureFontInLottie: () => ensureFontInLottie,
+  ensureFontsLoaded: () => ensureFontsLoaded,
   evaluateConfig: () => evaluateConfig,
   evaluateScene: () => evaluateScene,
   findTrackIndex: () => findTrackIndex,
@@ -107,6 +111,7 @@ __export(index_exports, {
   getAnimatableParamDef: () => getAnimatableParamDef,
   getAnimatableParamsForLayer: () => getAnimatableParamsForLayer,
   getDefaultText: () => getDefaultText,
+  getFontLoader: () => getFontLoader,
   getLayerById: () => getLayerById,
   getPresetScene: () => getPresetScene,
   getSceneTime: () => getSceneTime,
@@ -125,6 +130,7 @@ __export(index_exports, {
   injectText: () => injectText,
   injectTextStyle: () => injectTextStyle,
   isWebMExportSupported: () => isWebMExportSupported,
+  layerToTextEffectConfig: () => layerToTextEffectConfig,
   loadLottieFonts: () => loadLottieFonts,
   lottieColorToHex: () => lottieColorToHex,
   lottieJToAlign: () => lottieJToAlign,
@@ -147,10 +153,12 @@ __export(index_exports, {
   renderPngSequence: () => renderPngSequence,
   renderSceneWebM: () => renderSceneWebM,
   renderTextEffectCore: () => renderTextEffectCore,
+  resetFontLoader: () => resetFontLoader,
   resetSceneTime: () => resetSceneTime,
   resizeCharFillColors: () => resizeCharFillColors,
   resolveAnimatedScalar: () => resolveAnimatedScalar,
   resolveCustomEngineId: () => resolveCustomEngineId,
+  resolveFontFamilyName: () => resolveFontFamilyName,
   restoreLetterSpacing: () => restoreLetterSpacing,
   scanLottieFonts: () => scanLottieFonts,
   scanTextLayers: () => scanTextLayers,
@@ -568,6 +576,46 @@ function _resetPlatformCache() {
   _offscreenCanvas = null;
   _webgl2 = null;
 }
+var CanvasDevice = class {
+  static canvases = [];
+  static maxPoolSize = 10;
+  /**
+   * Acquire a Canvas context from the pool or create a new one.
+   * If a canvas is pulled from the pool, it is resized to the target dimensions.
+   */
+  static acquire(width, height) {
+    let canvas;
+    if (this.canvases.length > 0) {
+      canvas = this.canvases.pop();
+      if (canvas.width !== width || canvas.height !== height) {
+        canvas.width = width;
+        canvas.height = height;
+      }
+    } else {
+      canvas = createCanvas(width, height);
+    }
+    return canvas;
+  }
+  /**
+   * Release a canvas back to the pool, or free its resources immediately if pool is full.
+   */
+  static release(canvas) {
+    if (this.canvases.length < this.maxPoolSize) {
+      this.canvases.push(canvas);
+    } else {
+      releaseCanvas(canvas);
+    }
+  }
+  /**
+   * Disposes all pooled canvases to release GPU/memory backing stores.
+   */
+  static clearPool() {
+    while (this.canvases.length > 0) {
+      const c = this.canvases.pop();
+      releaseCanvas(c);
+    }
+  }
+};
 
 // src/engine/procedural/utils.ts
 function getCanvas2DContext(canvas) {
@@ -959,6 +1007,17 @@ function restoreLetterSpacing(ctx, saved) {
 function getCanvas2DContext2(canvas) {
   return canvas.getContext("2d");
 }
+function ctxSupportsFilter(ctx) {
+  try {
+    const prev = ctx.filter;
+    ctx.filter = "blur(4px)";
+    const ok = typeof ctx.filter === "string" && ctx.filter.includes("blur");
+    ctx.filter = prev;
+    return ok;
+  } catch {
+    return false;
+  }
+}
 function renderTextEffectCore(ctx, cfg) {
   if (cfg.customRenderer === "InkBrushEngine") {
     const engine = new InkBrushEngine(cfg);
@@ -1268,19 +1327,31 @@ function renderTextEffectCore(ctx, cfg) {
       const vpy = cHeight / 2 + (bevelVanishingPointY !== void 0 ? bevelVanishingPointY : 80) / 100 * (cHeight / 2);
       const fl = Math.max(100, bevelFocalLength !== void 0 ? bevelFocalLength : 400);
       if (bevelBlur && bevelBlur > 0) {
-        ctx.save();
-        ctx.filter = `blur(${bevelBlur}px)`;
         const blurColor = bevelBlurColor || bevelShadow || "#000000";
-        for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
-          const scale = fl / (fl + i);
+        if (ctxSupportsFilter(ctx)) {
           ctx.save();
-          ctx.translate(vpx, vpy);
-          ctx.scale(scale, scale);
-          ctx.translate(-vpx, -vpy);
-          renderLines("fill", blurColor);
+          ctx.filter = `blur(${bevelBlur}px)`;
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const scale = fl / (fl + i);
+            ctx.save();
+            ctx.translate(vpx, vpy);
+            ctx.scale(scale, scale);
+            ctx.translate(-vpx, -vpy);
+            renderLines("fill", blurColor);
+            ctx.restore();
+          }
           ctx.restore();
+        } else {
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const scale = fl / (fl + i);
+            ctx.save();
+            ctx.translate(vpx, vpy);
+            ctx.scale(scale, scale);
+            ctx.translate(-vpx, -vpy);
+            renderWithShadowTrick("fill", blurColor, bevelBlur, 0, 0, 100);
+            ctx.restore();
+          }
         }
-        ctx.restore();
       }
       ctx.save();
       for (let i = bevelDepth; i > 0; i--) {
@@ -1327,14 +1398,21 @@ function renderTextEffectCore(ctx, cfg) {
         return { dx: i, dy: i };
       };
       if (bevelBlur && bevelBlur > 0) {
-        ctx.save();
-        ctx.filter = `blur(${bevelBlur}px)`;
         const blurColor = bevelBlurColor || bevelShadow || "#000000";
-        for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
-          const { dx, dy } = getDirOffset(i);
-          renderLines("fill", blurColor, dx, dy);
+        if (ctxSupportsFilter(ctx)) {
+          ctx.save();
+          ctx.filter = `blur(${bevelBlur}px)`;
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const { dx, dy } = getDirOffset(i);
+            renderLines("fill", blurColor, dx, dy);
+          }
+          ctx.restore();
+        } else {
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const { dx, dy } = getDirOffset(i);
+            renderWithShadowTrick("fill", blurColor, bevelBlur, dx, dy, 100);
+          }
         }
-        ctx.restore();
       }
       ctx.save();
       for (let i = bevelDepth; i > 0; i--) {
@@ -1388,24 +1466,51 @@ function renderTextEffectCore(ctx, cfg) {
       customStrokeStyle = grad;
     }
     const drawStrokeLayer = (color, width, blurAmount, opacity, position) => {
-      ctx.save();
-      ctx.globalAlpha = opacity / 100;
-      ctx.strokeStyle = color;
-      if (blurAmount > 0) {
+      if (blurAmount > 0 && ctxSupportsFilter(ctx)) {
+        ctx.save();
+        ctx.globalAlpha = opacity / 100;
+        ctx.strokeStyle = color;
         ctx.filter = `blur(${blurAmount}px)`;
+        if (position === "outside") {
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        } else if (position === "center") {
+          ctx.lineWidth = width;
+          renderLines("stroke");
+        } else if (position === "inside") {
+          ctx.globalCompositeOperation = "source-atop";
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        }
+        ctx.restore();
+      } else if (blurAmount > 0) {
+        const colorStr = typeof color === "string" ? color : strokeColor;
+        const spread = position === "center" ? width / 2 : width;
+        if (position === "inside") {
+          ctx.save();
+          ctx.globalCompositeOperation = "source-atop";
+          renderWithShadowTrick("stroke", colorStr, blurAmount, 0, 0, opacity, void 0, spread);
+          ctx.restore();
+        } else {
+          renderWithShadowTrick("stroke", colorStr, blurAmount, 0, 0, opacity, void 0, spread);
+        }
+      } else {
+        ctx.save();
+        ctx.globalAlpha = opacity / 100;
+        ctx.strokeStyle = color;
+        if (position === "outside") {
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        } else if (position === "center") {
+          ctx.lineWidth = width;
+          renderLines("stroke");
+        } else if (position === "inside") {
+          ctx.globalCompositeOperation = "source-atop";
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        }
+        ctx.restore();
       }
-      if (position === "outside") {
-        ctx.lineWidth = width * 2;
-        renderLines("stroke");
-      } else if (position === "center") {
-        ctx.lineWidth = width;
-        renderLines("stroke");
-      } else if (position === "inside") {
-        ctx.globalCompositeOperation = "source-atop";
-        ctx.lineWidth = width * 2;
-        renderLines("stroke");
-      }
-      ctx.restore();
     };
     if (sType === "double") {
       const outerWidth = strokeWidth + sWidthSecondary;
@@ -2530,6 +2635,146 @@ function checkFontVariant(variantName) {
   if (typeof document === "undefined" || !document.fonts) return false;
   return document.fonts.check(`16px "${variantName}"`);
 }
+var FontLoader = class {
+  state = {
+    loading: /* @__PURE__ */ new Set(),
+    loaded: /* @__PURE__ */ new Set(),
+    failed: /* @__PURE__ */ new Map(),
+    promises: /* @__PURE__ */ new Map()
+  };
+  async ensureFont(descriptor) {
+    const key = this.getFontKey(descriptor);
+    if (this.state.loaded.has(key)) {
+      return {
+        font: descriptor,
+        loaded: true,
+        loadTimeMs: 0
+      };
+    }
+    if (this.state.failed.has(key)) {
+      return {
+        font: descriptor,
+        loaded: false,
+        error: this.state.failed.get(key),
+        loadTimeMs: 0
+      };
+    }
+    if (this.state.promises.has(key)) {
+      return this.state.promises.get(key);
+    }
+    const promise = this.loadFont(descriptor);
+    this.state.promises.set(key, promise);
+    return promise;
+  }
+  async ensureFonts(descriptors) {
+    return Promise.all(descriptors.map((desc) => this.ensureFont(desc)));
+  }
+  async waitForFontsReady() {
+    if (typeof document === "undefined" || !document.fonts) {
+      return;
+    }
+    await document.fonts.ready;
+  }
+  isLoaded(descriptor) {
+    const key = this.getFontKey(descriptor);
+    return this.state.loaded.has(key);
+  }
+  getStats() {
+    return {
+      loaded: this.state.loaded.size,
+      loading: this.state.loading.size,
+      failed: this.state.failed.size
+    };
+  }
+  clear() {
+    this.state.loading.clear();
+    this.state.loaded.clear();
+    this.state.failed.clear();
+    this.state.promises.clear();
+  }
+  async loadFont(descriptor) {
+    const key = this.getFontKey(descriptor);
+    const startTime = performance.now();
+    this.state.loading.add(key);
+    try {
+      if (typeof document === "undefined" || !document.fonts) {
+        throw new Error("Font API not available");
+      }
+      const weight = this.normalizeFontWeight(descriptor.weight);
+      const style = descriptor.style || "normal";
+      const fontFace = `${style} ${weight} 16px "${descriptor.family}"`;
+      if (document.fonts.check(fontFace)) {
+        this.state.loaded.add(key);
+        this.state.loading.delete(key);
+        this.state.promises.delete(key);
+        return {
+          font: descriptor,
+          loaded: true,
+          loadTimeMs: performance.now() - startTime
+        };
+      }
+      await document.fonts.load(fontFace);
+      if (!document.fonts.check(fontFace)) {
+        throw new Error(`Font "${descriptor.family}" failed to load`);
+      }
+      this.state.loaded.add(key);
+      this.state.loading.delete(key);
+      this.state.promises.delete(key);
+      return {
+        font: descriptor,
+        loaded: true,
+        loadTimeMs: performance.now() - startTime
+      };
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      this.state.failed.set(key, errorMessage);
+      this.state.loading.delete(key);
+      this.state.promises.delete(key);
+      return {
+        font: descriptor,
+        loaded: false,
+        error: errorMessage,
+        loadTimeMs: performance.now() - startTime
+      };
+    }
+  }
+  getFontKey(descriptor) {
+    const weight = this.normalizeFontWeight(descriptor.weight);
+    const style = descriptor.style || "normal";
+    return `${descriptor.family}|${weight}|${style}`;
+  }
+  normalizeFontWeight(weight) {
+    if (typeof weight === "number") {
+      return weight;
+    }
+    if (!weight) return 400;
+    const asNum = parseInt(weight, 10);
+    if (!isNaN(asNum) && asNum >= 100 && asNum <= 900) {
+      return asNum;
+    }
+    const weightMap = {
+      normal: 400,
+      bold: 700,
+      lighter: 300,
+      bolder: 700
+    };
+    return weightMap[weight] ?? 400;
+  }
+};
+var globalFontLoader = null;
+function getFontLoader() {
+  if (!globalFontLoader) {
+    globalFontLoader = new FontLoader();
+  }
+  return globalFontLoader;
+}
+function resetFontLoader() {
+  globalFontLoader = null;
+}
+async function ensureFontsLoaded(descriptors) {
+  const loader = getFontLoader();
+  return loader.ensureFonts(descriptors);
+}
 
 // src/engine/timelineDefaults.ts
 function ensureDefaultTimeline(doc) {
@@ -2901,6 +3146,212 @@ function mergeSceneIntoConfig(doc, base) {
   const out = sceneToConfig({ ...doc, legacyConfig: base });
   return out;
 }
+function resolveFontFamilyName(fontFamily) {
+  const f = fontFamily?.toLowerCase() || "";
+  if (f.includes("inter")) return "Inter Variable";
+  if (f.includes("montserrat")) return "Montserrat Variable";
+  if (f.includes("geist")) return "Geist Variable";
+  if (f.includes("space grotesk") || f.includes("grotesk")) return "Space Grotesk Variable";
+  if (f.includes("outfit")) return "Outfit Variable";
+  if (f.includes("roboto variable")) return "Roboto Variable";
+  if (f.includes("roboto condensed")) return "Roboto Condensed";
+  if (f === "roboto") return "Roboto Variable";
+  if (f.includes("open sans")) return "Open Sans Variable";
+  if (f.includes("raleway")) return "Raleway Variable";
+  if (f.includes("oswald")) return "Oswald Variable";
+  if (f.includes("playfair display")) return "Playfair Display Variable";
+  if (f.includes("nunito")) return "Nunito Variable";
+  if (f.includes("dancing script")) return "Dancing Script Variable";
+  if (f === "lato") return "Lato";
+  if (f === "anton") return "Anton";
+  if (f === "bebas neue") return "Bebas Neue";
+  if (f === "poppins") return "Poppins";
+  if (f === "permanent marker") return "Permanent Marker";
+  if (f === "bangers") return "Bangers";
+  if (f === "press start 2p") return "Press Start 2P";
+  if (f === "pacifico") return "Pacifico";
+  return fontFamily;
+}
+function _buildConfig(effect, text, fontSize, canvasWidth, canvasHeight, time, clipStartTime, clipDuration) {
+  const fill = effect.fills?.[0];
+  const stroke = effect.strokes?.[0];
+  const shadow = effect.shadows?.[0];
+  const bevel = effect.bevel;
+  const panel = effect.panel;
+  const ratio = fontSize / 100;
+  const config = {
+    // Canvas / text
+    width: canvasWidth,
+    height: canvasHeight,
+    canvasWidth,
+    canvasHeight,
+    text,
+    time: time ?? 0,
+    clipStartTime: clipStartTime ?? 0,
+    clipDuration: clipDuration ?? 5,
+    // Font
+    fontFamily: resolveFontFamilyName(effect.font.family),
+    fontWeight: effect.font.weight,
+    fontStyle: effect.font.style,
+    fontSize,
+    letterSpacing: effect.font.letterSpacing,
+    lineHeight: effect.font.lineHeight
+  };
+  if (effect.animation) {
+    config.animation = effect.animation;
+  }
+  if (fill) {
+    if (fill.type !== void 0) config.fillType = fill.type;
+    if (fill.color !== void 0) config.fillColor = fill.color;
+    if (fill.gradient?.angle !== void 0) config.fillGradientAngle = fill.gradient.angle;
+    if (fill.gradient?.stops !== void 0) config.fillGradientStops = fill.gradient.stops;
+    if (fill.patternType !== void 0) config.patternType = fill.patternType;
+    if (fill.perCharFillEnabled !== void 0) config.perCharFillEnabled = fill.perCharFillEnabled;
+    if (fill.charFillColors !== void 0) config.charFillColors = fill.charFillColors;
+  } else {
+    config.fillType = "none";
+  }
+  config.strokeEnabled = !!stroke;
+  if (stroke) {
+    if (stroke.color !== void 0) config.strokeColor = stroke.color;
+    if (stroke.width !== void 0) config.strokeWidth = stroke.width * ratio;
+    if (stroke.position !== void 0) config.strokePosition = stroke.position;
+    if (stroke.opacity !== void 0) config.strokeOpacity = stroke.opacity;
+    if (stroke.lineJoin !== void 0) config.strokeLineJoin = stroke.lineJoin;
+    if (stroke.blur !== void 0) config.strokeBlur = stroke.blur * ratio;
+    if (stroke.type !== void 0) config.strokeType = stroke.type;
+    if (stroke.colorSecondary !== void 0) config.strokeColorSecondary = stroke.colorSecondary;
+    if (stroke.widthSecondary !== void 0) config.strokeWidthSecondary = stroke.widthSecondary * ratio;
+    if (stroke.fadeRange !== void 0) config.strokeFadeRange = stroke.fadeRange;
+  }
+  config.shadowEnabled = !!shadow;
+  if (shadow) {
+    if (shadow.color !== void 0) config.shadowColor = shadow.color;
+    if (shadow.blur !== void 0) config.shadowBlur = shadow.blur * ratio;
+    if (shadow.offsetX !== void 0) config.shadowOffsetX = shadow.offsetX * ratio;
+    if (shadow.offsetY !== void 0) config.shadowOffsetY = shadow.offsetY * ratio;
+    if (shadow.opacity !== void 0) config.shadowOpacity = shadow.opacity;
+    if (shadow.type !== void 0) config.shadowType = shadow.type;
+  }
+  config.bevelEnabled = !!bevel;
+  if (bevel) {
+    if (bevel.depth !== void 0) config.bevelDepth = Math.round(bevel.depth * ratio);
+    if (bevel.highlightColor !== void 0) config.bevelHighlight = bevel.highlightColor;
+    if (bevel.shadowColor !== void 0) config.bevelShadow = bevel.shadowColor;
+    if (bevel.direction !== void 0) config.bevelDirection = bevel.direction;
+    if (bevel.coreColor !== void 0) config.bevelCoreColor = bevel.coreColor;
+    if (bevel.edgeColor !== void 0) config.bevelEdgeColor = bevel.edgeColor;
+    if (bevel.edgeWidth !== void 0) config.bevelEdgeWidth = bevel.edgeWidth * ratio;
+    if (bevel.blur !== void 0) config.bevelBlur = bevel.blur * ratio;
+    if (bevel.blurColor !== void 0) config.bevelBlurColor = bevel.blurColor;
+    if (bevel.perspectiveEnabled !== void 0) config.bevelPerspectiveEnabled = bevel.perspectiveEnabled;
+    if (bevel.vanishingPointX !== void 0) config.bevelVanishingPointX = bevel.vanishingPointX;
+    if (bevel.vanishingPointY !== void 0) config.bevelVanishingPointY = bevel.vanishingPointY;
+    if (bevel.focalLength !== void 0) config.bevelFocalLength = bevel.focalLength;
+  }
+  if (effect.stack) {
+    config.stackEnabled = !!effect.stack.count;
+    if (effect.stack.count !== void 0) config.stackCount = effect.stack.count;
+    if (effect.stack.offsetX !== void 0) config.stackOffsetX = effect.stack.offsetX * ratio;
+    if (effect.stack.offsetY !== void 0) config.stackOffsetY = effect.stack.offsetY * ratio;
+    if (effect.stack.opacityDecay !== void 0) config.stackOpacityDecay = effect.stack.opacityDecay;
+    if (effect.stack.color1 !== void 0) config.stackColor1 = effect.stack.color1;
+    if (effect.stack.color2 !== void 0) config.stackColor2 = effect.stack.color2;
+    if (effect.stack.color3 !== void 0) config.stackColor3 = effect.stack.color3;
+    if (effect.stack.color4 !== void 0) config.stackColor4 = effect.stack.color4;
+  }
+  config.panelEnabled = !!panel;
+  if (panel) {
+    if (panel.color !== void 0) config.panelColor = panel.color;
+    if (panel.opacity !== void 0) config.panelOpacity = panel.opacity;
+    if (panel.radius !== void 0) config.panelRadius = panel.radius;
+    if (panel.paddingX !== void 0) config.panelPaddingX = panel.paddingX * ratio;
+    if (panel.paddingY !== void 0) config.panelPaddingY = panel.paddingY * ratio;
+    if (panel.stroke !== void 0) {
+      config.panelStrokeEnabled = !!panel.stroke;
+      if (panel.stroke.color !== void 0) config.panelStrokeColor = panel.stroke.color;
+      if (panel.stroke.width !== void 0) config.panelStrokeWidth = panel.stroke.width * ratio;
+    }
+  }
+  if (effect.glows) {
+    config.glowLayers = effect.glows.map((g) => {
+      const mappedGlow = {
+        enabled: true,
+        color: g.color,
+        blur: typeof g.blur === "number" ? g.blur * ratio : g.blur ?? 0,
+        opacity: g.opacity,
+        type: g.type ?? "outer"
+      };
+      if (g.strength !== void 0) mappedGlow.strength = g.strength;
+      if (g.spread !== void 0) mappedGlow.spread = g.spread * ratio;
+      return mappedGlow;
+    });
+  }
+  const standardKeys = /* @__PURE__ */ new Set([
+    "id",
+    "name",
+    "category",
+    "description",
+    "tags",
+    "font",
+    "fills",
+    "strokes",
+    "shadows",
+    "glows",
+    "bevel",
+    "panel",
+    "text",
+    "animation",
+    "stack"
+  ]);
+  for (const key of Object.keys(effect)) {
+    if (!standardKeys.has(key)) {
+      config[key] = effect[key];
+    }
+  }
+  return config;
+}
+function layerToTextEffectConfig(layer2) {
+  const normWeight = typeof layer2.fontWeight === "number" ? layer2.fontWeight : layer2.fontWeight === "bold" ? 700 : 400;
+  const config = {
+    ...defaultConfig,
+    width: layer2.width,
+    height: layer2.height,
+    canvasWidth: layer2.width,
+    canvasHeight: layer2.height,
+    text: layer2.text,
+    fontFamily: resolveFontFamilyName(layer2.fontFamily),
+    fontWeight: normWeight,
+    fontStyle: layer2.fontStyle || "normal",
+    fontSize: layer2.fontSize,
+    letterSpacing: layer2.letterSpacing ?? 0,
+    lineHeight: layer2.lineHeight ?? 1.2,
+    fillType: layer2.color ? "solid" : "none",
+    fillColor: layer2.color ?? "#FFFFFF",
+    strokeEnabled: !!layer2.stroke,
+    strokeColor: layer2.stroke?.color ?? "#000000",
+    strokeWidth: layer2.stroke?.width ?? 0,
+    strokePosition: "center",
+    strokeOpacity: 100,
+    strokeLineJoin: "round",
+    shadowEnabled: !!layer2.shadow,
+    shadowColor: layer2.shadow?.color ?? "#000000",
+    shadowBlur: layer2.shadow?.blur ?? 0,
+    shadowOffsetX: layer2.shadow?.offsetX ?? 0,
+    shadowOffsetY: layer2.shadow?.offsetY ?? 0,
+    shadowOpacity: 100,
+    shadowType: "drop",
+    panelEnabled: !!layer2.background,
+    panelColor: layer2.background?.color ?? "#1E1E26",
+    panelOpacity: 80,
+    panelRadius: layer2.background?.borderRadius ?? 6,
+    panelPaddingX: layer2.background?.padding ?? 12,
+    panelPaddingY: layer2.background?.padding ?? 12,
+    textPosX: layer2.textAlign || "center",
+    textPosY: layer2.verticalAlign === "middle" ? "middle" : layer2.verticalAlign || "middle"
+  };
+  return config;
+}
 
 // src/engine/animation.ts
 function ease(t, kind = "linear") {
@@ -3210,47 +3661,23 @@ function evaluateScene(doc, time, ctx, options = {}) {
     finishFrame();
     return;
   }
-  if (supportsOffscreenCanvas()) {
-    const off = new OffscreenCanvas(w, h);
-    const offCtx = off.getContext("2d");
-    if (!offCtx) {
-      renderTextEffectCore(ctx, cfg);
-      finishFrame();
-      return;
-    }
-    renderTextEffectCore(offCtx, cfg);
-    applyMaskReveal(offCtx, animated, w, h);
+  const temp = CanvasDevice.acquire(w, h);
+  const tctx = temp.getContext("2d");
+  if (tctx) {
+    tctx.clearRect(0, 0, w, h);
+    renderTextEffectCore(tctx, cfg);
+    applyMaskReveal(tctx, animated, w, h);
     const compositor = options.compositor ?? getCompositor();
     if (compositor?.isSupported) {
-      compositor.renderToContext(ctx, off, comp);
-      return;
-    }
-    ctx.clearRect(0, 0, w, h);
-    ctx.drawImage(off, 0, 0);
-    return;
-  }
-  if (typeof document !== "undefined") {
-    const temp = document.createElement("canvas");
-    temp.width = w;
-    temp.height = h;
-    const tctx = temp.getContext("2d");
-    if (tctx) {
-      renderTextEffectCore(tctx, cfg);
-      applyMaskReveal(tctx, animated, w, h);
-      const compositor = options.compositor ?? getCompositor();
-      if (compositor?.isSupported) {
-        compositor.renderToContext(ctx, temp, comp);
-        temp.width = 0;
-        temp.height = 0;
-        return;
-      }
+      compositor.renderToContext(ctx, temp, comp);
+    } else {
       ctx.clearRect(0, 0, w, h);
       ctx.drawImage(temp, 0, 0);
-      temp.width = 0;
-      temp.height = 0;
-      return;
     }
+    CanvasDevice.release(temp);
+    return;
   }
+  CanvasDevice.release(temp);
   renderTextEffectCore(ctx, cfg);
   finishFrame();
 }
@@ -6218,6 +6645,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
 0 && (module.exports = {
   COMPOSITION_PRESETS,
   CUSTOM_ENGINE_IDS,
+  CanvasDevice,
   DEFAULT_CANVAS_HEIGHT,
   DEFAULT_CANVAS_WIDTH,
   DEFAULT_DURATION,
@@ -6229,6 +6657,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   ENTRANCE_PRESETS,
   EXIT_PRESETS,
   FONT_WEIGHT_OPTIONS,
+  FontLoader,
   InkBrushEngine,
   LEGACY_RENDERER_MAP,
   LOOP_PRESETS,
@@ -6240,6 +6669,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   TextEffectRenderer,
   WEBM_EXPORT_MAX_FRAMES,
   WebGLCompositor,
+  _buildConfig,
   _resetPlatformCache,
   addImageLayer,
   addKeyframeAtTime,
@@ -6297,6 +6727,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   encodeGif,
   ensureDefaultTimeline,
   ensureFontInLottie,
+  ensureFontsLoaded,
   evaluateConfig,
   evaluateScene,
   findTrackIndex,
@@ -6304,6 +6735,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   getAnimatableParamDef,
   getAnimatableParamsForLayer,
   getDefaultText,
+  getFontLoader,
   getLayerById,
   getPresetScene,
   getSceneTime,
@@ -6322,6 +6754,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   injectText,
   injectTextStyle,
   isWebMExportSupported,
+  layerToTextEffectConfig,
   loadLottieFonts,
   lottieColorToHex,
   lottieJToAlign,
@@ -6344,10 +6777,12 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   renderPngSequence,
   renderSceneWebM,
   renderTextEffectCore,
+  resetFontLoader,
   resetSceneTime,
   resizeCharFillColors,
   resolveAnimatedScalar,
   resolveCustomEngineId,
+  resolveFontFamilyName,
   restoreLetterSpacing,
   scanLottieFonts,
   scanTextLayers,