mulmocast 2.4.7 → 2.4.9

package/assets/html/tailwind_animated.html

@@ -254,6 +254,40 @@
         result.catch(console.error);
       }
     }
+
+    /**
+     * Play animation in real-time using requestAnimationFrame.
+     * Returns a Promise that resolves when all frames have been rendered.
+     * Called by Puppeteer's page.evaluate() during screencast recording.
+     */
+    window.playAnimation = function() {
+      return new Promise(function(resolve) {
+        var mulmo = window.__MULMO;
+        var fps = mulmo.fps;
+        var totalFrames = mulmo.totalFrames;
+        var frameDuration = 1000 / fps;
+        var startTime = null;
+
+        function tick(timestamp) {
+          if (startTime === null) startTime = timestamp;
+          var elapsed = timestamp - startTime;
+          var frame = Math.min(Math.floor(elapsed / frameDuration), totalFrames - 1);
+
+          mulmo.frame = frame;
+          if (typeof render === 'function') {
+            render(frame, totalFrames, fps);
+          }
+
+          if (frame < totalFrames - 1) {
+            requestAnimationFrame(tick);
+          } else {
+            resolve();
+          }
+        }
+
+        requestAnimationFrame(tick);
+      });
+    };
   </script>
 </body>
 </html>

package/lib/actions/captions.d.ts

@@ -1,4 +1,6 @@
 import { MulmoStudioContext, PublicAPIArgs } from "../types/index.js";
 import type { GraphData } from "graphai";
+export declare const stripHtmlTags: (text: string) => string;
+export declare const calculateTimingRatios: (splitTexts: string[]) => number[];
 export declare const caption_graph_data: GraphData;
 export declare const captions: (context: MulmoStudioContext, args?: PublicAPIArgs) => Promise<MulmoStudioContext>;

package/lib/actions/captions.js

@@ -44,13 +44,21 @@ const getSplitTexts = (text, texts, textSplit) => {
     }
     return [text];
 };
-// Calculate timing ratios based on text length
-const calculateTimingRatios = (splitTexts) => {
-    const totalLength = splitTexts.reduce((sum, t) => sum + t.length, 0);
+// HTML tags commonly used in caption texts
+const CAPTION_HTML_TAGS = "span|br|b|i|em|strong|u|s|div|p|a|sub|sup|mark";
+const captionTagRegex = new RegExp(`</?(?:${CAPTION_HTML_TAGS})(?:\\s[^>]*)?\\/?>`, "gi");
+// Strip known HTML tags to get plain text length (for timing calculation, not sanitization)
+export const stripHtmlTags = (text) => {
+    return text.replace(captionTagRegex, "");
+};
+// Calculate timing ratios based on text length (HTML tags excluded)
+export const calculateTimingRatios = (splitTexts) => {
+    const plainTexts = splitTexts.map(stripHtmlTags);
+    const totalLength = plainTexts.reduce((sum, t) => sum + t.length, 0);
     if (totalLength === 0) {
         return splitTexts.map(() => 1 / splitTexts.length);
     }
-    return splitTexts.map((t) => t.length / totalLength);
+    return plainTexts.map((t) => t.length / totalLength);
 };
 // Convert ratios to cumulative ratios: [0.3, 0.5, 0.2] -> [0, 0.3, 0.8, 1.0]
 const calculateCumulativeRatios = (ratios) => {

package/lib/methods/mulmo_beat.d.ts

@@ -1,11 +1,13 @@
 import { MulmoBeat } from "../types/index.js";
 type AnimationConfig = {
     fps?: number;
+    movie?: boolean;
 };
 export declare const MulmoBeatMethods: {
     isAnimationEnabled: (animation: unknown) => animation is true | AnimationConfig;
     isAnimationObject: (animation: unknown) => animation is AnimationConfig;
     isAnimatedHtmlTailwind: (beat: MulmoBeat) => boolean;
+    isMovieMode: (animation: unknown) => boolean;
     getHtmlPrompt(beat: MulmoBeat): string | undefined;
     getPlugin(beat: MulmoBeat): {
         imageType: string;

package/lib/methods/mulmo_beat.js

@@ -7,6 +7,10 @@ const isAnimationObject = (animation) => {
 const isAnimationEnabled = (animation) => {
     return animation === true || isAnimationObject(animation);
 };
+/** Check if movie mode (CDP screencast) is enabled */
+const isMovieMode = (animation) => {
+    return isAnimationObject(animation) && animation.movie === true;
+};
 /** Check if a beat has html_tailwind animation enabled */
 const isAnimatedHtmlTailwind = (beat) => {
     if (!beat.image || beat.image.type !== "html_tailwind")
@@ -18,6 +22,7 @@ export const MulmoBeatMethods = {
     isAnimationEnabled,
     isAnimationObject,
     isAnimatedHtmlTailwind,
+    isMovieMode,
     getHtmlPrompt(beat) {
         if (beat?.htmlPrompt?.data) {
             return beat.htmlPrompt.prompt + "\n\n[data]\n" + JSON.stringify(beat.htmlPrompt.data, null, 2);

package/lib/types/schema.d.ts

@@ -374,6 +374,7 @@ export declare const mulmoMermaidMediaSchema: z.ZodObject<{
 }, z.core.$strict>;
 export declare const htmlTailwindAnimationSchema: z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
     fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
+    movie: z.ZodOptional<z.ZodBoolean>;
 }, z.core.$strip>]>;
 export declare const mulmoHtmlTailwindMediaSchema: z.ZodObject<{
     type: z.ZodLiteral<"html_tailwind">;
@@ -381,6 +382,7 @@ export declare const mulmoHtmlTailwindMediaSchema: z.ZodObject<{
     script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
     animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
         fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
+        movie: z.ZodOptional<z.ZodBoolean>;
     }, z.core.$strip>]>>;
 }, z.core.$strict>;
 export declare const mulmoBeatReferenceMediaSchema: z.ZodObject<{
@@ -553,6 +555,7 @@ export declare const mulmoImageAssetSchema: z.ZodUnion<readonly [z.ZodObject<{
     script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
     animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
         fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
+        movie: z.ZodOptional<z.ZodBoolean>;
     }, z.core.$strip>]>>;
 }, z.core.$strict>, z.ZodObject<{
     type: z.ZodLiteral<"beat">;
@@ -3606,6 +3609,7 @@ export declare const mulmoBeatSchema: z.ZodObject<{
         script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
         animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
             fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
+            movie: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>]>>;
     }, z.core.$strict>, z.ZodObject<{
         type: z.ZodLiteral<"beat">;
@@ -7404,6 +7408,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
             script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
             animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
                 fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
+                movie: z.ZodOptional<z.ZodBoolean>;
             }, z.core.$strip>]>>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"beat">;
@@ -10821,6 +10826,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                 script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
                 animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
                     fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
+                    movie: z.ZodOptional<z.ZodBoolean>;
                 }, z.core.$strip>]>>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"beat">;

package/lib/types/schema.js

@@ -198,6 +198,7 @@ export const htmlTailwindAnimationSchema = z.union([
     z.literal(true),
     z.object({
         fps: z.number().min(1).max(60).optional().default(30),
+        movie: z.boolean().optional().describe("Use CDP screencast for real-time recording (experimental, faster). Default: false (frame-by-frame screenshot)."),
     }),
 ]);
 export const mulmoHtmlTailwindMediaSchema = z

package/lib/utils/browser_pool.d.ts

@@ -0,0 +1,5 @@
+import puppeteer from "puppeteer";
+/** Get a shared browser instance. Launches one if none exists. */
+export declare const getBrowser: () => Promise<puppeteer.Browser>;
+/** Close the shared browser instance. Call at the end of processing. */
+export declare const closeBrowser: () => Promise<void>;

package/lib/utils/browser_pool.js

@@ -0,0 +1,39 @@
+import puppeteer from "puppeteer";
+const isCI = process.env.CI === "true";
+const launchArgs = isCI ? ["--no-sandbox", "--allow-file-access-from-files"] : ["--allow-file-access-from-files"];
+let browserInstance = null;
+let launchPromise = null;
+const launchBrowser = async () => {
+    const browser = await puppeteer.launch({ args: launchArgs });
+    browser.on("disconnected", () => {
+        browserInstance = null;
+        launchPromise = null;
+    });
+    return browser;
+};
+/** Get a shared browser instance. Launches one if none exists. */
+export const getBrowser = async () => {
+    if (browserInstance?.connected) {
+        return browserInstance;
+    }
+    // Prevent multiple concurrent launches
+    if (!launchPromise) {
+        launchPromise = launchBrowser().then((browser) => {
+            browserInstance = browser;
+            launchPromise = null;
+            return browser;
+        });
+    }
+    return launchPromise;
+};
+/** Close the shared browser instance. Call at the end of processing. */
+export const closeBrowser = async () => {
+    if (launchPromise) {
+        await launchPromise;
+    }
+    if (browserInstance?.connected) {
+        await browserInstance.close();
+    }
+    browserInstance = null;
+    launchPromise = null;
+};

package/lib/utils/context.d.ts

@@ -1725,6 +1725,7 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                 script?: string | string[] | undefined;
                 animation?: true | {
                     fps: number;
+                    movie?: boolean | undefined;
                 } | undefined;
             } | {
                 type: "beat";
@@ -3819,6 +3820,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                     script?: string | string[] | undefined;
                     animation?: true | {
                         fps: number;
+                        movie?: boolean | undefined;
                     } | undefined;
                 } | {
                     type: "beat";

package/lib/utils/html_render.d.ts

@@ -10,5 +10,11 @@ export declare const renderHTMLToImage: (html: string, outputPath: string, width
  * The user-defined render() function may be sync or async.
  */
 export declare const renderHTMLToFrames: (html: string, outputDir: string, width: number, height: number, totalFrames: number, fps: number) => Promise<string[]>;
+/**
+ * Record an animated HTML page as video using Puppeteer's screencast API.
+ * The animation plays in real-time via requestAnimationFrame, and
+ * page.screencast() captures frames directly to an mp4 file.
+ */
+export declare const renderHTMLToVideo: (html: string, videoPath: string, width: number, height: number, totalFrames: number, fps: number) => Promise<void>;
 export declare const renderMarkdownToImage: (markdown: string, style: string, outputPath: string, width: number, height: number) => Promise<void>;
 export declare const interpolate: (template: string, data: Record<string, string>) => string;

package/lib/utils/html_render.js

@@ -135,6 +135,39 @@ export const renderHTMLToFrames = async (html, outputDir, width, height, totalFr
         await browser.close();
     }
 };
+/**
+ * Record an animated HTML page as video using Puppeteer's screencast API.
+ * The animation plays in real-time via requestAnimationFrame, and
+ * page.screencast() captures frames directly to an mp4 file.
+ */
+export const renderHTMLToVideo = async (html, videoPath, width, height, totalFrames, fps) => {
+    const duration_ms = (totalFrames / fps) * 1000;
+    const browser = await puppeteer.launch({
+        args: isCI ? ["--no-sandbox", "--allow-file-access-from-files"] : ["--allow-file-access-from-files"],
+    });
+    try {
+        const page = await browser.newPage();
+        await loadHtmlIntoPage(page, html, 30000);
+        await page.setViewport({ width, height });
+        await page.addStyleTag({ content: "html{height:100%;margin:0;padding:0;overflow:hidden}" });
+        await scaleContentToFit(page, width, height);
+        const recorder = await page.screencast({
+            path: videoPath,
+            format: "mp4",
+            fps,
+        });
+        // Play animation in real-time and wait for completion
+        await page.evaluate(() => {
+            return window.playAnimation();
+        });
+        // Small buffer to ensure the last frame is captured
+        await new Promise((resolve) => setTimeout(resolve, Math.min(duration_ms * 0.1, 500)));
+        await recorder.stop();
+    }
+    finally {
+        await browser.close();
+    }
+};
 export const renderMarkdownToImage = async (markdown, style, outputPath, width, height) => {
     const header = `<head><style>${style}</style></head>`;
     const body = await marked(markdown);

package/lib/utils/image_plugins/html_tailwind.d.ts

@@ -1,5 +1,15 @@
 import { ImageProcessorParams } from "../../types/index.js";
 export declare const imageType = "html_tailwind";
+/**
+ * Resolve image:name references to file:// absolute paths using imageRefs.
+ * e.g., src="image:bg_office" → src="file:///abs/path/to/bg_office.png"
+ */
+export declare const resolveImageRefs: (html: string, imageRefs: Record<string, string>) => string;
+/**
+ * Resolve relative paths in src attributes to file:// absolute paths.
+ * Paths starting with http://, https://, file://, data:, image:, or / are left unchanged.
+ */
+export declare const resolveRelativeImagePaths: (html: string, baseDirPath: string) => string;
 export declare const process: (params: ImageProcessorParams) => Promise<string | undefined>;
 export declare const path: (params: ImageProcessorParams) => string;
 export declare const html: (params: ImageProcessorParams) => Promise<string | undefined>;

package/lib/utils/image_plugins/html_tailwind.js

@@ -2,16 +2,29 @@ import fs from "node:fs";
 import nodePath from "node:path";
 import { MulmoBeatMethods } from "../../methods/mulmo_beat.js";
 import { getHTMLFile } from "../file.js";
-import { renderHTMLToImage, interpolate, renderHTMLToFrames } from "../html_render.js";
+import { renderHTMLToImage, interpolate, renderHTMLToFrames, renderHTMLToVideo } from "../html_render.js";
 import { framesToVideo } from "../ffmpeg_utils.js";
 import { parrotingImagePath } from "./utils.js";
 export const imageType = "html_tailwind";
+/**
+ * Resolve image:name references to file:// absolute paths using imageRefs.
+ * e.g., src="image:bg_office" → src="file:///abs/path/to/bg_office.png"
+ */
+export const resolveImageRefs = (html, imageRefs) => {
+    return html.replace(/(\bsrc\s*=\s*)(["'])image:([^"']+)\2/gi, (match, prefix, quote, name) => {
+        const resolvedPath = imageRefs[name];
+        if (!resolvedPath) {
+            return match;
+        }
+        return `${prefix}${quote}file://${resolvedPath}${quote}`;
+    });
+};
 /**
  * Resolve relative paths in src attributes to file:// absolute paths.
- * Paths starting with http://, https://, file://, data:, or / are left unchanged.
+ * Paths starting with http://, https://, file://, data:, image:, or / are left unchanged.
  */
-const resolveRelativeImagePaths = (html, baseDirPath) => {
-    return html.replace(/(\bsrc\s*=\s*)(["'])((?!https?:\/\/|file:\/\/|data:|\/)[^"']+)\2/gi, (_, prefix, quote, relativePath) => {
+export const resolveRelativeImagePaths = (html, baseDirPath) => {
+    return html.replace(/(\bsrc\s*=\s*)(["'])((?!https?:\/\/|file:\/\/|data:|image:|\/)[^"']+)\2/gi, (_, prefix, quote, relativePath) => {
         const absolutePath = nodePath.resolve(baseDirPath, relativePath);
         return `${prefix}${quote}file://${absolutePath}${quote}`;
     });
@@ -34,9 +47,9 @@ const getAnimationConfig = (params) => {
     const animation = beat.image.animation;
     if (!MulmoBeatMethods.isAnimationEnabled(animation))
         return null;
-    if (MulmoBeatMethods.isAnimationObject(animation))
-        return { fps: animation.fps ?? DEFAULT_ANIMATION_FPS };
-    return { fps: DEFAULT_ANIMATION_FPS };
+    const fps = MulmoBeatMethods.isAnimationObject(animation) ? (animation.fps ?? DEFAULT_ANIMATION_FPS) : DEFAULT_ANIMATION_FPS;
+    const movie = MulmoBeatMethods.isMovieMode(animation);
+    return { fps, movie };
 };
 const processHtmlTailwindAnimated = async (params) => {
     const { beat, imagePath, canvasSize, context } = params;
@@ -64,18 +77,25 @@ const processHtmlTailwindAnimated = async (params) => {
         fps: String(fps),
         custom_style: "",
     });
-    const htmlData = resolveRelativeImagePaths(rawHtmlData, context.fileDirs.mulmoFileDirPath);
+    const resolvedRefs = resolveImageRefs(rawHtmlData, params.imageRefs ?? {});
+    const htmlData = resolveRelativeImagePaths(resolvedRefs, context.fileDirs.mulmoFileDirPath);
     // imagePath is set to the .mp4 path by imagePluginAgent for animated beats
     const videoPath = imagePath;
-    // Create frames directory next to the video file
-    const framesDir = videoPath.replace(/\.[^/.]+$/, "_frames");
-    fs.mkdirSync(framesDir, { recursive: true });
-    try {
-        await renderHTMLToFrames(htmlData, framesDir, canvasSize.width, canvasSize.height, totalFrames, fps);
-        await framesToVideo(framesDir, videoPath, fps, canvasSize.width, canvasSize.height);
+    if (animConfig.movie) {
+        // CDP screencast: real-time recording (experimental, faster)
+        await renderHTMLToVideo(htmlData, videoPath, canvasSize.width, canvasSize.height, totalFrames, fps);
     }
-    finally {
-        fs.rmSync(framesDir, { recursive: true, force: true });
+    else {
+        // Frame-by-frame screenshot (deterministic, slower)
+        const framesDir = videoPath.replace(/\.[^/.]+$/, "_frames");
+        fs.mkdirSync(framesDir, { recursive: true });
+        try {
+            await renderHTMLToFrames(htmlData, framesDir, canvasSize.width, canvasSize.height, totalFrames, fps);
+            await framesToVideo(framesDir, videoPath, fps, canvasSize.width, canvasSize.height);
+        }
+        finally {
+            fs.rmSync(framesDir, { recursive: true, force: true });
+        }
     }
     return videoPath;
 };
@@ -90,7 +110,8 @@ const processHtmlTailwindStatic = async (params) => {
         html_body: html,
         user_script: buildUserScript(script),
     });
-    const htmlData = resolveRelativeImagePaths(rawHtmlData, context.fileDirs.mulmoFileDirPath);
+    const resolvedRefs = resolveImageRefs(rawHtmlData, params.imageRefs ?? {});
+    const htmlData = resolveRelativeImagePaths(resolvedRefs, context.fileDirs.mulmoFileDirPath);
     await renderHTMLToImage(htmlData, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.4.7",
+  "version": "2.4.9",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -87,7 +87,7 @@
   "homepage": "https://github.com/receptron/mulmocast-cli#readme",
   "dependencies": {
     "@google-cloud/text-to-speech": "^6.4.0",
-    "@google/genai": "^1.42.0",
+    "@google/genai": "^1.44.0",
     "@graphai/anthropic_agent": "^2.0.12",
     "@graphai/browserless_agent": "^2.0.2",
     "@graphai/gemini_agent": "^2.0.5",
@@ -108,10 +108,10 @@
     "fluent-ffmpeg": "^2.1.3",
     "graphai": "^2.0.16",
     "jsdom": "^28.1.0",
-    "marked": "^17.0.3",
+    "marked": "^17.0.4",
     "mulmocast-vision": "^1.0.8",
     "ora": "^9.3.0",
-    "puppeteer": "^24.37.5",
+    "puppeteer": "^24.39.0",
     "replicate": "^1.4.0",
     "yaml": "^2.8.2",
     "yargs": "^18.0.0",
@@ -125,15 +125,15 @@
     "@types/jsdom": "^28.0.0",
     "@types/yargs": "^17.0.35",
     "cross-env": "^10.1.0",
-    "eslint": "^10.0.2",
+    "eslint": "^10.0.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-sonarjs": "^4.0.0",
-    "globals": "^17.3.0",
+    "eslint-plugin-sonarjs": "^4.0.2",
+    "globals": "^17.4.0",
     "prettier": "^3.8.1",
     "tsx": "^4.21.0",
     "typescript": "6.0.0-beta",
-    "typescript-eslint": "^8.56.1"
+    "typescript-eslint": "^8.57.0"
   },
   "engines": {
     "node": ">=22.0.0"

package/scripts/test/test_image_ref_scheme.json

@@ -0,0 +1,84 @@
+{
+  "$mulmocast": { "version": "1.1" },
+  "lang": "ja",
+  "canvasSize": { "width": 1080, "height": 1920 },
+  "title": "image: スキームテスト",
+  "speechParams": {
+    "speakers": {
+      "Presenter": { "voiceId": "shimmer" }
+    }
+  },
+  "audioParams": {
+    "bgm": {
+      "kind": "url",
+      "url": "https://github.com/receptron/mulmocast-media/raw/refs/heads/main/bgms/theme001.mp3"
+    },
+    "bgmVolume": 0.12
+  },
+  "imageParams": {
+    "provider": "google",
+    "model": "gemini-3.1-flash-image-preview",
+    "images": {
+      "bg_office": {
+        "type": "imagePrompt",
+        "prompt": "Empty modern tech office with abandoned desks and computer screens still glowing, dramatic morning sunlight, photorealistic, vertical composition 9:16"
+      },
+      "bg_city": {
+        "type": "imagePrompt",
+        "prompt": "Futuristic city skyline at sunset with neon lights reflecting on glass buildings, vibrant colors, photorealistic, vertical composition 9:16"
+      }
+    }
+  },
+  "beats": [
+    {
+      "text": "image:スキームのテストです。背景画像がimageParamsで生成した画像に置き換わります。",
+      "speaker": "Presenter",
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full overflow-hidden relative bg-black'>",
+          "  <div id='wrap' style='position:absolute;inset:0;overflow:hidden'>",
+          "    <img src='image:bg_office' style='width:100%;height:100%;object-fit:cover;filter:brightness(0.7)' />",
+          "  </div>",
+          "  <div style='position:absolute;top:50%;left:40px;right:40px;transform:translateY(-50%);text-align:center'>",
+          "    <div style='display:inline-block;background:rgba(239,68,68,0.85);padding:12px 32px;border-radius:12px'>",
+          "      <span style='color:white;font-size:80px;font-weight:900'>image: test</span>",
+          "    </div>",
+          "    <div style='color:white;font-size:48px;font-weight:900;margin-top:20px;text-shadow:0 4px 16px rgba(0,0,0,0.9)'>bg_office を参照</div>",
+          "  </div>",
+          "</div>"
+        ],
+        "script": [
+          "const animation = new MulmoAnimation();",
+          "animation.animate('#wrap', { scale: [1.0, 1.15] }, { start: 0, end: 'auto', easing: 'linear' });"
+        ],
+        "animation": true
+      }
+    },
+    {
+      "text": "二枚目の背景です。別のimageRefsキーを参照しています。",
+      "speaker": "Presenter",
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full overflow-hidden relative bg-black'>",
+          "  <div id='wrap' style='position:absolute;inset:0;overflow:hidden'>",
+          "    <img src='image:bg_city' style='width:100%;height:100%;object-fit:cover;filter:brightness(0.6)' />",
+          "  </div>",
+          "  <div style='position:absolute;top:50%;left:40px;right:40px;transform:translateY(-50%);text-align:center'>",
+          "    <div style='display:inline-block;background:rgba(59,130,246,0.85);padding:12px 32px;border-radius:12px'>",
+          "      <span style='color:white;font-size:80px;font-weight:900'>image: test</span>",
+          "    </div>",
+          "    <div style='color:white;font-size:48px;font-weight:900;margin-top:20px;text-shadow:0 4px 16px rgba(0,0,0,0.9)'>bg_city を参照</div>",
+          "  </div>",
+          "</div>"
+        ],
+        "script": [
+          "const animation = new MulmoAnimation();",
+          "animation.animate('#wrap', { translateX: [0, -30] }, { start: 0, end: 'auto', easing: 'linear' });"
+        ],
+        "animation": true
+      }
+    }
+  ]
+}