@remotion/promo-pages 4.0.478 → 4.0.479

package/dist/design.js

@@ -5565,7 +5565,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.478";
+var VERSION = "4.0.479";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5928,10 +5928,7 @@ var Freeze = ({
     })
   });
 };
-var PremountContext = createContext14({
-  premountFramesRemaining: 0
-});
-var sequenceVisualStyleSchema = {
+var transformSchema = {
   "style.transformOrigin": {
     type: "transform-origin",
     step: 1,
@@ -5967,7 +5964,8 @@ var sequenceVisualStyleSchema = {
     hiddenFromList: false
   }
 };
-var sequencePremountSchema = {
+var sequenceVisualStyleSchema = transformSchema;
+var premountSchema = {
   premountFor: {
     type: "number",
     default: 0,
@@ -5990,9 +5988,10 @@ var sequencePremountSchema = {
     type: "hidden"
   }
 };
+var sequencePremountSchema = premountSchema;
 var sequenceStyleSchema = {
-  ...sequenceVisualStyleSchema,
-  ...sequencePremountSchema
+  ...transformSchema,
+  ...premountSchema
 };
 var hiddenField = {
   type: "boolean",
@@ -6030,12 +6029,16 @@ var freezeField = {
   step: 1,
   hiddenFromList: true
 };
-var sequenceSchema = extendSchemaWithSequenceName({
-  hidden: hiddenField,
-  showInTimeline: showInTimelineField,
+var baseSchema = {
+  durationInFrames: durationInFramesField,
   from: fromField,
   freeze: freezeField,
-  durationInFrames: durationInFramesField,
+  hidden: hiddenField,
+  name: sequenceNameField,
+  showInTimeline: showInTimelineField
+};
+var sequenceSchema = {
+  ...baseSchema,
   layout: {
     type: "enum",
     default: "absolute-fill",
@@ -6045,14 +6048,18 @@ var sequenceSchema = extendSchemaWithSequenceName({
       none: {}
     }
   }
-});
-var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
-  hidden: hiddenField,
-  showInTimeline: showInTimelineField,
-  freeze: freezeField,
+};
+var baseSchemaWithoutFrom = {
   durationInFrames: durationInFramesField,
+  freeze: freezeField,
+  hidden: hiddenField,
+  name: sequenceNameField,
+  showInTimeline: showInTimelineField
+};
+var sequenceSchemaWithoutFrom = {
+  ...baseSchemaWithoutFrom,
   layout: sequenceSchema.layout
-});
+};
 var sequenceSchemaDefaultLayoutNone = {
   ...sequenceSchema,
   layout: {
@@ -6060,6 +6067,9 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
+var PremountContext = createContext14({
+  premountFramesRemaining: 0
+});
 var SequenceManager = React11.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -7744,10 +7754,21 @@ var interpolateColors = (input, inputRange, outputRange, options) => {
   return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
 };
 var easingToFn = (e) => {
-  if (e === "linear") {
-    return Easing.linear;
+  switch (e.type) {
+    case "linear":
+      return Easing.linear;
+    case "spring":
+      return Easing.spring({
+        damping: e.damping,
+        mass: e.mass,
+        overshootClamping: e.overshootClamping,
+        stiffness: e.stiffness
+      });
+    case "bezier":
+      return bezier(e.x1, e.y1, e.x2, e.y2);
+    default:
+      throw new TypeError(`Unsupported easing: ${JSON.stringify(e)}`);
   }
-  return bezier(e[0], e[1], e[2], e[3]);
 };
 var interpolateKeyframedStatus = ({
   frame,
@@ -8069,6 +8090,9 @@ var findPropsToDelete = ({
   }
   return [...otherKeys];
 };
+var DEFAULT_LINEAR_EASING = {
+  type: "linear"
+};
 var makeStaticDragOverride = (value) => {
   return { type: "static", value };
 };
@@ -8081,7 +8105,7 @@ var makeKeyframedDragOverride = ({
   const keyframes = existingIndex === -1 ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame) : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
   const easing = [...status.easing];
   while (easing.length < keyframes.length - 1) {
-    easing.push("linear");
+    easing.push(DEFAULT_LINEAR_EASING);
   }
   if (easing.length > keyframes.length - 1) {
     easing.length = keyframes.length - 1;
@@ -8239,7 +8263,7 @@ var mergeValues = ({
   return merged;
 };
 var stackToOverrideMap = {};
-var wrapInSchema = ({
+var withInteractivitySchema = ({
   Component,
   componentIdentity,
   schema,
@@ -8253,7 +8277,7 @@ var wrapInSchema = ({
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
       return React13.createElement(Component, {
         ...props,
-        _experimentalControls: null,
+        controls: null,
         ref
       });
     }
@@ -8261,7 +8285,7 @@ var wrapInSchema = ({
     const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
-    if (props._experimentalControls) {
+    if (props.controls) {
       return React13.createElement(Component, {
         ...props,
         ref
@@ -8316,11 +8340,11 @@ var wrapInSchema = ({
     });
     return React13.createElement(Component, {
       ...mergedProps,
-      _experimentalControls: controls,
+      controls,
       ref
     });
   });
-  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
+  Wrapped.displayName = `withInteractivitySchema(${Component.displayName || Component.name || "Component"})`;
   return Wrapped;
 };
 var EMPTY_EFFECTS = [];
@@ -8334,7 +8358,7 @@ var RegularSequenceRefForwardingFunction = ({
   width,
   showInTimeline = true,
   hidden = false,
-  _experimentalControls: controls,
+  controls,
   _remotionInternalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
@@ -8342,7 +8366,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
-  _remotionInternalRefForOutline: passedRefForOutline,
+  outlineRef: passedRefForOutline,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -8669,13 +8693,13 @@ var SequenceRefForwardingFunction = (props, ref) => {
 };
 var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
 var SequenceWithoutSchema = SequenceInner;
-var Sequence = wrapInSchema({
+var Sequence = withInteractivitySchema({
   Component: SequenceInner,
   componentIdentity: "dev.remotion.remotion.Sequence",
   schema: sequenceSchema,
   supportsEffects: false
 });
-var SequenceWithoutFrom = wrapInSchema({
+var SequenceWithoutFrom = withInteractivitySchema({
   Component: SequenceInner,
   componentIdentity: null,
   schema: sequenceSchemaWithoutFrom,
@@ -9214,9 +9238,7 @@ var resolveAnimatedImageSource = (src) => {
   return new URL(src, window.origin).href;
 };
 var animatedImageSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
+  ...baseSchema,
   playbackRate: {
     type: "number",
     min: 0,
@@ -9227,8 +9249,7 @@ var animatedImageSchema = {
     hiddenFromList: false,
     keyframable: false
   },
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...transformSchema
 };
 var AnimatedImageContent = forwardRef4(({
   src,
@@ -9373,7 +9394,7 @@ var AnimatedImageInner = ({
   durationInFrames,
   requestInit,
   effects = [],
-  _experimentalControls: controls,
+  controls,
   ref,
   ...sequenceProps
 }) => {
@@ -9402,10 +9423,10 @@ var AnimatedImageInner = ({
     durationInFrames: resolvedDuration,
     name: "<AnimatedImage>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
-    _remotionInternalRefForOutline: actualRef,
+    outlineRef: actualRef,
     children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
       ...animatedImageProps,
       ref: actualRef,
@@ -9414,7 +9435,7 @@ var AnimatedImageInner = ({
     })
   });
 };
-var AnimatedImage = wrapInSchema({
+var AnimatedImage = withInteractivitySchema({
   Component: AnimatedImageInner,
   componentIdentity: "dev.remotion.remotion.AnimatedImage",
   schema: animatedImageSchema,
@@ -9422,6 +9443,36 @@ var AnimatedImage = wrapInSchema({
 });
 AnimatedImage.displayName = "AnimatedImage";
 addSequenceStackTraces(AnimatedImage);
+var disabledEffectField = {
+  type: "boolean",
+  default: false,
+  description: "Disabled"
+};
+var createEffect = (definition) => {
+  const { calculateKey: userCalculateKey, validateParams } = definition;
+  const widened = {
+    ...definition,
+    documentationLink: definition.documentationLink ?? null,
+    calculateKey: (params) => {
+      const disabled = params.disabled ?? false;
+      return `${userCalculateKey(params)}-disabled-${disabled}`;
+    },
+    schema: {
+      disabled: disabledEffectField,
+      ...definition.schema
+    }
+  };
+  const factory = (params = {}) => {
+    validateParams(params);
+    return {
+      definition: widened,
+      params,
+      effectKey: widened.calculateKey(params),
+      memoized: false
+    };
+  };
+  return factory;
+};
 var validateArtifactFilename = (filename) => {
   if (typeof filename !== "string") {
     throw new TypeError(`The "filename" must be a string, but you passed a value of type ${typeof filename}`);
@@ -12367,9 +12418,7 @@ var resolveSolidPixelDensity = (pixelDensity) => {
   return pixelDensity;
 };
 var solidSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
+  ...baseSchema,
   color: {
     type: "color",
     default: "transparent",
@@ -12391,8 +12440,7 @@ var solidSchema = {
     description: "Height",
     hiddenFromList: false
   },
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...transformSchema
 };
 var SolidInner = ({
   color,
@@ -12499,7 +12547,7 @@ var SolidInner = ({
 };
 var SolidOuter = forwardRef8(({
   effects = [],
-  _experimentalControls: controls,
+  controls,
   color,
   height,
   width,
@@ -12525,11 +12573,11 @@ var SolidOuter = forwardRef8(({
     freeze,
     hidden,
     showInTimeline,
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
     name: name ?? "<Solid>",
-    _remotionInternalRefForOutline: actualRef,
+    outlineRef: actualRef,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid",
     ...props2,
     children: /* @__PURE__ */ jsx24(SolidInner, {
@@ -12545,7 +12593,7 @@ var SolidOuter = forwardRef8(({
     })
   });
 });
-var Solid = wrapInSchema({
+var Solid = withInteractivitySchema({
   Component: SolidOuter,
   componentIdentity: "dev.remotion.remotion.Solid",
   schema: solidSchema,
@@ -12822,7 +12870,7 @@ var HtmlInCanvasInner = forwardRef9(({
   onPaint,
   onInit,
   pixelDensity,
-  _experimentalControls: controls,
+  controls,
   style,
   durationInFrames,
   name,
@@ -12844,9 +12892,9 @@ var HtmlInCanvasInner = forwardRef9(({
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas",
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
-    _remotionInternalRefForOutline: actualRef,
+    outlineRef: actualRef,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx25(HtmlInCanvasContent, {
@@ -12865,13 +12913,10 @@ var HtmlInCanvasInner = forwardRef9(({
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...baseSchema,
+  ...transformSchema
 };
-var HtmlInCanvasWrapped = wrapInSchema({
+var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
   componentIdentity: "dev.remotion.remotion.HtmlInCanvas",
   schema: htmlInCanvasSchema,
@@ -12889,9 +12934,7 @@ function truncateSrcForLabel(src) {
   return src;
 }
 var canvasImageSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
+  ...baseSchema,
   fit: {
     type: "enum",
     default: "fill",
@@ -12902,8 +12945,7 @@ var canvasImageSchema = {
       cover: {}
     }
   },
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...transformSchema
 };
 var makeAbortError = () => {
   if (typeof DOMException !== "undefined") {
@@ -12984,6 +13026,7 @@ var CanvasImageContent = forwardRef10(({
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { delayPlayback } = useBufferState();
   const [outputCanvas, setOutputCanvas] = useState16(null);
+  const [loadedImage, setLoadedImage] = useState16(null);
   const actualSrc = usePreload(src);
   const chainState = useEffectChainState();
   const memoizedEffects = useMemoizedEffects({
@@ -13009,9 +13052,6 @@ var CanvasImageContent = forwardRef10(({
     }
   }, [ref, refForOutline]);
   useEffect17(() => {
-    if (!outputCanvas || !sourceCanvas) {
-      return;
-    }
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
@@ -13026,6 +13066,7 @@ var CanvasImageContent = forwardRef10(({
     let continued = false;
     let errorCount = 0;
     let timeoutId = null;
+    setLoadedImage(null);
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -13039,30 +13080,9 @@ var CanvasImageContent = forwardRef10(({
         if (cancelled) {
           return;
         }
-        const canvasWidth = width ?? image.width;
-        const canvasHeight = height ?? image.height;
-        const sourceContext = sourceCanvas.getContext("2d", {
-          colorSpace: "srgb"
-        });
-        if (!sourceContext) {
-          throw new Error("Could not get 2D context for <CanvasImage> source canvas");
-        }
-        sourceCanvas.width = canvasWidth;
-        sourceCanvas.height = canvasHeight;
-        outputCanvas.width = canvasWidth;
-        outputCanvas.height = canvasHeight;
-        sourceContext.clearRect(0, 0, canvasWidth, canvasHeight);
-        sourceContext.drawImage(image.element, ...calculateImageFit(fit, { width: image.width, height: image.height }, { width: canvasWidth, height: canvasHeight }));
-        return runEffectChain({
-          state: chainState.get(canvasWidth, canvasHeight),
-          source: sourceCanvas,
-          effects: memoizedEffects,
-          output: outputCanvas,
-          width: canvasWidth,
-          height: canvasHeight
-        });
-      }).then((completed) => {
-        if (completed && !cancelled) {
+        setLoadedImage(image);
+      }).then(() => {
+        if (!cancelled) {
           continueRenderOnce();
         }
       }).catch((err) => {
@@ -13099,21 +13119,87 @@ var CanvasImageContent = forwardRef10(({
   }, [
     actualSrc,
     cancelRender2,
-    chainState,
     continueRender2,
     delayPlayback,
     delayRender2,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
+    maxRetries,
+    onError,
+    pauseWhenLoading,
+    sequenceContext?.postmounting,
+    sequenceContext?.premounting
+  ]);
+  useEffect17(() => {
+    if (!loadedImage || !outputCanvas || !sourceCanvas) {
+      return;
+    }
+    const handle = delayRender2(`Applying effects to <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`);
+    let cancelled = false;
+    let continued = false;
+    const continueRenderOnce = () => {
+      if (continued) {
+        return;
+      }
+      continued = true;
+      continueRender2(handle);
+    };
+    const canvasWidth = width ?? loadedImage.width;
+    const canvasHeight = height ?? loadedImage.height;
+    const sourceContext = sourceCanvas.getContext("2d", {
+      colorSpace: "srgb"
+    });
+    if (!sourceContext) {
+      cancelRender2(new Error("Could not get 2D context for <CanvasImage> source canvas"));
+      continueRenderOnce();
+      return () => {
+        continueRenderOnce();
+      };
+    }
+    sourceCanvas.width = canvasWidth;
+    sourceCanvas.height = canvasHeight;
+    outputCanvas.width = canvasWidth;
+    outputCanvas.height = canvasHeight;
+    sourceContext.clearRect(0, 0, canvasWidth, canvasHeight);
+    sourceContext.drawImage(loadedImage.element, ...calculateImageFit(fit, { width: loadedImage.width, height: loadedImage.height }, { width: canvasWidth, height: canvasHeight }));
+    runEffectChain({
+      state: chainState.get(canvasWidth, canvasHeight),
+      source: sourceCanvas,
+      effects: memoizedEffects,
+      output: outputCanvas,
+      width: canvasWidth,
+      height: canvasHeight
+    }).then((completed) => {
+      if (completed && !cancelled) {
+        continueRenderOnce();
+      }
+    }).catch((err) => {
+      if (cancelled) {
+        return;
+      }
+      if (onError) {
+        onError(err);
+        continueRenderOnce();
+      } else {
+        cancelRender2(err);
+      }
+    });
+    return () => {
+      cancelled = true;
+      continueRenderOnce();
+    };
+  }, [
+    actualSrc,
+    cancelRender2,
+    chainState,
+    continueRender2,
+    delayRender2,
     fit,
     height,
-    maxRetries,
+    loadedImage,
     memoizedEffects,
     onError,
     outputCanvas,
-    pauseWhenLoading,
-    sequenceContext?.postmounting,
-    sequenceContext?.premounting,
     sourceCanvas,
     width
   ]);
@@ -13149,9 +13235,9 @@ var CanvasImageInner = forwardRef10(({
   name,
   showInTimeline,
   stack,
-  _experimentalControls: controls,
+  controls,
   _remotionInternalDocumentationLink,
-  _remotionInternalRefForOutline,
+  outlineRef,
   ...canvasProps
 }, ref) => {
   if (!src) {
@@ -13171,11 +13257,11 @@ var CanvasImageInner = forwardRef10(({
     showInTimeline: showInTimeline ?? true,
     name: name ?? "<CanvasImage>",
     _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     _remotionInternalIsMedia: { type: "image", src },
     _remotionInternalStack: stack,
-    _remotionInternalRefForOutline: _remotionInternalRefForOutline ?? actualRef,
+    outlineRef: outlineRef ?? actualRef,
     children: /* @__PURE__ */ jsx26(CanvasImageContent, {
       ref: actualRef,
       src,
@@ -13192,12 +13278,12 @@ var CanvasImageInner = forwardRef10(({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      refForOutline: _remotionInternalRefForOutline ?? null,
+      refForOutline: outlineRef ?? null,
       ...canvasProps
     })
   });
 });
-var CanvasImage = wrapInSchema({
+var CanvasImage = withInteractivitySchema({
   Component: CanvasImageInner,
   componentIdentity: "dev.remotion.remotion.CanvasImage",
   schema: canvasImageSchema,
@@ -13402,8 +13488,8 @@ var NativeImgInner = ({
   from,
   durationInFrames,
   freeze,
-  _experimentalControls: controls,
-  _remotionInternalRefForOutline: refForOutline,
+  controls,
+  outlineRef: refForOutline,
   ...props2
 }) => {
   if (!src) {
@@ -13418,10 +13504,10 @@ var NativeImgInner = ({
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
     _remotionInternalIsMedia: { type: "image", src },
     name: name ?? "<Img>",
-    _experimentalControls: controls,
+    controls,
     showInTimeline: showInTimeline ?? true,
     hidden,
-    _remotionInternalRefForOutline: refForOutline,
+    outlineRef: refForOutline,
     children: /* @__PURE__ */ jsx28(ImgContent, {
       src,
       refForOutline,
@@ -13431,11 +13517,8 @@ var NativeImgInner = ({
 };
 var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...baseSchema,
+  ...transformSchema
 };
 var imgCanvasFallbackIncompatibleProps = new Set([
   "alt",
@@ -13490,7 +13573,7 @@ var ImgInner = ({
   from,
   durationInFrames,
   freeze,
-  _experimentalControls: controls,
+  controls,
   width,
   height,
   className,
@@ -13515,7 +13598,7 @@ var ImgInner = ({
       from,
       durationInFrames,
       freeze,
-      _experimentalControls: controls,
+      controls,
       width,
       height,
       className,
@@ -13525,7 +13608,7 @@ var ImgInner = ({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      _remotionInternalRefForOutline: refForOutline
+      outlineRef: refForOutline
     });
   }
   if (!src) {
@@ -13562,12 +13645,12 @@ var ImgInner = ({
     showInTimeline,
     stack,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
-    _experimentalControls: controls,
-    _remotionInternalRefForOutline: refForOutline,
+    controls,
+    outlineRef: refForOutline,
     ...canvasProps
   });
 };
-var Img = wrapInSchema({
+var Img = withInteractivitySchema({
   Component: ImgInner,
   componentIdentity: "dev.remotion.remotion.Img",
   schema: imgSchema,
@@ -13575,11 +13658,8 @@ var Img = wrapInSchema({
 });
 addSequenceStackTraces(Img);
 var interactiveElementSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...baseSchema,
+  ...transformSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
@@ -13598,7 +13678,7 @@ var makeInteractiveElement = (tag, displayName) => {
       name,
       showInTimeline,
       stack,
-      _experimentalControls,
+      controls,
       ...props2
     } = propsWithControls;
     const refForOutline = useRef25(null);
@@ -13614,10 +13694,10 @@ var makeInteractiveElement = (tag, displayName) => {
       hidden,
       name: name ?? displayName,
       showInTimeline: showInTimeline ?? true,
-      _experimentalControls,
+      controls,
       _remotionInternalStack: stack,
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
-      _remotionInternalRefForOutline: refForOutline,
+      outlineRef: refForOutline,
       children: React29.createElement(tag, {
         ...props2,
         ref: callbackRef
@@ -13625,7 +13705,7 @@ var makeInteractiveElement = (tag, displayName) => {
     });
   });
   Inner.displayName = displayName;
-  const Wrapped = wrapInSchema({
+  const Wrapped = withInteractivitySchema({
     Component: Inner,
     componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
     schema: interactiveElementSchema,
@@ -13636,6 +13716,11 @@ var makeInteractiveElement = (tag, displayName) => {
   return Wrapped;
 };
 var Interactive = {
+  baseSchema,
+  transformSchema,
+  premountSchema,
+  sequenceSchema,
+  withSchema: withInteractivitySchema,
   A: makeInteractiveElement("a", "<Interactive.A>"),
   Article: makeInteractiveElement("article", "<Interactive.Article>"),
   Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
@@ -13817,36 +13902,6 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
     }
   `;
 };
-var disabledEffectField = {
-  type: "boolean",
-  default: false,
-  description: "Disabled"
-};
-var createEffect = (definition) => {
-  const { calculateKey: userCalculateKey, validateParams } = definition;
-  const widened = {
-    ...definition,
-    documentationLink: definition.documentationLink ?? null,
-    calculateKey: (params) => {
-      const disabled = params.disabled ?? false;
-      return `${userCalculateKey(params)}-disabled-${disabled}`;
-    },
-    schema: {
-      disabled: disabledEffectField,
-      ...definition.schema
-    }
-  };
-  const factory = (params = {}) => {
-    validateParams(params);
-    return {
-      definition: widened,
-      params,
-      effectKey: widened.calculateKey(params),
-      memoized: false
-    };
-  };
-  return factory;
-};
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
@@ -14933,12 +14988,14 @@ var Internals = {
   SequenceManager,
   SequenceManagerRefContext,
   SequenceStackTracesUpdateContext,
-  wrapInSchema,
+  baseSchema,
   sequenceSchema,
   SequenceWithoutSchema,
   sequenceStyleSchema,
   sequenceVisualStyleSchema,
   sequencePremountSchema,
+  transformSchema,
+  premountSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -15138,7 +15195,7 @@ var SeriesInner = (props2) => {
     })
   });
 };
-var Series = Object.assign(wrapInSchema({
+var Series = Object.assign(withInteractivitySchema({
   Component: SeriesInner,
   componentIdentity: "dev.remotion.remotion.Series",
   schema: sequenceSchemaDefaultLayoutNone,
@@ -15728,6 +15785,7 @@ import { jsx as jsx82 } from "react/jsx-runtime";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import { jsx as jsx102 } from "react/jsx-runtime";
 import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
 var unitDir = (from, to) => {
   const dx = to[0] - from[0];
   const dy = to[1] - from[1];
@@ -15871,6 +15929,7 @@ var doesReactSupportTransformOriginProperty = (version2) => {
   const [major] = version2.split(".").map(Number);
   return major > 18;
 };
+var HtmlInCanvasWithPrivateProps = HtmlInCanvas;
 var RenderSvg = ({
   defaultName,
   documentationLink,
@@ -15890,7 +15949,7 @@ var RenderSvg = ({
   hidden,
   name,
   showInTimeline,
-  _experimentalControls: controls,
+  controls,
   stack,
   ...props
 }) => {
@@ -15977,7 +16036,7 @@ var RenderSvg = ({
       }) : null
     ]
   });
-  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx40(HtmlInCanvas, {
+  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx40(HtmlInCanvasWithPrivateProps, {
     ref: setCanvasRef,
     width: Math.ceil(width),
     height: Math.ceil(height),
@@ -15985,7 +16044,7 @@ var RenderSvg = ({
     pixelDensity,
     showInTimeline: false,
     style: actualStyle,
-    _experimentalControls: controls,
+    controls,
     children: svg
   });
   const stackProps = stack === undefined ? null : { stack };
@@ -15998,11 +16057,11 @@ var RenderSvg = ({
     freeze,
     hidden,
     showInTimeline,
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
     name: name ?? defaultName,
-    _remotionInternalRefForOutline: outlineRef,
+    outlineRef,
     _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined,
     ...stackProps,
     children: content
@@ -16060,16 +16119,13 @@ var enumField = ({
 };
 var makeShapeSchema = (shapeFields) => {
   return {
-    from: Internals.sequenceSchema.from,
-    freeze: Internals.sequenceSchema.freeze,
-    durationInFrames: Internals.sequenceSchema.durationInFrames,
+    ...Internals.baseSchema,
     ...shapeFields,
     fill: colorField({
       defaultValue: "#0b84ff",
       description: "Fill"
     }),
-    ...Internals.sequenceVisualStyleSchema,
-    hidden: Internals.sequenceSchema.hidden
+    ...Internals.transformSchema
   };
 };
 var arrowSchema = makeShapeSchema({
@@ -16127,7 +16183,7 @@ var ArrowInner = ({
     ...props
   });
 };
-var Arrow = Internals.wrapInSchema({
+var Arrow = Interactive.withSchema({
   Component: ArrowInner,
   componentIdentity: "dev.remotion.shapes.Arrow",
   schema: arrowSchema,
@@ -16551,7 +16607,7 @@ var CalloutInner = ({
     ...props
   });
 };
-var Callout = Internals.wrapInSchema({
+var Callout = Interactive.withSchema({
   Component: CalloutInner,
   componentIdentity: "dev.remotion.shapes.Callout",
   schema: calloutSchema,
@@ -16613,7 +16669,7 @@ var CircleInner = ({ radius, ...props }) => {
     ...props
   });
 };
-var Circle = Internals.wrapInSchema({
+var Circle = Interactive.withSchema({
   Component: CircleInner,
   componentIdentity: "dev.remotion.shapes.Circle",
   schema: circleSchema,
@@ -16670,7 +16726,7 @@ var EllipseInner = ({ rx, ry, ...props }) => {
     ...props
   });
 };
-var Ellipse = Internals.wrapInSchema({
+var Ellipse = Interactive.withSchema({
   Component: EllipseInner,
   componentIdentity: "dev.remotion.shapes.Ellipse",
   schema: ellipseSchema,
@@ -16808,7 +16864,7 @@ var HeartInner = ({
     ...props
   });
 };
-var Heart = Internals.wrapInSchema({
+var Heart = Interactive.withSchema({
   Component: HeartInner,
   componentIdentity: "dev.remotion.shapes.Heart",
   schema: heartSchema,
@@ -16962,7 +17018,7 @@ var PieInner = ({
     ...props
   });
 };
-var Pie = Internals.wrapInSchema({
+var Pie = Interactive.withSchema({
   Component: PieInner,
   componentIdentity: "dev.remotion.shapes.Pie",
   schema: pieSchema,
@@ -17061,7 +17117,7 @@ var PolygonInner = ({
     ...props
   });
 };
-var Polygon = Internals.wrapInSchema({
+var Polygon = Interactive.withSchema({
   Component: PolygonInner,
   componentIdentity: "dev.remotion.shapes.Polygon",
   schema: polygonSchema,
@@ -17127,13 +17183,224 @@ var RectInner = ({
     ...props
   });
 };
-var Rect = Internals.wrapInSchema({
+var Rect = Interactive.withSchema({
   Component: RectInner,
   componentIdentity: "dev.remotion.shapes.Rect",
   schema: rectSchema,
   supportsEffects: true
 });
 Internals.addSequenceStackTraces(Rect);
+var KAPPA = 0.5522847498307936;
+var CAP_HANDLE = 4 / 3;
+var curve = ({
+  to,
+  cp1,
+  cp2
+}) => {
+  return {
+    type: "C",
+    cp1x: cp1[0],
+    cp1y: cp1[1],
+    cp2x: cp2[0],
+    cp2y: cp2[1],
+    x: to[0],
+    y: to[1]
+  };
+};
+var cap = ({
+  from,
+  to,
+  radius,
+  direction
+}) => {
+  if (direction === "top") {
+    return curve({
+      to,
+      cp1: [from[0], from[1] - radius * CAP_HANDLE],
+      cp2: [to[0], to[1] - radius * CAP_HANDLE]
+    });
+  }
+  if (direction === "right") {
+    return curve({
+      to,
+      cp1: [from[0] + radius * CAP_HANDLE, from[1]],
+      cp2: [to[0] + radius * CAP_HANDLE, to[1]]
+    });
+  }
+  if (direction === "bottom") {
+    return curve({
+      to,
+      cp1: [from[0], from[1] + radius * CAP_HANDLE],
+      cp2: [to[0], to[1] + radius * CAP_HANDLE]
+    });
+  }
+  return curve({
+    to,
+    cp1: [from[0] - radius * CAP_HANDLE, from[1]],
+    cp2: [to[0] - radius * CAP_HANDLE, to[1]]
+  });
+};
+var edge = ({
+  from,
+  to,
+  edgeRoundness,
+  direction
+}) => {
+  const dx = to[0] - from[0];
+  const dy = to[1] - from[1];
+  const handleX = Math.abs(dx) * KAPPA * edgeRoundness;
+  const handleY = Math.abs(dy) * KAPPA * edgeRoundness;
+  if (direction === "top-right") {
+    return curve({
+      to,
+      cp1: [from[0], from[1] + handleY],
+      cp2: [to[0] - handleX, to[1]]
+    });
+  }
+  if (direction === "right-bottom") {
+    return curve({
+      to,
+      cp1: [from[0] - handleX, from[1]],
+      cp2: [to[0], to[1] - handleY]
+    });
+  }
+  if (direction === "bottom-left") {
+    return curve({
+      to,
+      cp1: [from[0], from[1] - handleY],
+      cp2: [to[0] + handleX, to[1]]
+    });
+  }
+  return curve({
+    to,
+    cp1: [from[0] + handleX, from[1]],
+    cp2: [to[0], to[1] + handleY]
+  });
+};
+var clampCornerRadius = ({
+  cornerRadius,
+  width,
+  height
+}) => {
+  return Math.min(Math.max(cornerRadius, 0), width / 2, height / 2);
+};
+var makeSpark = ({
+  width,
+  height,
+  edgeRoundness = 1,
+  cornerRadius = 0
+}) => {
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const radius = clampCornerRadius({ cornerRadius, width, height });
+  const top = [centerX, 0];
+  const right = [width, centerY];
+  const bottom = [centerX, height];
+  const left = [0, centerY];
+  const topRight = radius === 0 ? top : [centerX + radius, radius];
+  const rightTop = radius === 0 ? right : [width - radius, centerY - radius];
+  const rightBottom = radius === 0 ? right : [width - radius, centerY + radius];
+  const bottomRight = radius === 0 ? bottom : [centerX + radius, height - radius];
+  const bottomLeft = radius === 0 ? bottom : [centerX - radius, height - radius];
+  const leftBottom = radius === 0 ? left : [radius, centerY + radius];
+  const leftTop = radius === 0 ? left : [radius, centerY - radius];
+  const topLeft = radius === 0 ? top : [centerX - radius, radius];
+  const instructions = [
+    {
+      type: "M",
+      x: topRight[0],
+      y: topRight[1]
+    },
+    edge({
+      from: topRight,
+      to: rightTop,
+      edgeRoundness,
+      direction: "top-right"
+    })
+  ];
+  if (radius > 0) {
+    instructions.push(cap({ from: rightTop, to: rightBottom, radius, direction: "right" }));
+  }
+  instructions.push(edge({
+    from: rightBottom,
+    to: bottomRight,
+    edgeRoundness,
+    direction: "right-bottom"
+  }));
+  if (radius > 0) {
+    instructions.push(cap({ from: bottomRight, to: bottomLeft, radius, direction: "bottom" }));
+  }
+  instructions.push(edge({
+    from: bottomLeft,
+    to: leftBottom,
+    edgeRoundness,
+    direction: "bottom-left"
+  }));
+  if (radius > 0) {
+    instructions.push(cap({ from: leftBottom, to: leftTop, radius, direction: "left" }));
+  }
+  instructions.push(edge({
+    from: leftTop,
+    to: topLeft,
+    edgeRoundness,
+    direction: "left-top"
+  }));
+  if (radius > 0) {
+    instructions.push(cap({ from: topLeft, to: topRight, radius, direction: "top" }));
+  }
+  instructions.push({ type: "Z" });
+  return {
+    path: serializeInstructions(instructions),
+    width,
+    height,
+    transformOrigin: `${centerX} ${centerY}`,
+    instructions
+  };
+};
+var sparkSchema = makeShapeSchema({
+  width: numberField({
+    defaultValue: 100,
+    description: "Width",
+    min: 0
+  }),
+  height: numberField({
+    defaultValue: 140,
+    description: "Height",
+    min: 0
+  }),
+  edgeRoundness: numberField({
+    defaultValue: 1,
+    description: "Edge Roundness",
+    min: 0,
+    step: 0.01
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var SparkInner = ({
+  width,
+  height,
+  edgeRoundness,
+  cornerRadius,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx102(RenderSvg, {
+    defaultName: "<Spark>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/spark",
+    ...makeSpark({ width, height, edgeRoundness, cornerRadius }),
+    ...props
+  });
+};
+var Spark = Interactive.withSchema({
+  Component: SparkInner,
+  componentIdentity: "dev.remotion.shapes.Spark",
+  schema: sparkSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Spark);
 var star = ({
   centerX,
   centerY,
@@ -17224,7 +17491,7 @@ var StarInner = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx102(RenderSvg, {
+  return /* @__PURE__ */ jsx112(RenderSvg, {
     defaultName: "<Star>",
     documentationLink: "https://www.remotion.dev/docs/shapes/star",
     ...makeStar({
@@ -17237,7 +17504,7 @@ var StarInner = ({
     ...props
   });
 };
-var Star = Internals.wrapInSchema({
+var Star = Interactive.withSchema({
   Component: StarInner,
   componentIdentity: "dev.remotion.shapes.Star",
   schema: starSchema,
@@ -17336,14 +17603,14 @@ var TriangleInner = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx112(RenderSvg, {
+  return /* @__PURE__ */ jsx122(RenderSvg, {
     defaultName: "<Triangle>",
     documentationLink: "https://www.remotion.dev/docs/shapes/triangle",
     ...makeTriangle({ length: length2, direction, edgeRoundness, cornerRadius }),
     ...props
   });
 };
-var Triangle = Internals.wrapInSchema({
+var Triangle = Interactive.withSchema({
   Component: TriangleInner,
   componentIdentity: "dev.remotion.shapes.Triangle",
   schema: triangleSchema,
@@ -17809,18 +18076,18 @@ function arcToCircle2({
     result.push(approximate_unit_arc2(theta1, delta_theta));
     theta1 += delta_theta;
   }
-  return result.map((curve) => {
-    for (let i = 0;i < curve.length; i += 2) {
-      let x = curve[i + 0];
-      let y = curve[i + 1];
+  return result.map((curve2) => {
+    for (let i = 0;i < curve2.length; i += 2) {
+      let x = curve2[i + 0];
+      let y = curve2[i + 1];
       x *= rx;
       y *= ry;
       const xp = cos_phi * x - sin_phi * y;
       const yp = sin_phi * x + cos_phi * y;
-      curve[i + 0] = xp + cc[0];
-      curve[i + 1] = yp + cc[1];
+      curve2[i + 0] = xp + cc[0];
+      curve2[i + 1] = yp + cc[1];
     }
-    return curve;
+    return curve2;
   });
 }
 var removeATSHVQInstructions2 = (segments) => {
@@ -18427,7 +18694,7 @@ import { jsx as jsx93 } from "react/jsx-runtime";
 import React72 from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 import { jsx as jsx113 } from "react/jsx-runtime";
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 import * as React36 from "react";
 import * as ReactDOM4 from "react-dom";
 import React112 from "react";
@@ -19241,11 +19508,11 @@ var Link = ({
   });
 };
 var PlanePaperIcon = (props) => {
-  return /* @__PURE__ */ jsx122("svg", {
+  return /* @__PURE__ */ jsx123("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx122("path", {
+    children: /* @__PURE__ */ jsx123("path", {
       fill: "currentcolor",
       d: "M169.9 280L94.9 448.6 461.2 280 169.9 280zm291.3-48L94.9 63.4 169.9 232 461.2 232zM34.8 465.6L128 256 34.8 46.4C33 42.2 32 37.6 32 33 32 14.8 46.7 0 64.8 0 69.5 0 74.2 1 78.5 3L554.2 222c13.3 6.1 21.8 19.4 21.8 34s-8.5 27.9-21.8 34L78.5 509c-4.3 2-9 3-13.7 3-18.1 0-32.8-14.8-32.8-33 0-4.6 1-9.2 2.8-13.4z"
     })