mulmocast 2.4.9 → 2.6.0

package/lib/utils/image_plugins/html_tailwind.js

@@ -1,10 +1,11 @@
 import fs from "node:fs";
 import nodePath from "node:path";
 import { MulmoBeatMethods } from "../../methods/mulmo_beat.js";
-import { getHTMLFile } from "../file.js";
+import { getHTMLFile, getJSFile } from "../file.js";
 import { renderHTMLToImage, interpolate, renderHTMLToFrames, renderHTMLToVideo } from "../html_render.js";
 import { framesToVideo } from "../ffmpeg_utils.js";
 import { parrotingImagePath } from "./utils.js";
+import { swipeElementsToHtml, swipeElementsToScript } from "../swipe_to_html.js";
 export const imageType = "html_tailwind";
 /**
  * Resolve image:name references to file:// absolute paths using imageRefs.
@@ -40,6 +41,25 @@ const buildUserScript = (script) => {
     const code = Array.isArray(script) ? script.join("\n") : script;
     return `<script>\n${code}\n</script>`;
 };
+/**
+ * Resolve HTML and script from beat image data.
+ * If `elements` (Swipe-style) is provided, convert to HTML + script.
+ * Otherwise, use raw `html` and `script` fields.
+ */
+const resolveHtmlAndScript = (imageData) => {
+    if (imageData.elements && Array.isArray(imageData.elements) && imageData.elements.length > 0) {
+        const html = swipeElementsToHtml(imageData.elements);
+        const generatedScript = swipeElementsToScript(imageData.elements);
+        // Merge with user-provided script if any
+        const userScript = imageData.script ? joinHtml(imageData.script) : "";
+        const combinedScript = [generatedScript, userScript].filter(Boolean).join("\n");
+        return { html, script: combinedScript || undefined };
+    }
+    return {
+        html: joinHtml(imageData.html ?? ""),
+        script: imageData.script,
+    };
+};
 const getAnimationConfig = (params) => {
     const { beat } = params;
     if (!beat.image || beat.image.type !== imageType)
@@ -67,11 +87,14 @@ const processHtmlTailwindAnimated = async (params) => {
     if (totalFrames <= 0) {
         throw new Error(`html_tailwind animation: totalFrames is ${totalFrames} (duration=${duration}, fps=${fps}). Increase duration or fps.`);
     }
-    const html = joinHtml(beat.image.html);
+    const imageData = beat.image;
+    const { html, script } = resolveHtmlAndScript(imageData);
     const template = getHTMLFile("tailwind_animated");
-    const script = "script" in beat.image ? beat.image.script : undefined;
     const rawHtmlData = interpolate(template, {
         html_body: html,
+        animation_runtime: getJSFile("animation_runtime"),
+        data_attribute_registration: getJSFile("data_attribute_registration"),
+        auto_render: getJSFile("auto_render"),
         user_script: buildUserScript(script),
         totalFrames: String(totalFrames),
         fps: String(fps),
@@ -103,9 +126,9 @@ const processHtmlTailwindStatic = async (params) => {
     const { beat, imagePath, canvasSize, context } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
-    const html = joinHtml(beat.image.html);
+    const imageData = beat.image;
+    const { html, script } = resolveHtmlAndScript(imageData);
     const template = getHTMLFile("tailwind");
-    const script = "script" in beat.image ? beat.image.script : undefined;
     const rawHtmlData = interpolate(template, {
         html_body: html,
         user_script: buildUserScript(script),
@@ -126,7 +149,11 @@ const dumpHtml = async (params) => {
     const { beat } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
-    return joinHtml(beat.image.html);
+    const imageData = beat.image;
+    if (imageData.elements && Array.isArray(imageData.elements) && imageData.elements.length > 0) {
+        return swipeElementsToHtml(imageData.elements);
+    }
+    return joinHtml(imageData.html ?? "");
 };
 export const process = processHtmlTailwind;
 export const path = parrotingImagePath;

package/lib/utils/swipe_to_html.d.ts

@@ -0,0 +1,55 @@
+export interface SwipeTransition {
+    opacity?: number;
+    rotate?: number;
+    scale?: number | [number, number];
+    translate?: [number, number];
+    bc?: string;
+    timing?: [number, number];
+}
+export interface SwipeLoop {
+    style: "vibrate" | "blink" | "wiggle" | "spin" | "shift" | "bounce" | "pulse";
+    count?: number;
+    delta?: number;
+    duration?: number;
+    direction?: "n" | "s" | "e" | "w";
+    clockwise?: boolean;
+}
+export interface SwipeShadow {
+    color?: string;
+    offset?: [number, number];
+    opacity?: number;
+    radius?: number;
+}
+export interface SwipeElement {
+    id?: string;
+    x?: number | string;
+    y?: number | string;
+    w?: number | string;
+    h?: number | string;
+    pos?: [number | string, number | string];
+    bc?: string;
+    opacity?: number;
+    rotate?: number;
+    scale?: number | [number, number];
+    translate?: [number, number];
+    cornerRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    shadow?: SwipeShadow;
+    clip?: boolean;
+    text?: string;
+    fontSize?: number | string;
+    fontWeight?: string;
+    textColor?: string;
+    textAlign?: "center" | "left" | "right";
+    lineHeight?: number | string;
+    img?: string;
+    imgFit?: "contain" | "cover" | "fill";
+    to?: SwipeTransition;
+    loop?: SwipeLoop;
+    elements?: SwipeElement[];
+}
+/** Generate HTML from Swipe elements */
+export declare const swipeElementsToHtml: (elements: SwipeElement[]) => string;
+/** Generate render() script from Swipe element animations */
+export declare const swipeElementsToScript: (elements: SwipeElement[]) => string;

package/lib/utils/swipe_to_html.js

@@ -0,0 +1,240 @@
+const escapeHtml = (str) => {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+};
+const toCssValue = (value) => {
+    return typeof value === "number" ? `${value}px` : value;
+};
+const buildElementStyle = (el) => {
+    const styles = ["position: absolute;"];
+    if (el.pos) {
+        styles.push(`left: ${toCssValue(el.pos[0])};`);
+        styles.push(`top: ${toCssValue(el.pos[1])};`);
+    }
+    else {
+        if (el.x !== undefined)
+            styles.push(`left: ${toCssValue(el.x)};`);
+        if (el.y !== undefined)
+            styles.push(`top: ${toCssValue(el.y)};`);
+    }
+    if (el.w !== undefined)
+        styles.push(`width: ${toCssValue(el.w)};`);
+    if (el.h !== undefined)
+        styles.push(`height: ${toCssValue(el.h)};`);
+    if (el.bc)
+        styles.push(`background: ${el.bc};`);
+    if (el.opacity !== undefined)
+        styles.push(`opacity: ${el.opacity};`);
+    if (el.cornerRadius !== undefined)
+        styles.push(`border-radius: ${el.cornerRadius}px;`);
+    if (el.borderWidth !== undefined)
+        styles.push(`border: ${el.borderWidth}px solid ${el.borderColor ?? "black"};`);
+    if (el.clip)
+        styles.push("overflow: hidden;");
+    if (el.shadow) {
+        const s = el.shadow;
+        const ox = s.offset?.[0] ?? 1;
+        const oy = s.offset?.[1] ?? 1;
+        const opacity = s.opacity ?? 0.5;
+        const radius = s.radius ?? 1;
+        styles.push(`filter: drop-shadow(${ox}px ${oy}px ${radius}px rgba(0,0,0,${opacity}));`);
+    }
+    const transforms = [];
+    if (el.pos)
+        transforms.push("translate(-50%, -50%)");
+    if (el.rotate)
+        transforms.push(`rotate(${el.rotate}deg)`);
+    if (el.scale !== undefined) {
+        const [sx, sy] = Array.isArray(el.scale) ? el.scale : [el.scale, el.scale];
+        transforms.push(`scale(${sx}, ${sy})`);
+    }
+    if (el.translate)
+        transforms.push(`translate(${el.translate[0]}px, ${el.translate[1]}px)`);
+    if (transforms.length > 0) {
+        styles.push(`transform: ${transforms.join(" ")};`);
+    }
+    return styles.join(" ");
+};
+const buildTextStyle = (el) => {
+    const styles = [];
+    if (el.fontSize)
+        styles.push(`font-size: ${toCssValue(el.fontSize)};`);
+    if (el.fontWeight)
+        styles.push(`font-weight: ${el.fontWeight};`);
+    if (el.textColor)
+        styles.push(`color: ${el.textColor};`);
+    if (el.textAlign)
+        styles.push(`text-align: ${el.textAlign};`);
+    if (el.lineHeight)
+        styles.push(`line-height: ${toCssValue(el.lineHeight)};`);
+    return styles.join(" ");
+};
+const elementToHtml = (el, index) => {
+    const id = el.id ?? `swipe_el_${index}`;
+    const style = buildElementStyle(el);
+    const textStyle = buildTextStyle(el);
+    const lines = [];
+    lines.push(`<div id="${escapeHtml(id)}" style="${escapeHtml(style)}">`);
+    if (el.img) {
+        const fit = el.imgFit ?? "contain";
+        lines.push(`  <img src="${escapeHtml(el.img)}" style="width:100%; height:100%; object-fit:${fit};" />`);
+    }
+    if (el.text) {
+        lines.push(`  <span style="${escapeHtml(textStyle)}">${escapeHtml(el.text)}</span>`);
+    }
+    if (el.elements) {
+        el.elements.forEach((child, childIdx) => {
+            lines.push(elementToHtml(child, index * 100 + childIdx));
+        });
+    }
+    lines.push("</div>");
+    return lines.join("\n");
+};
+/** Generate HTML from Swipe elements */
+export const swipeElementsToHtml = (elements) => {
+    const html = elements.map((el, i) => elementToHtml(el, i)).join("\n");
+    return `<div style="position:relative; width:100%; height:100%; overflow:hidden;">\n${html}\n</div>`;
+};
+const collectAnimations = (elements, entries, indexBase = 0) => {
+    elements.forEach((el, i) => {
+        const id = el.id ?? `swipe_el_${indexBase + i}`;
+        if (el.to || el.loop) {
+            entries.push({ id, to: el.to, loop: el.loop });
+        }
+        if (el.elements) {
+            collectAnimations(el.elements, entries, (indexBase + i) * 100);
+        }
+    });
+};
+const generateTransitionCode = (id, to) => {
+    const timing = to.timing ?? [0, 1];
+    const props = [];
+    if (to.opacity !== undefined)
+        props.push(`opacity: [undefined, ${to.opacity}]`);
+    if (to.rotate !== undefined)
+        props.push(`rotate: [undefined, ${to.rotate}]`);
+    if (to.translate)
+        props.push(`translateX: [undefined, ${to.translate[0]}], translateY: [undefined, ${to.translate[1]}]`);
+    if (to.scale !== undefined) {
+        const [sx, sy] = Array.isArray(to.scale) ? to.scale : [to.scale, to.scale];
+        props.push(`scaleX: [undefined, ${sx}], scaleY: [undefined, ${sy}]`);
+    }
+    if (to.bc)
+        props.push(`backgroundColor: [undefined, '${to.bc}']`);
+    return `animation.animate('#${id}', { ${props.join(", ")} }, { start: ${timing[0]}, end: ${timing[1]}, easing: 'easeOut' });`;
+};
+const generateLoopCode = (id, loop) => {
+    const count = loop.count ?? 1;
+    const dur = loop.duration ?? 1;
+    const infinite = count === 0;
+    const base = { id, style: loop.style, duration: dur, count, infinite };
+    switch (loop.style) {
+        case "wiggle":
+            return `__swipe_loops.push(${JSON.stringify({ ...base, delta: loop.delta ?? 15 })});`;
+        case "vibrate":
+            return `__swipe_loops.push(${JSON.stringify({ ...base, delta: loop.delta ?? 10 })});`;
+        case "bounce":
+            return `__swipe_loops.push(${JSON.stringify({ ...base, delta: loop.delta ?? 20 })});`;
+        case "pulse":
+            return `__swipe_loops.push(${JSON.stringify({ ...base, delta: loop.delta ?? 0.1 })});`;
+        case "blink":
+            return `__swipe_loops.push(${JSON.stringify(base)});`;
+        case "spin":
+            return `__swipe_loops.push(${JSON.stringify({ ...base, clockwise: loop.clockwise !== false })});`;
+        case "shift":
+            return `__swipe_loops.push(${JSON.stringify({ ...base, direction: loop.direction ?? "s" })});`;
+    }
+};
+/** Generate render() script from Swipe element animations */
+export const swipeElementsToScript = (elements) => {
+    const entries = [];
+    collectAnimations(elements, entries);
+    if (entries.length === 0)
+        return "";
+    const lines = [];
+    // Transition animations via MulmoAnimation
+    const hasTransitions = entries.some((e) => e.to);
+    if (hasTransitions) {
+        lines.push("const animation = new MulmoAnimation();");
+        entries.forEach((entry) => {
+            if (entry.to) {
+                lines.push(generateTransitionCode(entry.id, entry.to));
+            }
+        });
+    }
+    // Loop animations via custom render
+    const hasLoops = entries.some((e) => e.loop);
+    if (hasLoops) {
+        lines.push("const __swipe_loops = [];");
+        entries.forEach((entry) => {
+            if (entry.loop) {
+                lines.push(generateLoopCode(entry.id, entry.loop));
+            }
+        });
+        lines.push("");
+        lines.push(LOOP_PROCESSOR);
+        // Store base transforms on init
+        lines.push("");
+        lines.push("(function() {");
+        lines.push("  __swipe_loops.forEach(function(lp) {");
+        lines.push("    const el = document.getElementById(lp.id);");
+        lines.push("    if (el) el.dataset.baseTransform = el.style.transform || '';");
+        lines.push("  });");
+        lines.push("})();");
+    }
+    // Generate render function
+    if (hasTransitions && hasLoops) {
+        lines.push("");
+        lines.push("function render(frame, totalFrames, fps) {");
+        lines.push("  animation.update(frame, fps);");
+        lines.push("  __processLoops(frame / fps);");
+        lines.push("}");
+    }
+    else if (hasLoops) {
+        lines.push("");
+        lines.push("function render(frame, totalFrames, fps) {");
+        lines.push("  __processLoops(frame / fps);");
+        lines.push("}");
+    }
+    return lines.join("\n");
+};
+const LOOP_PROCESSOR = `function __processLoops(t) {
+  __swipe_loops.forEach(function(lp) {
+    var el = document.getElementById(lp.id);
+    if (!el) return;
+    var cycleT = lp.duration > 0 ? (t % lp.duration) / lp.duration : 0;
+    var totalCycles = lp.duration > 0 ? t / lp.duration : 0;
+    if (!lp.infinite && totalCycles >= lp.count) return;
+    var phase = cycleT * Math.PI * 2;
+    var base = el.dataset.baseTransform || '';
+    switch(lp.style) {
+      case 'wiggle':
+        el.style.transform = base + ' rotate(' + (Math.sin(phase) * lp.delta) + 'deg)';
+        break;
+      case 'vibrate':
+        el.style.transform = base + ' translateX(' + (Math.sin(phase) * lp.delta) + 'px)';
+        break;
+      case 'bounce':
+        el.style.transform = base + ' translateY(' + (-Math.abs(Math.sin(phase)) * lp.delta) + 'px)';
+        break;
+      case 'pulse':
+        var s = 1 + Math.sin(phase) * lp.delta;
+        el.style.transform = base + ' scale(' + s + ')';
+        break;
+      case 'blink':
+        el.style.opacity = 0.5 + Math.sin(phase) * 0.5;
+        break;
+      case 'spin': {
+        var deg = lp.clockwise ? cycleT * 360 : -cycleT * 360;
+        el.style.transform = base + ' rotate(' + deg + 'deg)';
+        break;
+      }
+      case 'shift': {
+        var dist = cycleT * 100;
+        var dx = lp.direction === 'e' ? dist : lp.direction === 'w' ? -dist : 0;
+        var dy = lp.direction === 's' ? dist : lp.direction === 'n' ? -dist : 0;
+        el.style.transform = base + ' translate(' + dx + '%, ' + dy + '%)';
+        break;
+      }
+    }
+  });
+}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.4.9",
+  "version": "2.6.0",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -24,7 +24,8 @@
     }
   },
   "resolutions": {
-    "minimatch": "^10.2.4"
+    "minimatch": "^10.2.4",
+    "yauzl": "^3.2.1"
   },
   "bin": {
     "mulmo": "lib/cli/bin.js",
@@ -56,7 +57,7 @@
     "pdf": "npx tsx ./src/cli/bin.ts pdf",
     "test": "rm -f scratchpad/test*.* && npx tsx ./src/audio.ts scripts/test/test.json && npx tsx ./src/images.ts scripts/test/test.json && npx tsx ./src/movie.ts scripts/test/test.json",
     "ci_test": "cross-env NODE_ENV=test tsx --test --experimental-test-coverage ./test/*/test_*.ts",
-    "lint": "eslint src test",
+    "lint": "eslint src test assets/html/js",
     "build": "tsc",
     "build_test": "tsc && git checkout -- lib/*",
     "cli": "npx tsx ./src/cli/bin.ts",
@@ -68,7 +69,7 @@
     "story_to_script": "npx tsx ./src/cli/bin.ts tool story_to_script",
     "whisper": "npx tsx ./src/cli/bin.ts tool whisper",
     "latest": "yarn upgrade-interactive  --latest",
-    "format": "prettier --write '{src,scripts,assets/templates,assets/styles,draft,ideason,scripts_mag2,proto,test,batch,graphai,output,docs/scripts}/**/*.{ts,json,yaml}'",
+    "format": "prettier --write '{src,scripts,assets/templates,assets/styles,assets/html/js,draft,ideason,scripts_mag2,proto,test,batch,graphai,output,docs/scripts}/**/*.{ts,js,json,yaml}'",
     "deep_research": "npx tsx ./src/tools/deep_research.ts",
     "template": "npx tsx batch/template2tsobject.ts && yarn run format",
     "mcp_server": "npx tsx ./src/mcp/server.ts",
@@ -109,9 +110,9 @@
     "graphai": "^2.0.16",
     "jsdom": "^28.1.0",
     "marked": "^17.0.4",
-    "mulmocast-vision": "^1.0.8",
+    "mulmocast-vision": "^1.0.9",
     "ora": "^9.3.0",
-    "puppeteer": "^24.39.0",
+    "puppeteer": "^24.39.1",
     "replicate": "^1.4.0",
     "yaml": "^2.8.2",
     "yargs": "^18.0.0",

package/scripts/test/macoro_anime_proto.json

@@ -0,0 +1,120 @@
+{
+  "$mulmocast": { "version": "1.1" },
+  "title": "マコロアニメ プロトタイプ",
+  "description": "MulmoCastリミテッドアニメーションのテスト",
+  "lang": "ja",
+  "speechParams": {
+    "provider": "openai",
+    "speakers": {
+      "macoro": {
+        "voiceId": "nova",
+        "displayName": { "ja": "マコロ" }
+      }
+    }
+  },
+  "beats": [
+    {
+      "speaker": "macoro",
+      "text": "こんにちは！ぼくマコロだよ！今日はみんなに会えてうれしいな！",
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full relative overflow-hidden' style='background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 30%, #e1bee7 60%, #bbdefb 100%);'>",
+          "",
+          "  <!-- 背景の浮遊パーティクル -->",
+          "  <div id='p1' class='absolute w-4 h-4 rounded-full' style='background: rgba(255,255,255,0.6); left:10%; top:80%;'></div>",
+          "  <div id='p2' class='absolute w-3 h-3 rounded-full' style='background: rgba(255,200,200,0.5); left:30%; top:85%;'></div>",
+          "  <div id='p3' class='absolute w-5 h-5 rounded-full' style='background: rgba(200,200,255,0.5); left:70%; top:75%;'></div>",
+          "  <div id='p4' class='absolute w-3 h-3 rounded-full' style='background: rgba(255,255,200,0.6); left:85%; top:90%;'></div>",
+          "  <div id='p5' class='absolute w-4 h-4 rounded-full' style='background: rgba(200,255,200,0.5); left:50%; top:82%;'></div>",
+          "",
+          "  <!-- 背景の星 -->",
+          "  <div id='star1' class='absolute text-4xl' style='left:15%; top:15%;'>✦</div>",
+          "  <div id='star2' class='absolute text-3xl' style='left:80%; top:20%;'>✦</div>",
+          "  <div id='star3' class='absolute text-2xl' style='left:60%; top:10%;'>✦</div>",
+          "",
+          "  <!-- マコロ本体 -->",
+          "  <div id='macoro-container' class='absolute' style='bottom:5%; left:50%; transform:translateX(-50%);'>",
+          "    <img id='macoro' src='https://raw.githubusercontent.com/receptron/mulmocast-media/main/characters/macoro.png' style='width:500px; filter:drop-shadow(0 10px 20px rgba(0,0,0,0.2));' />",
+          "  </div>",
+          "",
+          "  <!-- 吹き出し -->",
+          "  <div id='bubble' class='absolute' style='top:8%; right:8%; opacity:0;'>",
+          "    <div class='bg-white rounded-3xl px-8 py-5 shadow-lg relative' style='max-width:380px;'>",
+          "      <p id='bubble-text' class='text-2xl font-bold text-gray-700'></p>",
+          "      <div class='absolute -bottom-3 left-12 w-6 h-6 bg-white transform rotate-45'></div>",
+          "    </div>",
+          "  </div>",
+          "",
+          "</div>"
+        ],
+        "script": [
+          "const fullText = 'こんにちは！ぼくマコロだよ！\\n今日はみんなに会えてうれしいな！';",
+          "",
+          "function render(frame, totalFrames, fps) {",
+          "  const t = frame / fps;",
+          "  const macoro = document.getElementById('macoro-container');",
+          "  const bubble = document.getElementById('bubble');",
+          "  const bubbleText = document.getElementById('bubble-text');",
+          "",
+          "  // --- マコロの動き ---",
+          "  // 登場: 下からバウンスイン (0-1秒)",
+          "  let macoroY = 0;",
+          "  if (t < 1.0) {",
+          "    const p = t / 1.0;",
+          "    const bounce = Math.sin(p * Math.PI) * 30;",
+          "    macoroY = (1 - p) * 200 - bounce;",
+          "  }",
+          "",
+          "  // 話している時のぴょこぴょこ (1秒以降)",
+          "  if (t >= 1.0) {",
+          "    const talkBounce = Math.sin(t * 8) * 8;",
+          "    const talkTilt = Math.sin(t * 5) * 3;",
+          "    macoroY = talkBounce;",
+          "    macoro.style.transform = 'translateX(-50%) translateY(' + macoroY + 'px) rotate(' + talkTilt + 'deg)';",
+          "  } else {",
+          "    macoro.style.transform = 'translateX(-50%) translateY(' + macoroY + 'px)';",
+          "  }",
+          "",
+          "  // --- 吹き出し ---",
+          "  if (t >= 0.8) {",
+          "    const bubbleP = Math.min((t - 0.8) / 0.3, 1);",
+          "    const scale = 0.5 + bubbleP * 0.5;",
+          "    bubble.style.opacity = bubbleP;",
+          "    bubble.style.transform = 'scale(' + scale + ')';",
+          "",
+          "    // タイプライター効果",
+          "    const textProgress = Math.min((t - 1.0) / 3.0, 1);",
+          "    if (textProgress > 0) {",
+          "      const charCount = Math.floor(textProgress * fullText.length);",
+          "      bubbleText.innerHTML = fullText.substring(0, charCount).replace('\\n', '<br>');",
+          "    }",
+          "  }",
+          "",
+          "  // --- 背景パーティクル ---",
+          "  for (let i = 1; i <= 5; i++) {",
+          "    const p = document.getElementById('p' + i);",
+          "    const speed = 0.3 + i * 0.15;",
+          "    const sway = Math.sin(t * (1 + i * 0.3) + i) * 20;",
+          "    const y = ((1 - ((t * speed * 0.1) % 1)) * 110) - 10;",
+          "    p.style.top = y + '%';",
+          "    p.style.transform = 'translateX(' + sway + 'px)';",
+          "  }",
+          "",
+          "  // --- 背景の星キラキラ ---",
+          "  for (let i = 1; i <= 3; i++) {",
+          "    const star = document.getElementById('star' + i);",
+          "    const twinkle = 0.3 + Math.sin(t * 3 + i * 2) * 0.7;",
+          "    const starScale = 0.8 + Math.sin(t * 2 + i) * 0.3;",
+          "    star.style.opacity = twinkle;",
+          "    star.style.transform = 'scale(' + starScale + ')';",
+          "    star.style.color = 'rgba(255,200,50,' + twinkle + ')';",
+          "  }",
+          "}"
+        ],
+        "animation": { "fps": 24 }
+      },
+      "duration": 6
+    }
+  ]
+}

package/scripts/test/macoro_swipe_proto.json

@@ -0,0 +1,104 @@
+{
+  "$mulmocast": { "version": "1.1" },
+  "title": "マコロ Swipeアニメ プロトタイプ",
+  "description": "Swipe風宣言的elementsによるアニメーションテスト",
+  "lang": "ja",
+  "speechParams": {
+    "provider": "openai",
+    "speakers": {
+      "macoro": {
+        "voiceId": "nova",
+        "displayName": { "ja": "マコロ" }
+      }
+    }
+  },
+  "beats": [
+    {
+      "speaker": "macoro",
+      "text": "こんにちは！ぼくマコロだよ！今日はみんなに会えてうれしいな！",
+      "duration": 6,
+      "image": {
+        "type": "html_tailwind",
+        "elements": [
+          {
+            "id": "bg",
+            "w": "100%",
+            "h": "100%",
+            "bc": "linear-gradient(135deg, #fce4ec 0%, #f8bbd0 30%, #e1bee7 60%, #bbdefb 100%)"
+          },
+          {
+            "id": "star1",
+            "text": "✦",
+            "fontSize": "36px",
+            "textColor": "gold",
+            "pos": ["15%", "15%"],
+            "opacity": 0.3,
+            "loop": { "style": "blink", "count": 0, "duration": 2 }
+          },
+          {
+            "id": "star2",
+            "text": "✦",
+            "fontSize": "28px",
+            "textColor": "gold",
+            "pos": ["80%", "20%"],
+            "opacity": 0.3,
+            "loop": { "style": "blink", "count": 0, "duration": 3 }
+          },
+          {
+            "id": "star3",
+            "text": "✦",
+            "fontSize": "22px",
+            "textColor": "gold",
+            "pos": ["60%", "10%"],
+            "opacity": 0.3,
+            "loop": { "style": "blink", "count": 0, "duration": 1.5 }
+          },
+          {
+            "id": "macoro",
+            "img": "https://raw.githubusercontent.com/receptron/mulmocast-media/main/characters/macoro.png",
+            "pos": ["50%", "65%"],
+            "w": 500,
+            "h": 300,
+            "imgFit": "contain",
+            "opacity": 0,
+            "shadow": { "color": "black", "offset": [0, 10], "opacity": 0.2, "radius": 20 },
+            "to": {
+              "opacity": 1,
+              "translate": [0, -20],
+              "timing": [0, 0.15]
+            },
+            "loop": { "style": "wiggle", "delta": 3, "count": 0, "duration": 0.5 }
+          },
+          {
+            "id": "bubble",
+            "pos": ["72%", "18%"],
+            "w": 350,
+            "h": 120,
+            "bc": "white",
+            "cornerRadius": 24,
+            "opacity": 0,
+            "shadow": { "color": "black", "offset": [0, 4], "opacity": 0.1, "radius": 10 },
+            "to": {
+              "opacity": 1,
+              "scale": 1,
+              "timing": [0.1, 0.2]
+            },
+            "elements": [
+              {
+                "id": "bubble-text",
+                "x": 24,
+                "y": 20,
+                "w": 300,
+                "text": "こんにちは！ぼくマコロだよ！今日はみんなに会えてうれしいな！",
+                "fontSize": "20px",
+                "fontWeight": "bold",
+                "textColor": "#555"
+              }
+            ]
+          }
+        ],
+        "animation": { "fps": 24 }
+      }
+    }
+  ]
+}