mulmocast 2.4.1 → 2.4.2

package/assets/html/tailwind_animated.html

@@ -55,7 +55,7 @@
 
     // === MulmoAnimation Helper Class ===
 
-    const TRANSFORM_PROPS = { translateX: 'px', translateY: 'px', scale: '', rotate: 'deg' };
+    const TRANSFORM_PROPS = { translateX: 'px', translateY: 'px', scale: '', rotate: 'deg', rotateX: 'deg', rotateY: 'deg', rotateZ: 'deg' };
     const SVG_PROPS = ['r', 'cx', 'cy', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'rx', 'ry',
                        'width', 'height', 'stroke-width', 'stroke-dashoffset', 'stroke-dasharray', 'opacity'];
 
@@ -176,7 +176,7 @@
 
         if (entry.kind === 'animate') {
           const startFrame = (opts.start || 0) * fps;
-          const endFrame = (opts.end || 0) * fps;
+          const endFrame = (opts.end === 'auto' ? window.__MULMO.totalFrames / fps : (opts.end || 0)) * fps;
           const progress = Math.max(0, Math.min(1, endFrame === startFrame ? 1 : (frame - startFrame) / (endFrame - startFrame)));
           const el = document.querySelector(entry.selector);
           this._applyProps(el, entry.props, progress, easingFn);
@@ -196,7 +196,7 @@
 
         } else if (entry.kind === 'typewriter') {
           const twStart = (opts.start || 0) * fps;
-          const twEnd = (opts.end || 0) * fps;
+          const twEnd = (opts.end === 'auto' ? window.__MULMO.totalFrames / fps : (opts.end || 0)) * fps;
           const twProgress = Math.max(0, Math.min(1, twEnd === twStart ? 1 : (frame - twStart) / (twEnd - twStart)));
           const charCount = Math.floor(twProgress * entry.text.length);
           const twEl = document.querySelector(entry.selector);
@@ -204,7 +204,7 @@
 
         } else if (entry.kind === 'counter') {
           const cStart = (opts.start || 0) * fps;
-          const cEnd = (opts.end || 0) * fps;
+          const cEnd = (opts.end === 'auto' ? window.__MULMO.totalFrames / fps : (opts.end || 0)) * fps;
           const cProgress = Math.max(0, Math.min(1, cEnd === cStart ? 1 : (frame - cStart) / (cEnd - cStart)));
           const cVal = entry.range[0] + easingFn(cProgress) * (entry.range[1] - entry.range[0]);
           const decimals = opts.decimals || 0;
@@ -214,7 +214,7 @@
 
         } else if (entry.kind === 'codeReveal') {
           const crStart = (opts.start || 0) * fps;
-          const crEnd = (opts.end || 0) * fps;
+          const crEnd = (opts.end === 'auto' ? window.__MULMO.totalFrames / fps : (opts.end || 0)) * fps;
           const crProgress = Math.max(0, Math.min(1, crEnd === crStart ? 1 : (frame - crStart) / (crEnd - crStart)));
           const lineCount = Math.floor(crProgress * entry.lines.length);
           const crEl = document.querySelector(entry.selector);

package/lib/actions/image_agents.js

@@ -123,7 +123,9 @@ export const imagePluginAgent = async (namedInputs) => {
     const effectiveImagePath = isAnimatedHtml ? getBeatAnimatedVideoPath(context, index) : imagePath;
     try {
         MulmoStudioContextMethods.setBeatSessionState(context, "image", index, beat.id, true);
-        const processorParams = { beat, context, imagePath: effectiveImagePath, imageRefs, ...htmlStyle(context, beat) };
+        const studioBeat = context.studio.beats[index];
+        const beatDuration = beat.duration ?? studioBeat?.duration;
+        const processorParams = { beat, context, imagePath: effectiveImagePath, imageRefs, beatDuration, ...htmlStyle(context, beat) };
         await plugin.process(processorParams);
         MulmoStudioContextMethods.setBeatSessionState(context, "image", index, beat.id, false);
     }

package/lib/types/type.d.ts

@@ -84,6 +84,7 @@ export type ImageProcessorParams = {
     textSlideStyle: string;
     canvasSize: MulmoCanvasDimension;
     imageRefs?: Record<string, string>;
+    beatDuration?: number;
 };
 export type PDFMode = (typeof pdf_modes)[number];
 export type PDFSize = (typeof pdf_sizes)[number];

package/lib/utils/image_plugins/html_tailwind.js

@@ -34,9 +34,9 @@ const processHtmlTailwindAnimated = async (params) => {
     const animConfig = getAnimationConfig(params);
     if (!animConfig)
         return;
-    const duration = beat.duration;
+    const duration = params.beatDuration ?? beat.duration;
     if (duration === undefined) {
-        throw new Error("html_tailwind animation requires explicit beat.duration. Set duration in the beat definition.");
+        throw new Error("html_tailwind animation requires beat.duration or audio-derived duration. Set duration in the beat or ensure audio is generated first.");
     }
     const fps = animConfig.fps;
     const totalFrames = Math.floor(duration * fps);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",

package/scripts/test/test_html_animation.json

@@ -546,6 +546,83 @@
         "animation": { "fps": 24 }
       }
     },
+    {
+      "id": "demo_3d_card_flip",
+      "speaker": "Presenter",
+      "duration": 3,
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full flex items-center justify-center bg-gradient-to-br from-slate-900 to-indigo-950'>",
+          "  <div style='perspective:1000px'>",
+          "    <div id='card' class='relative' style='width:340px;height:200px;transform-style:preserve-3d'>",
+          "      <div class='absolute inset-0 rounded-2xl flex flex-col items-center justify-center' style='backface-visibility:hidden;background:linear-gradient(135deg,#3b82f6,#06b6d4);box-shadow:0 20px 60px rgba(6,182,212,0.3)'>",
+          "        <p class='text-white text-3xl font-bold tracking-wide'>MulmoCast</p>",
+          "        <p class='text-blue-200 text-sm mt-2 tracking-wider'>FRONT SIDE</p>",
+          "      </div>",
+          "      <div class='absolute inset-0 rounded-2xl flex flex-col items-center justify-center' style='backface-visibility:hidden;transform:rotateY(180deg);background:linear-gradient(135deg,#8b5cf6,#ec4899);box-shadow:0 20px 60px rgba(139,92,246,0.3)'>",
+          "        <p class='text-white text-3xl font-bold tracking-wide'>AI-Native</p>",
+          "        <p class='text-purple-200 text-sm mt-2 tracking-wider'>BACK SIDE</p>",
+          "      </div>",
+          "    </div>",
+          "  </div>",
+          "</div>"
+        ],
+        "script": [
+          "const animation = new MulmoAnimation();",
+          "animation.animate('#card', { rotateY: [0, 180] }, { start: 0.5, end: 2.5, easing: 'easeInOut' });"
+        ],
+        "animation": true
+      }
+    },
+    {
+      "id": "demo_3d_title_reveal",
+      "speaker": "Presenter",
+      "duration": 3,
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full flex flex-col items-center justify-center bg-black' style='perspective:800px'>",
+          "  <h1 id='title' class='text-7xl font-bold tracking-wider' style='opacity:0;font-family:Impact,sans-serif;color:white;text-shadow:0 0 40px rgba(6,182,212,0.5)'>CINEMATIC</h1>",
+          "  <div id='line' class='h-0.5 mt-6 rounded' style='width:0;background:linear-gradient(90deg,transparent,#06b6d4,transparent)'></div>",
+          "  <p id='sub' class='text-lg mt-6 tracking-[0.4em]' style='opacity:0;color:#64748b;font-family:monospace'>3D PERSPECTIVE REVEAL</p>",
+          "</div>"
+        ],
+        "script": [
+          "const animation = new MulmoAnimation();",
+          "animation.animate('#title', { opacity: [0, 1], rotateX: [90, 0] }, { start: 0.2, end: 1.2, easing: 'easeOut' });",
+          "animation.animate('#line', { width: [0, 400, 'px'] }, { start: 1.0, end: 1.8, easing: 'easeOut' });",
+          "animation.animate('#sub', { opacity: [0, 1] }, { start: 1.5, end: 2.2, easing: 'easeOut' });"
+        ],
+        "animation": true
+      }
+    },
+    {
+      "id": "demo_split_reveal",
+      "speaker": "Presenter",
+      "duration": 3,
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full flex bg-black overflow-hidden'>",
+          "  <div id='left' class='flex-1 flex items-center justify-center' style='background:linear-gradient(135deg,#1e3a5f,#0f172a);opacity:0'>",
+          "    <p class='text-6xl font-bold text-white' style='font-family:Georgia,serif'>Create</p>",
+          "  </div>",
+          "  <div id='divider' class='w-1' style='background:linear-gradient(to bottom,transparent,#06b6d4,transparent);opacity:0'></div>",
+          "  <div id='right' class='flex-1 flex items-center justify-center' style='background:linear-gradient(225deg,#4c1d95,#0f172a);opacity:0'>",
+          "    <p class='text-6xl font-bold text-white' style='font-family:Georgia,serif'>Inspire</p>",
+          "  </div>",
+          "</div>"
+        ],
+        "script": [
+          "const animation = new MulmoAnimation();",
+          "animation.animate('#left', { translateX: [-640, 0], opacity: [0, 1] }, { start: 0, end: 1.0, easing: 'easeOut' });",
+          "animation.animate('#right', { translateX: [640, 0], opacity: [0, 1] }, { start: 0.3, end: 1.3, easing: 'easeOut' });",
+          "animation.animate('#divider', { opacity: [0, 1] }, { start: 1.2, end: 1.8 });"
+        ],
+        "animation": true
+      }
+    },
     {
       "speaker": "Presenter",
       "duration": 2,