@json-render/remotion 0.4.0 → 0.4.2

package/dist/index.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   standardComponents: () => standardComponents,
   standardEffectDefinitions: () => standardEffectDefinitions,
   standardTransitionDefinitions: () => standardTransitionDefinitions,
+  useMotion: () => useMotion,
   useTransition: () => useTransition
 });
 module.exports = __toCommonJS(index_exports);
@@ -61,8 +62,8 @@ function remotionPromptTemplate(context) {
   lines.push("");
   lines.push(`{"op":"set","path":"/composition","value":{"id":"intro","fps":30,"width":1920,"height":1080,"durationInFrames":300}}
 {"op":"set","path":"/tracks","value":[{"id":"main","name":"Main","type":"video","enabled":true},{"id":"overlay","name":"Overlay","type":"overlay","enabled":true}]}
-{"op":"set","path":"/clips/0","value":{"id":"clip-1","trackId":"main","component":"TitleCard","props":{"title":"Welcome","subtitle":"Getting Started"},"from":0,"durationInFrames":90,"transitionIn":{"type":"fade","durationInFrames":15},"transitionOut":{"type":"fade","durationInFrames":15}}}
-{"op":"set","path":"/clips/1","value":{"id":"clip-2","trackId":"main","component":"TitleCard","props":{"title":"Features"},"from":90,"durationInFrames":90}}
+{"op":"set","path":"/clips/0","value":{"id":"clip-1","trackId":"main","component":"TitleCard","props":{"title":"Welcome","subtitle":"Getting Started"},"from":0,"durationInFrames":90,"transitionIn":{"type":"fade","durationInFrames":15},"transitionOut":{"type":"fade","durationInFrames":15},"motion":{"enter":{"opacity":0,"y":50,"scale":0.9,"duration":25},"spring":{"damping":15}}}}
+{"op":"set","path":"/clips/1","value":{"id":"clip-2","trackId":"main","component":"TitleCard","props":{"title":"Features"},"from":90,"durationInFrames":90,"motion":{"enter":{"opacity":0,"x":-100,"duration":20},"exit":{"opacity":0,"x":100,"duration":15}}}}
 {"op":"set","path":"/audio","value":{"tracks":[]}}`);
   lines.push("");
   const catalogData = catalog;
@@ -87,6 +88,36 @@ function remotionPromptTemplate(context) {
     }
     lines.push("");
   }
+  lines.push("MOTION SYSTEM:");
+  lines.push(
+    "Clips can have a 'motion' field for declarative animations (optional, use for dynamic/engaging videos):"
+  );
+  lines.push("");
+  lines.push(
+    "- enter: {opacity?, scale?, x?, y?, rotate?, duration?} - animate FROM these values TO normal when clip starts"
+  );
+  lines.push(
+    "- exit: {opacity?, scale?, x?, y?, rotate?, duration?} - animate FROM normal TO these values when clip ends"
+  );
+  lines.push(
+    "- spring: {damping?, stiffness?, mass?} - physics config (lower damping = more bounce)"
+  );
+  lines.push(
+    '- loop: {property, from, to, duration, easing?} - continuous animation (property: "scale"|"rotate"|"x"|"y"|"opacity")'
+  );
+  lines.push("");
+  lines.push("Example motion configs:");
+  lines.push('  Fade up: {"enter":{"opacity":0,"y":30,"duration":20}}');
+  lines.push(
+    '  Scale pop: {"enter":{"scale":0.5,"opacity":0,"duration":15},"spring":{"damping":10}}'
+  );
+  lines.push(
+    '  Slide in/out: {"enter":{"x":-100,"duration":20},"exit":{"x":100,"duration":15}}'
+  );
+  lines.push(
+    '  Gentle pulse: {"loop":{"property":"scale","from":1,"to":1.05,"duration":60,"easing":"ease"}}'
+  );
+  lines.push("");
   lines.push("RULES:");
   const baseRules = [
     "Output ONLY JSONL patches - one JSON object per line, no markdown, no code fences",
@@ -97,7 +128,9 @@ function remotionPromptTemplate(context) {
     "ONLY use components listed above",
     "fps is always 30 (1 second = 30 frames, 10 seconds = 300 frames)",
     `Clips on "main" track flow sequentially (from = previous clip's from + durationInFrames)`,
-    'Overlay clips (LowerThird, TextOverlay) go on "overlay" track'
+    'Overlay clips (LowerThird, TextOverlay) go on "overlay" track',
+    "Use motion.enter for engaging clip entrances, motion.exit for smooth departures",
+    "Spring damping: 20=smooth, 10=bouncy, 5=very bouncy"
   ];
   const allRules = [...baseRules, ...customRules];
   allRules.forEach((rule, i) => {
@@ -159,6 +192,61 @@ var schema = (0, import_core.defineSchema)(
           transitionOut: s.object({
             type: s.ref("catalog.transitions"),
             durationInFrames: s.number()
+          }),
+          /** Declarative motion configuration for custom animations */
+          motion: s.object({
+            /** Enter animation - animates FROM these values TO neutral */
+            enter: s.object({
+              /** Starting opacity (0-1), animates to 1 */
+              opacity: s.number(),
+              /** Starting scale (e.g., 0.8 = 80%), animates to 1 */
+              scale: s.number(),
+              /** Starting X offset in pixels, animates to 0 */
+              x: s.number(),
+              /** Starting Y offset in pixels, animates to 0 */
+              y: s.number(),
+              /** Starting rotation in degrees, animates to 0 */
+              rotate: s.number(),
+              /** Duration of enter animation in frames (default: 20) */
+              duration: s.number()
+            }),
+            /** Exit animation - animates FROM neutral TO these values */
+            exit: s.object({
+              /** Ending opacity (0-1), animates from 1 */
+              opacity: s.number(),
+              /** Ending scale, animates from 1 */
+              scale: s.number(),
+              /** Ending X offset in pixels, animates from 0 */
+              x: s.number(),
+              /** Ending Y offset in pixels, animates from 0 */
+              y: s.number(),
+              /** Ending rotation in degrees, animates from 0 */
+              rotate: s.number(),
+              /** Duration of exit animation in frames (default: 20) */
+              duration: s.number()
+            }),
+            /** Spring physics configuration */
+            spring: s.object({
+              /** Damping coefficient (default: 20) */
+              damping: s.number(),
+              /** Stiffness (default: 100) */
+              stiffness: s.number(),
+              /** Mass (default: 1) */
+              mass: s.number()
+            }),
+            /** Continuous looping animation */
+            loop: s.object({
+              /** Property to animate: "scale" | "rotate" | "x" | "y" | "opacity" */
+              property: s.string(),
+              /** Starting value */
+              from: s.number(),
+              /** Ending value */
+              to: s.number(),
+              /** Duration of one cycle in frames */
+              duration: s.number(),
+              /** Easing type: "linear" | "ease" | "spring" (default: "ease") */
+              easing: s.string()
+            })
           })
         })
       ),
@@ -289,22 +377,158 @@ function useTransition(clip, frame) {
   }
   return { opacity, translateX, translateY, scale };
 }
+function useMotion(clip, frame) {
+  const { fps } = (0, import_remotion.useVideoConfig)();
+  const relativeFrame = frame - clip.from;
+  const clipEnd = clip.durationInFrames;
+  let opacity = 1;
+  let translateX = 0;
+  let translateY = 0;
+  let scale = 1;
+  let rotate = 0;
+  const motion = clip.motion;
+  if (!motion) {
+    return { opacity, translateX, translateY, scale, rotate };
+  }
+  const springConfig = {
+    damping: motion.spring?.damping ?? 20,
+    stiffness: motion.spring?.stiffness ?? 100,
+    mass: motion.spring?.mass ?? 1
+  };
+  if (motion.enter) {
+    const enterDuration = motion.enter.duration ?? 20;
+    if (relativeFrame < enterDuration) {
+      const progress = (0, import_remotion.spring)({
+        frame: relativeFrame,
+        fps,
+        config: springConfig,
+        durationInFrames: enterDuration
+      });
+      if (motion.enter.opacity !== void 0) {
+        opacity = (0, import_remotion.interpolate)(progress, [0, 1], [motion.enter.opacity, 1]);
+      }
+      if (motion.enter.scale !== void 0) {
+        scale = (0, import_remotion.interpolate)(progress, [0, 1], [motion.enter.scale, 1]);
+      }
+      if (motion.enter.x !== void 0) {
+        translateX = (0, import_remotion.interpolate)(progress, [0, 1], [motion.enter.x, 0]);
+      }
+      if (motion.enter.y !== void 0) {
+        translateY = (0, import_remotion.interpolate)(progress, [0, 1], [motion.enter.y, 0]);
+      }
+      if (motion.enter.rotate !== void 0) {
+        rotate = (0, import_remotion.interpolate)(progress, [0, 1], [motion.enter.rotate, 0]);
+      }
+    }
+  }
+  if (motion.exit) {
+    const exitDuration = motion.exit.duration ?? 20;
+    const exitStart = clipEnd - exitDuration;
+    if (relativeFrame >= exitStart) {
+      const exitFrame = relativeFrame - exitStart;
+      const progress = (0, import_remotion.spring)({
+        frame: exitFrame,
+        fps,
+        config: springConfig,
+        durationInFrames: exitDuration
+      });
+      if (motion.exit.opacity !== void 0) {
+        const exitOpacity = (0, import_remotion.interpolate)(
+          progress,
+          [0, 1],
+          [1, motion.exit.opacity]
+        );
+        opacity = Math.min(opacity, exitOpacity);
+      }
+      if (motion.exit.scale !== void 0) {
+        const exitScale = (0, import_remotion.interpolate)(progress, [0, 1], [1, motion.exit.scale]);
+        scale = scale * exitScale;
+      }
+      if (motion.exit.x !== void 0) {
+        const exitX = (0, import_remotion.interpolate)(progress, [0, 1], [0, motion.exit.x]);
+        translateX = translateX + exitX;
+      }
+      if (motion.exit.y !== void 0) {
+        const exitY = (0, import_remotion.interpolate)(progress, [0, 1], [0, motion.exit.y]);
+        translateY = translateY + exitY;
+      }
+      if (motion.exit.rotate !== void 0) {
+        const exitRotate = (0, import_remotion.interpolate)(
+          progress,
+          [0, 1],
+          [0, motion.exit.rotate]
+        );
+        rotate = rotate + exitRotate;
+      }
+    }
+  }
+  if (motion.loop) {
+    const { property, from, to, duration, easing = "ease" } = motion.loop;
+    const loopFrame = relativeFrame % duration;
+    let loopProgress;
+    switch (easing) {
+      case "linear":
+        loopProgress = loopFrame / duration;
+        break;
+      case "spring":
+        loopProgress = (0, import_remotion.spring)({
+          frame: loopFrame,
+          fps,
+          config: springConfig,
+          durationInFrames: duration
+        });
+        break;
+      case "ease":
+      default:
+        loopProgress = (0, import_remotion.interpolate)(
+          loopFrame,
+          [0, duration / 2, duration],
+          [0, 1, 0],
+          { extrapolateRight: "clamp" }
+        );
+        break;
+    }
+    const loopValue = (0, import_remotion.interpolate)(loopProgress, [0, 1], [from, to]);
+    switch (property) {
+      case "opacity":
+        opacity = opacity * loopValue;
+        break;
+      case "scale":
+        scale = scale * loopValue;
+        break;
+      case "x":
+        translateX = translateX + loopValue;
+        break;
+      case "y":
+        translateY = translateY + loopValue;
+        break;
+      case "rotate":
+        rotate = rotate + loopValue;
+        break;
+    }
+  }
+  return { opacity, translateX, translateY, scale, rotate };
+}
 
 // src/components/ClipWrapper.tsx
 var import_remotion2 = require("remotion");
 var import_jsx_runtime = require("react/jsx-runtime");
 function ClipWrapper({ clip, children }) {
   const frame = (0, import_remotion2.useCurrentFrame)();
-  const { opacity, translateX, translateY, scale } = useTransition(
-    clip,
-    frame + clip.from
-  );
+  const absoluteFrame = frame + clip.from;
+  const transition = useTransition(clip, absoluteFrame);
+  const motion = useMotion(clip, absoluteFrame);
+  const composedOpacity = transition.opacity * motion.opacity;
+  const composedTranslateX = transition.translateX + motion.translateX;
+  const composedTranslateY = transition.translateY + motion.translateY;
+  const composedScale = transition.scale * motion.scale;
+  const composedRotate = motion.rotate;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_remotion2.AbsoluteFill,
     {
       style: {
-        opacity,
-        transform: `translateX(${translateX}%) translateY(${translateY}%) scale(${scale})`
+        opacity: composedOpacity,
+        transform: `translateX(${composedTranslateX}%) translateY(${composedTranslateY}%) scale(${composedScale}) rotate(${composedRotate}deg)`
       },
       children
     }
@@ -420,13 +644,15 @@ function SplitScreen({ clip }) {
   ] }) });
 }
 function QuoteCard({ clip }) {
-  const { quote, author, backgroundColor } = clip.props;
+  const { quote, author, backgroundColor, textColor, transparent } = clip.props;
+  const bgColor = transparent ? "transparent" : backgroundColor || "#1a1a2e";
+  const color = textColor || "#ffffff";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     import_remotion3.AbsoluteFill,
     {
       style: {
-        backgroundColor: backgroundColor || "#1a1a2e",
-        color: "#ffffff",
+        backgroundColor: bgColor,
+        color,
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -441,7 +667,8 @@ function QuoteCard({ clip }) {
               fontSize: 48,
               fontStyle: "italic",
               textAlign: "center",
-              marginBottom: 24
+              marginBottom: 24,
+              textShadow: transparent ? "2px 2px 8px rgba(0,0,0,0.8)" : "none"
             },
             children: [
               "\u201C",
@@ -450,10 +677,20 @@ function QuoteCard({ clip }) {
             ]
           }
         ),
-        author && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: 28, opacity: 0.7 }, children: [
-          "- ",
-          author
-        ] })
+        author && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              fontSize: 28,
+              opacity: 0.9,
+              textShadow: transparent ? "1px 1px 4px rgba(0,0,0,0.8)" : "none"
+            },
+            children: [
+              "- ",
+              author
+            ]
+          }
+        )
       ]
     }
   ) });
@@ -753,11 +990,13 @@ var standardComponentDefinitions = {
     props: import_zod.z.object({
       quote: import_zod.z.string(),
       author: import_zod.z.string().nullable(),
-      backgroundColor: import_zod.z.string().nullable()
+      backgroundColor: import_zod.z.string().nullable(),
+      textColor: import_zod.z.string().nullable(),
+      transparent: import_zod.z.boolean().nullable()
     }),
     type: "scene",
     defaultDuration: 150,
-    description: "Quote display with attribution. Use for testimonials."
+    description: "Quote display with author. Props: quote, author, textColor, backgroundColor. Set transparent:true when using as overlay on images."
   },
   StatCard: {
     props: import_zod.z.object({
@@ -908,6 +1147,7 @@ var standardEffectDefinitions = {
   standardComponents,
   standardEffectDefinitions,
   standardTransitionDefinitions,
+  useMotion,
   useTransition
 });
 //# sourceMappingURL=index.js.map