mulmocast 2.5.0 → 2.6.0

package/lib/types/schema.d.ts

@@ -372,14 +372,16 @@ export declare const mulmoMermaidMediaSchema: z.ZodObject<{
         opacity: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strip>]>>>;
 }, z.core.$strict>;
+export declare const swipeElementSchema: z.ZodType;
 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">;
-    html: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+    html: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
     script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+    elements: z.ZodOptional<z.ZodArray<z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>>;
     animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
         fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
         movie: z.ZodOptional<z.ZodBoolean>;
@@ -551,8 +553,9 @@ export declare const mulmoImageAssetSchema: z.ZodUnion<readonly [z.ZodObject<{
     }, z.core.$strip>]>>>;
 }, z.core.$strict>, z.ZodObject<{
     type: z.ZodLiteral<"html_tailwind">;
-    html: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+    html: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
     script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+    elements: z.ZodOptional<z.ZodArray<z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>>;
     animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
         fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
         movie: z.ZodOptional<z.ZodBoolean>;
@@ -3621,8 +3624,9 @@ export declare const mulmoBeatSchema: z.ZodObject<{
         }, z.core.$strip>]>>>;
     }, z.core.$strict>, z.ZodObject<{
         type: z.ZodLiteral<"html_tailwind">;
-        html: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+        html: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
         script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+        elements: z.ZodOptional<z.ZodArray<z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>>;
         animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
             fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
             movie: z.ZodOptional<z.ZodBoolean>;
@@ -7428,8 +7432,9 @@ export declare const mulmoScriptSchema: z.ZodObject<{
             }, z.core.$strip>]>>>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"html_tailwind">;
-            html: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+            html: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
             script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+            elements: z.ZodOptional<z.ZodArray<z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>>;
             animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
                 fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
                 movie: z.ZodOptional<z.ZodBoolean>;
@@ -10850,8 +10855,9 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                 }, z.core.$strip>]>>>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"html_tailwind">;
-                html: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+                html: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
                 script: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+                elements: z.ZodOptional<z.ZodArray<z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>>;
                 animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<true>, z.ZodObject<{
                     fps: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
                     movie: z.ZodOptional<z.ZodBoolean>;

package/lib/types/schema.js

@@ -194,6 +194,72 @@ export const mulmoMermaidMediaSchema = z
     backgroundImage: backgroundImageSchema,
 })
     .strict();
+// Swipe-inspired element animation schemas
+const swipePositionValue = z.union([z.number(), z.string()]);
+const swipeTransitionSchema = z
+    .object({
+    opacity: z.number().min(0).max(1).optional(),
+    rotate: z.number().optional(),
+    scale: z.union([z.number(), z.tuple([z.number(), z.number()])]).optional(),
+    translate: z.tuple([z.number(), z.number()]).optional(),
+    bc: z.string().optional(),
+    timing: z.tuple([z.number(), z.number()]).default([0, 1]).optional().describe("Animation timing [start, end] as ratio 0.0-1.0 of beat duration"),
+})
+    .strict();
+const swipeLoopSchema = z
+    .object({
+    style: z.enum(["vibrate", "blink", "wiggle", "spin", "shift", "bounce", "pulse"]),
+    count: z.number().optional().describe("Number of loop iterations. 0 = infinite"),
+    delta: z.number().optional().describe("Distance for vibrate / angle for wiggle"),
+    duration: z.number().optional().describe("Duration of one cycle in seconds"),
+    direction: z.enum(["n", "s", "e", "w"]).optional().describe("Direction for shift animation"),
+    clockwise: z.boolean().optional().describe("Spin direction. Default: true"),
+})
+    .strict();
+const swipeShadowSchema = z
+    .object({
+    color: z.string().optional().default("black"),
+    offset: z.tuple([z.number(), z.number()]).optional().default([1, 1]),
+    opacity: z.number().optional().default(0.5),
+    radius: z.number().optional().default(1),
+})
+    .strict();
+export const swipeElementSchema = z.lazy(() => z
+    .object({
+    id: z.string().optional(),
+    // Position & size
+    x: swipePositionValue.optional(),
+    y: swipePositionValue.optional(),
+    w: swipePositionValue.optional(),
+    h: swipePositionValue.optional(),
+    pos: z.tuple([swipePositionValue, swipePositionValue]).optional().describe("Position by anchor point [x, y]"),
+    // Visual
+    bc: z.string().optional().describe("Background color"),
+    opacity: z.number().min(0).max(1).optional(),
+    rotate: z.number().optional(),
+    scale: z.union([z.number(), z.tuple([z.number(), z.number()])]).optional(),
+    translate: z.tuple([z.number(), z.number()]).optional(),
+    cornerRadius: z.number().optional(),
+    borderWidth: z.number().optional(),
+    borderColor: z.string().optional(),
+    shadow: swipeShadowSchema.optional(),
+    clip: z.boolean().optional(),
+    // Content
+    text: z.string().optional(),
+    fontSize: z.union([z.number(), z.string()]).optional(),
+    fontWeight: z.string().optional(),
+    textColor: z.string().optional(),
+    textAlign: z.enum(["center", "left", "right"]).optional(),
+    lineHeight: z.union([z.number(), z.string()]).optional(),
+    img: z.string().optional().describe("Image URL or image:ref"),
+    imgFit: z.enum(["contain", "cover", "fill"]).optional().default("contain"),
+    // Animation
+    to: swipeTransitionSchema.optional().describe("Transition animation"),
+    loop: swipeLoopSchema.optional().describe("Loop animation"),
+    // Children
+    elements: z.array(z.lazy(() => swipeElementSchema)).optional(),
+})
+    .strict());
 export const htmlTailwindAnimationSchema = z.union([
     z.literal(true),
     z.object({
@@ -204,8 +270,12 @@ export const htmlTailwindAnimationSchema = z.union([
 export const mulmoHtmlTailwindMediaSchema = z
     .object({
     type: z.literal("html_tailwind"),
-    html: stringOrStringArray,
+    html: stringOrStringArray.optional(),
     script: stringOrStringArray.optional().describe("JavaScript code for the beat. Injected as a <script> tag after html. Use for render() function etc."),
+    elements: z
+        .array(swipeElementSchema)
+        .optional()
+        .describe("Swipe-style declarative animation elements. Converted to HTML + render() automatically. Use this OR html, not both."),
     animation: htmlTailwindAnimationSchema
         .optional()
         .describe("Enable frame-based animation (Remotion-style). true for defaults (30fps), or { fps: N } for custom frame rate."),

package/lib/utils/context.d.ts

@@ -1725,8 +1725,9 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                 } | null | undefined;
             } | {
                 type: "html_tailwind";
-                html: string | string[];
+                html?: string | string[] | undefined;
                 script?: string | string[] | undefined;
+                elements?: unknown[] | undefined;
                 animation?: true | {
                     fps: number;
                     movie?: boolean | undefined;
@@ -3824,8 +3825,9 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                     } | null | undefined;
                 } | {
                     type: "html_tailwind";
-                    html: string | string[];
+                    html?: string | string[] | undefined;
                     script?: string | string[] | undefined;
+                    elements?: unknown[] | undefined;
                     animation?: true | {
                         fps: number;
                         movie?: boolean | undefined;

package/lib/utils/image_plugins/html_tailwind.js

@@ -5,6 +5,7 @@ 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,9 +87,9 @@ 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"),
@@ -106,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),
@@ -129,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.5.0",
+  "version": "2.6.0",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",

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
+    }
+  ]
+}