@remotion/promo-pages 4.0.476 → 4.0.478

package/dist/design.js

@@ -36,7 +36,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 import * as React23 from "react";
 import * as React3 from "react";
 import { Fragment as Fragment2, jsx as jsx43 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback26, useRef as useRef210, useState as useState22 } from "react";
+import React52, { useCallback as useCallback27, useRef as useRef210, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -4173,6 +4173,7 @@ import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
+  useCallback as useCallback6,
   useContext as useContext17,
   useEffect as useEffect3,
   useMemo as useMemo14,
@@ -4211,14 +4212,14 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React15, { useCallback as useCallback6, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React15, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
 import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { useContext as useContext18, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 import {
   createContext as createContext17,
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
@@ -4226,7 +4227,7 @@ import {
   useState as useState7
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext30 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext30 } from "react";
 import React16, { createContext as createContext18, useMemo as useMemo18 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
@@ -4234,7 +4235,7 @@ import { createContext as createContext19, useEffect as useEffect6, useState as
 import { jsx as jsx17 } from "react/jsx-runtime";
 import { createContext as createContext20, useMemo as useMemo19, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback13 } from "react";
 import React22, {
   forwardRef as forwardRef5,
   useContext as useContext28,
@@ -4248,7 +4249,7 @@ import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef
 import React19, {
   createContext as createContext21,
   createRef as createRef2,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useContext as useContext20,
   useEffect as useEffect7,
   useMemo as useMemo21,
@@ -4261,16 +4262,16 @@ import { useRef as useRef13 } from "react";
 import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo22, useState as useState11 } from "react";
 import { useContext as useContext22 } from "react";
 import {
-  useCallback as useCallback11,
+  useCallback as useCallback12,
   useContext as useContext26,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef18
 } from "react";
-import { useCallback as useCallback10, useMemo as useMemo25, useRef as useRef16 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16 } from "react";
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
 import React20, {
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useContext as useContext24,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect6,
@@ -4298,7 +4299,7 @@ import { jsx as jsx22 } from "react/jsx-runtime";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo29,
@@ -4309,7 +4310,7 @@ import { jsx as jsx24 } from "react/jsx-runtime";
 import {
   createContext as createContext23,
   forwardRef as forwardRef9,
-  useCallback as useCallback15,
+  useCallback as useCallback16,
   useContext as useContext31,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo30,
@@ -4318,7 +4319,7 @@ import {
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback16,
+  useCallback as useCallback17,
   useContext as useContext32,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle7,
@@ -4327,16 +4328,16 @@ import {
   useState as useState16
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-import { forwardRef as forwardRef11, useCallback as useCallback17, useState as useState17 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback18, useState as useState17 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
+import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React29, { forwardRef as forwardRef12, useCallback as useCallback19, useRef as useRef25 } from "react";
+import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React30 from "react";
 import {
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
   useRef as useRef26,
@@ -4351,9 +4352,9 @@ import { jsx as jsx32 } from "react/jsx-runtime";
 import React33 from "react";
 import React34, { createContext as createContext25 } from "react";
 import React35, { useContext as useContext35 } from "react";
-import { useCallback as useCallback23 } from "react";
+import { useCallback as useCallback24 } from "react";
 import {
-  useCallback as useCallback21,
+  useCallback as useCallback22,
   useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
@@ -4363,7 +4364,7 @@ import {
 import { jsx as jsx33 } from "react/jsx-runtime";
 import React37, {
   forwardRef as forwardRef13,
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
@@ -4384,7 +4385,7 @@ import {
 import React40 from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 import React42 from "react";
-import { forwardRef as forwardRef16, useCallback as useCallback24, useContext as useContext39 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 import {
   forwardRef as forwardRef15,
   useContext as useContext38,
@@ -5564,7 +5565,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.476";
+var VERSION = "4.0.478";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6023,10 +6024,17 @@ var fromField = {
   step: 1,
   hiddenFromList: true
 };
+var freezeField = {
+  type: "number",
+  default: null,
+  step: 1,
+  hiddenFromList: true
+};
 var sequenceSchema = extendSchemaWithSequenceName({
   hidden: hiddenField,
   showInTimeline: showInTimelineField,
   from: fromField,
+  freeze: freezeField,
   durationInFrames: durationInFramesField,
   layout: {
     type: "enum",
@@ -6041,6 +6049,7 @@ var sequenceSchema = extendSchemaWithSequenceName({
 var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
   hidden: hiddenField,
   showInTimeline: showInTimelineField,
+  freeze: freezeField,
   durationInFrames: durationInFramesField,
   layout: sequenceSchema.layout
 });
@@ -8232,6 +8241,7 @@ var mergeValues = ({
 var stackToOverrideMap = {};
 var wrapInSchema = ({
   Component,
+  componentIdentity,
   schema,
   supportsEffects
 }) => {
@@ -8278,7 +8288,8 @@ var wrapInSchema = ({
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         overrideId,
-        supportsEffects
+        supportsEffects,
+        componentIdentity
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
     const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
@@ -8315,6 +8326,7 @@ var wrapInSchema = ({
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
+  freeze,
   durationInFrames = Infinity,
   children,
   name,
@@ -8330,7 +8342,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
-  _remotionInternalRefForOutline: refForOutline,
+  _remotionInternalRefForOutline: passedRefForOutline,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -8358,11 +8370,24 @@ var RegularSequenceRefForwardingFunction = ({
   if (!Number.isFinite(from)) {
     throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
   }
+  if (typeof freeze !== "undefined" && freeze !== null) {
+    if (typeof freeze !== "number") {
+      throw new TypeError(`The "freeze" prop of <Sequence /> must be a number, but is of type ${typeof freeze}.`);
+    }
+    if (Number.isNaN(freeze)) {
+      throw new TypeError(`The "freeze" prop of <Sequence /> must be a real number, but it is NaN.`);
+    }
+    if (!Number.isFinite(freeze)) {
+      throw new TypeError(`The "freeze" prop of <Sequence /> must be finite, but it is ${freeze}.`);
+    }
+  }
   const absoluteFrame = useTimelinePosition();
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
   const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
+  const wrapperRefForOutline = useRef6(null);
+  const refForOutline = other.layout === "none" ? passedRefForOutline ?? null : passedRefForOutline ?? wrapperRefForOutline;
   const premounting = useMemo14(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
@@ -8414,6 +8439,11 @@ var RegularSequenceRefForwardingFunction = ({
   const inheritedStack = other?.stack ?? null;
   const stackRef = useRef6(null);
   stackRef.current = stack ?? inheritedStack;
+  const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
+  const parentCumulatedNegativeFrom = parentSequence?.cumulatedNegativeFrom ?? 0;
+  const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
+  const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
+  const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null ? registeredFrozenFrame === null ? null : mediaFrameAtSequenceZero + (loopDisplay ? registeredFrozenFrame % loopDisplay.durationInFrames : registeredFrozenFrame) * isMedia.data.playbackRate : null;
   useEffect3(() => {
     if (!env.isStudio) {
       return;
@@ -8439,7 +8469,8 @@ var RegularSequenceRefForwardingFunction = ({
           src: isMedia.src,
           getStack: () => stackRef.current,
           refForOutline: refForOutline ?? null,
-          isInsideSeries
+          isInsideSeries,
+          frozenFrame: registeredFrozenFrame
         });
       } else {
         registerSequence({
@@ -8462,10 +8493,12 @@ var RegularSequenceRefForwardingFunction = ({
           showInTimeline,
           src: isMedia.data.src,
           getStack: () => stackRef.current,
-          startMediaFrom: isMedia.data.startMediaFrom,
+          startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
           volume: isMedia.data.volumes,
           refForOutline: refForOutline ?? null,
-          isInsideSeries
+          isInsideSeries,
+          frozenFrame: registeredFrozenFrame,
+          frozenMediaFrame
         });
       }
       return () => {
@@ -8490,7 +8523,8 @@ var RegularSequenceRefForwardingFunction = ({
       controls: controls ?? null,
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
-      isInsideSeries
+      isInsideSeries,
+      frozenFrame: registeredFrozenFrame
     });
     return () => {
       unregisterSequence(id);
@@ -8517,11 +8551,26 @@ var RegularSequenceRefForwardingFunction = ({
     isMedia,
     resolvedDocumentationLink,
     refForOutline,
-    isInsideSeries
+    isInsideSeries,
+    registeredFrozenFrame,
+    startMediaFrom,
+    frozenMediaFrame
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
+  const frozenContent = content === null || typeof freeze === "undefined" || freeze === null ? content : /* @__PURE__ */ jsx12(Freeze, {
+    frame: freeze,
+    children: content
+  });
   const styleIfThere = other.layout === "none" ? undefined : other.style;
+  const sequenceRef = useCallback6((node) => {
+    wrapperRefForOutline.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
   const defaultStyle = useMemo14(() => {
     return {
       flexDirection: undefined,
@@ -8538,11 +8587,11 @@ var RegularSequenceRefForwardingFunction = ({
   }
   return /* @__PURE__ */ jsx12(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx12(AbsoluteFill, {
-      ref,
+    children: frozenContent === null ? null : other.layout === "none" ? frozenContent : /* @__PURE__ */ jsx12(AbsoluteFill, {
+      ref: sequenceRef,
       style: defaultStyle,
       className: other.className,
-      children: content
+      children: frozenContent
     })
   });
 };
@@ -8622,11 +8671,13 @@ var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
 var SequenceWithoutSchema = SequenceInner;
 var Sequence = wrapInSchema({
   Component: SequenceInner,
+  componentIdentity: "dev.remotion.remotion.Sequence",
   schema: sequenceSchema,
   supportsEffects: false
 });
 var SequenceWithoutFrom = wrapInSchema({
   Component: SequenceInner,
+  componentIdentity: null,
   schema: sequenceSchemaWithoutFrom,
   supportsEffects: false
 });
@@ -8944,7 +8995,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     }
     return document.createElement("canvas");
   }, []);
-  const draw = useCallback6((imageData) => {
+  const draw = useCallback7((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -9165,6 +9216,7 @@ var resolveAnimatedImageSource = (src) => {
 var animatedImageSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   playbackRate: {
     type: "number",
     min: 0,
@@ -9364,6 +9416,7 @@ var AnimatedImageInner = ({
 };
 var AnimatedImage = wrapInSchema({
   Component: AnimatedImageInner,
+  componentIdentity: "dev.remotion.remotion.AnimatedImage",
   schema: animatedImageSchema,
   supportsEffects: true
 });
@@ -9410,7 +9463,7 @@ var RenderAssetManager = createContext17({
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState7([]);
   const renderAssetsRef = useRef10([]);
-  const registerRenderAsset = useCallback7((renderAsset) => {
+  const registerRenderAsset = useCallback8((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
@@ -9427,7 +9480,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback7((id) => {
+  const unregisterRenderAsset = useCallback8((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a2) => a2.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -10232,7 +10285,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   }, []);
   const prevEndTimes = useRef12({ scheduledEndTime: null, mediaEndTime: null });
   const nodesToResume = useRef12(new Map);
-  const unscheduleAudioNode = useCallback8((node) => {
+  const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
   const scheduleAudioNode = useMemo21(() => {
@@ -10286,7 +10339,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
       };
     };
   }, [ctxAndGain, logLevel]);
-  const resume = useCallback8(() => {
+  const resume = useCallback9(() => {
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -10313,10 +10366,10 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     });
     return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
-  const getIsResumingAudioContext = useCallback8(() => {
+  const getIsResumingAudioContext = useCallback9(() => {
     return isResuming.current;
   }, []);
-  const suspend = useCallback8(() => {
+  const suspend = useCallback9(() => {
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -10390,7 +10443,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     };
   }, [refs]);
   const takenAudios = useRef12(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback8(() => {
+  const rerenderAudios = useCallback9(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a2) => a2.id === id);
       const { current } = ref;
@@ -10411,7 +10464,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     });
   }, [refs]);
-  const registerAudio = useCallback8((options) => {
+  const registerAudio = useCallback9((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a2) => a2.audioId === audioId);
     if (found) {
@@ -10440,7 +10493,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback8((id) => {
+  const unregisterAudio = useCallback9((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r2) => r2.id === id);
     if (index === -1) {
@@ -10451,7 +10504,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     audios.current = audios.current?.filter((a2) => a2.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback8(({
+  const updateAudio = useCallback9(({
     aud,
     audioId,
     id,
@@ -10485,7 +10538,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       rerenderAudios();
     }
   }, [rerenderAudios]);
-  const playAllAudios = useCallback8(() => {
+  const playAllAudios = useCallback9(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a2) => a2.el === ref.ref);
       if (audio?.premounting) {
@@ -10996,7 +11049,9 @@ var useMediaInTimeline = ({
       controls: null,
       effects: [],
       refForOutline,
-      isInsideSeries: false
+      isInsideSeries: false,
+      frozenFrame: null,
+      frozenMediaFrame: null
     });
     return () => {
       unregisterSequence(id);
@@ -11033,7 +11088,7 @@ var useBufferManager = (logLevel, mountTime) => {
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const buffering = useRef15(false);
-  const addBlock = useCallback9((block) => {
+  const addBlock = useCallback10((block) => {
     if (rendering) {
       return {
         unblock: () => {
@@ -11059,7 +11114,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback9((callback) => {
+  const listenForBuffering = useCallback10((callback) => {
     setOnBufferingCallbacks((c2) => [...c2, callback]);
     return {
       remove: () => {
@@ -11067,7 +11122,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback9((callback) => {
+  const listenForResume = useCallback10((callback) => {
     setOnResumeCallbacks((c2) => [...c2, callback]);
     return {
       remove: () => {
@@ -11181,7 +11236,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef16(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback10((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback11((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -11571,7 +11626,7 @@ var useMediaPlayback = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef18({});
-  const onVariableFpsVideoDetected = useCallback11(() => {
+  const onVariableFpsVideoDetected = useCallback12(() => {
     if (!src) {
       return;
     }
@@ -11962,7 +12017,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premounting: Boolean(sequenceContext?.premounting),
     postmounting: Boolean(sequenceContext?.postmounting)
   });
-  const getStack = useCallback12(() => {
+  const getStack = useCallback13(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -12208,7 +12263,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback13((e) => {
+  const onError = useCallback14((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -12222,7 +12277,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback13((src, durationInSeconds) => {
+  const onDuration = useCallback14((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -12314,6 +12369,7 @@ var resolveSolidPixelDensity = (pixelDensity) => {
 var solidSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   color: {
     type: "color",
     default: "transparent",
@@ -12368,7 +12424,7 @@ var SolidInner = ({
     return canvas;
   }, []);
   const chainState = useEffectChainState();
-  const canvasRef = useCallback14((canvas) => {
+  const canvasRef = useCallback15((canvas) => {
     setOutputCanvas(canvas);
     if (typeof reference === "function") {
       reference(canvas);
@@ -12452,6 +12508,7 @@ var SolidOuter = forwardRef8(({
   style,
   name,
   from,
+  freeze,
   hidden,
   showInTimeline,
   pixelDensity,
@@ -12465,6 +12522,7 @@ var SolidOuter = forwardRef8(({
   return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
+    freeze,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
@@ -12489,6 +12547,7 @@ var SolidOuter = forwardRef8(({
 });
 var Solid = wrapInSchema({
   Component: SolidOuter,
+  componentIdentity: "dev.remotion.remotion.Solid",
   schema: solidSchema,
   supportsEffects: true
 });
@@ -12578,7 +12637,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const offscreenRef = useRef22(null);
   const divRef = useRef22(null);
   const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
-  const setLayoutCanvasRef = useCallback15((node) => {
+  const setLayoutCanvasRef = useCallback16((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -12600,7 +12659,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const initializedRef = useRef22(false);
   const onInitCleanupRef = useRef22(null);
   const unmountedRef = useRef22(false);
-  const onPaintCb = useCallback15(async () => {
+  const onPaintCb = useCallback16(async () => {
     const element = divRef.current;
     if (!element) {
       throw new Error("Canvas or scene element not found");
@@ -12773,7 +12832,7 @@ var HtmlInCanvasInner = forwardRef9(({
   const resolvedDuration = durationInFrames ?? videoDuration;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const actualRef = useRef22(null);
-  const setCanvasRef = useCallback15((node) => {
+  const setCanvasRef = useCallback16((node) => {
     actualRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -12808,11 +12867,13 @@ HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
 var HtmlInCanvasWrapped = wrapInSchema({
   Component: HtmlInCanvasInner,
+  componentIdentity: "dev.remotion.remotion.HtmlInCanvas",
   schema: htmlInCanvasSchema,
   supportsEffects: true
 });
@@ -12830,6 +12891,7 @@ function truncateSrcForLabel(src) {
 var canvasImageSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   fit: {
     type: "enum",
     default: "fill",
@@ -12935,7 +12997,7 @@ var CanvasImageContent = forwardRef10(({
     }
     return document.createElement("canvas");
   }, []);
-  const canvasRef = useCallback16((canvas) => {
+  const canvasRef = useCallback17((canvas) => {
     setOutputCanvas(canvas);
     if (refForOutline) {
       refForOutline.current = canvas;
@@ -13082,6 +13144,7 @@ var CanvasImageInner = forwardRef10(({
   delayRenderTimeoutInMilliseconds,
   durationInFrames,
   from,
+  freeze,
   hidden,
   name,
   showInTimeline,
@@ -13103,6 +13166,7 @@ var CanvasImageInner = forwardRef10(({
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
+    freeze,
     hidden,
     showInTimeline: showInTimeline ?? true,
     name: name ?? "<CanvasImage>",
@@ -13135,6 +13199,7 @@ var CanvasImageInner = forwardRef10(({
 });
 var CanvasImage = wrapInSchema({
   Component: CanvasImageInner,
+  componentIdentity: "dev.remotion.remotion.CanvasImage",
   schema: canvasImageSchema,
   supportsEffects: true
 });
@@ -13152,11 +13217,11 @@ var IFrameRefForwarding = ({
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback17((e) => {
+  const didLoad = useCallback18((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback17((e) => {
+  const didGetError = useCallback18((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -13198,7 +13263,7 @@ var ImgContent = ({
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  const imageCallbackRef = useCallback18((img) => {
+  const imageCallbackRef = useCallback19((img) => {
     imageRef.current = img;
     refForOutline.current = img;
     if (typeof ref === "function") {
@@ -13208,7 +13273,7 @@ var ImgContent = ({
     }
   }, [ref, refForOutline]);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback18((timeout) => {
+  const retryIn = useCallback19((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -13226,7 +13291,7 @@ var ImgContent = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback18((e) => {
+  const didGetError = useCallback19((e) => {
     if (!errors.current) {
       return;
     }
@@ -13336,6 +13401,7 @@ var NativeImgInner = ({
   src,
   from,
   durationInFrames,
+  freeze,
   _experimentalControls: controls,
   _remotionInternalRefForOutline: refForOutline,
   ...props2
@@ -13347,6 +13413,7 @@ var NativeImgInner = ({
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
+    freeze,
     _remotionInternalStack: stack,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
     _remotionInternalIsMedia: { type: "image", src },
@@ -13366,6 +13433,7 @@ var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -13421,6 +13489,7 @@ var ImgInner = ({
   src,
   from,
   durationInFrames,
+  freeze,
   _experimentalControls: controls,
   width,
   height,
@@ -13445,6 +13514,7 @@ var ImgInner = ({
       src,
       from,
       durationInFrames,
+      freeze,
       _experimentalControls: controls,
       width,
       height,
@@ -13486,6 +13556,7 @@ var ImgInner = ({
     delayRenderTimeoutInMilliseconds,
     from,
     durationInFrames,
+    freeze,
     hidden,
     name: name ?? "<Img>",
     showInTimeline,
@@ -13498,6 +13569,7 @@ var ImgInner = ({
 };
 var Img = wrapInSchema({
   Component: ImgInner,
+  componentIdentity: "dev.remotion.remotion.Img",
   schema: imgSchema,
   supportsEffects: true
 });
@@ -13505,6 +13577,7 @@ addSequenceStackTraces(Img);
 var interactiveElementSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -13520,6 +13593,7 @@ var makeInteractiveElement = (tag, displayName) => {
     const {
       durationInFrames,
       from,
+      freeze,
       hidden,
       name,
       showInTimeline,
@@ -13528,7 +13602,7 @@ var makeInteractiveElement = (tag, displayName) => {
       ...props2
     } = propsWithControls;
     const refForOutline = useRef25(null);
-    const callbackRef = useCallback19((element) => {
+    const callbackRef = useCallback20((element) => {
       refForOutline.current = element;
       setRef(ref, element);
     }, [ref]);
@@ -13536,6 +13610,7 @@ var makeInteractiveElement = (tag, displayName) => {
       layout: "none",
       from: from ?? 0,
       durationInFrames: durationInFrames ?? Infinity,
+      freeze,
       hidden,
       name: name ?? displayName,
       showInTimeline: showInTimeline ?? true,
@@ -13552,6 +13627,7 @@ var makeInteractiveElement = (tag, displayName) => {
   Inner.displayName = displayName;
   const Wrapped = wrapInSchema({
     Component: Inner,
+    componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
     schema: interactiveElementSchema,
     supportsEffects: false
   });
@@ -13608,14 +13684,14 @@ var CompositionManagerProvider = ({
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
   const currentcompositionsRef = useRef26(compositions);
-  const updateCompositions = useCallback20((updateComps) => {
+  const updateCompositions = useCallback21((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback20((comp) => {
+  const registerComposition = useCallback21((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -13623,12 +13699,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback20((id) => {
+  const unregisterComposition = useCallback21((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback20((name, parent, nonce, stack) => {
+  const registerFolder = useCallback21((name, parent, nonce, stack) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -13641,7 +13717,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback20((name, parent) => {
+  const unregisterFolder = useCallback21((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -14280,7 +14356,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback21(() => {
+  const onErr = useCallback22(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -14290,7 +14366,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo35(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback21((img) => {
+  const onImageFrame = useCallback22((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -14423,7 +14499,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback22(() => {
+  const getStack = useCallback23(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -14599,7 +14675,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback23(() => {
+  const onDuration = useCallback24(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -14978,6 +15054,7 @@ var Internals = {
   getEffectPropStatusesCtx,
   hiddenField,
   durationInFramesField,
+  freezeField,
   fromField
 };
 var flattenChildren = (children) => {
@@ -15063,6 +15140,7 @@ var SeriesInner = (props2) => {
 };
 var Series = Object.assign(wrapInSchema({
   Component: SeriesInner,
+  componentIdentity: "dev.remotion.remotion.Series",
   schema: sequenceSchemaDefaultLayoutNone,
   supportsEffects: false
 }), {
@@ -15527,7 +15605,7 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback24((src, durationInSeconds) => {
+  const onDuration = useCallback25((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
@@ -15637,7 +15715,7 @@ addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // ../shapes/dist/esm/index.mjs
-import React, { useCallback as useCallback25, useMemo as useMemo40, useRef as useRef29 } from "react";
+import React, { useCallback as useCallback26, useMemo as useMemo40, useRef as useRef29 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx40, jsxs as jsxs3 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -15649,6 +15727,7 @@ import { jsx as jsx72 } from "react/jsx-runtime";
 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";
 var unitDir = (from, to) => {
   const dx = to[0] - from[0];
   const dy = to[1] - from[1];
@@ -15807,6 +15886,7 @@ var RenderSvg = ({
   pixelDensity,
   durationInFrames,
   from,
+  freeze,
   hidden,
   name,
   showInTimeline,
@@ -15827,10 +15907,10 @@ var RenderSvg = ({
     };
   }, [pathStyle]);
   const outlineRef = useRef29(null);
-  const setSvgRef = useCallback25((node) => {
+  const setSvgRef = useCallback26((node) => {
     outlineRef.current = node;
   }, []);
-  const setCanvasRef = useCallback25((canvas) => {
+  const setCanvasRef = useCallback26((canvas) => {
     outlineRef.current = canvas;
   }, []);
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
@@ -15915,6 +15995,7 @@ var RenderSvg = ({
   return /* @__PURE__ */ jsx40(Sequence, {
     layout: "none",
     from,
+    freeze,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
@@ -15980,6 +16061,7 @@ var enumField = ({
 var makeShapeSchema = (shapeFields) => {
   return {
     from: Internals.sequenceSchema.from,
+    freeze: Internals.sequenceSchema.freeze,
     durationInFrames: Internals.sequenceSchema.durationInFrames,
     ...shapeFields,
     fill: colorField({
@@ -16047,10 +16129,435 @@ var ArrowInner = ({
 };
 var Arrow = Internals.wrapInSchema({
   Component: ArrowInner,
+  componentIdentity: "dev.remotion.shapes.Arrow",
   schema: arrowSchema,
   supportsEffects: true
 });
 Internals.addSequenceStackTraces(Arrow);
+var shortenVector = (vector, radius) => {
+  const [x, y] = vector;
+  const currentLength = Math.sqrt(x * x + y * y);
+  const scalingFactor = (currentLength - radius) / currentLength;
+  return [x * scalingFactor, y * scalingFactor];
+};
+var scaleVectorToLength = (vector, length2) => {
+  const [x, y] = vector;
+  const currentLength = Math.sqrt(x * x + y * y);
+  const scalingFactor = length2 / currentLength;
+  return [x * scalingFactor, y * scalingFactor];
+};
+var joinPoints = (points, {
+  edgeRoundness,
+  cornerRadius,
+  roundCornerStrategy
+}) => {
+  return points.map(([x, y], i) => {
+    const prevPointIndex = i === 0 ? points.length - 2 : i - 1;
+    const prevPoint = points[prevPointIndex];
+    const nextPointIndex = i === points.length - 1 ? 1 : i + 1;
+    const nextPoint = points[nextPointIndex];
+    const middleOfLine = [(x + nextPoint[0]) / 2, (y + nextPoint[1]) / 2];
+    const prevPointMiddleOfLine = [
+      (x + prevPoint[0]) / 2,
+      (y + prevPoint[1]) / 2
+    ];
+    const prevVector = [x - prevPoint[0], y - prevPoint[1]];
+    const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
+    if (i === 0) {
+      if (edgeRoundness !== null) {
+        return [
+          {
+            type: "M",
+            x: middleOfLine[0],
+            y: middleOfLine[1]
+          }
+        ];
+      }
+      if (cornerRadius !== 0) {
+        const computeRadius = shortenVector(nextVector, cornerRadius);
+        return [
+          {
+            type: "M",
+            x: computeRadius[0] + x,
+            y: computeRadius[1] + y
+          }
+        ];
+      }
+      return [
+        {
+          type: "M",
+          x,
+          y
+        }
+      ];
+    }
+    if (cornerRadius && edgeRoundness !== null) {
+      throw new Error(`"cornerRadius" and "edgeRoundness" cannot be specified at the same time.`);
+    }
+    if (edgeRoundness === null) {
+      if (cornerRadius === 0) {
+        return [
+          {
+            type: "L",
+            x,
+            y
+          }
+        ];
+      }
+      const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
+      const prevVectorLength = scaleVectorToLength(prevVector, cornerRadius);
+      const nextVectorMinusRadius = scaleVectorToLength(nextVector, cornerRadius);
+      const firstDraw = [
+        prevPoint[0] + prevVectorMinusRadius[0],
+        prevPoint[1] + prevVectorMinusRadius[1]
+      ];
+      return [
+        {
+          type: "L",
+          x: firstDraw[0],
+          y: firstDraw[1]
+        },
+        roundCornerStrategy === "arc" ? {
+          type: "a",
+          rx: cornerRadius,
+          ry: cornerRadius,
+          xAxisRotation: 0,
+          dx: prevVectorLength[0] + nextVectorMinusRadius[0],
+          dy: prevVectorLength[1] + nextVectorMinusRadius[1],
+          largeArcFlag: false,
+          sweepFlag: true
+        } : {
+          type: "C",
+          x: firstDraw[0] + prevVectorLength[0] + nextVectorMinusRadius[0],
+          y: firstDraw[1] + prevVectorLength[1] + nextVectorMinusRadius[1],
+          cp1x: x,
+          cp1y: y,
+          cp2x: x,
+          cp2y: y
+        }
+      ];
+    }
+    const controlPoint1 = [
+      prevPointMiddleOfLine[0] + prevVector[0] * edgeRoundness * 0.5,
+      prevPointMiddleOfLine[1] + prevVector[1] * edgeRoundness * 0.5
+    ];
+    const controlPoint2 = [
+      middleOfLine[0] - nextVector[0] * edgeRoundness * 0.5,
+      middleOfLine[1] - nextVector[1] * edgeRoundness * 0.5
+    ];
+    return [
+      {
+        type: "C",
+        cp1x: controlPoint1[0],
+        cp1y: controlPoint1[1],
+        cp2x: controlPoint2[0],
+        cp2y: controlPoint2[1],
+        x: middleOfLine[0],
+        y: middleOfLine[1]
+      }
+    ];
+  }).flat(1);
+};
+var ensurePositive = (name, value) => {
+  if (typeof value !== "number" || value <= 0) {
+    throw new Error(`"${name}" must be a positive number, got ${value}`);
+  }
+};
+var pointerInterval = ({
+  availableLength,
+  pointerBaseWidth,
+  pointerPosition
+}) => {
+  const center = availableLength * pointerPosition;
+  const half = pointerBaseWidth / 2;
+  return {
+    center,
+    start: Math.max(0, center - half),
+    end: Math.min(availableLength, center + half)
+  };
+};
+var areSamePoint = (a2, b2) => {
+  return a2[0] === b2[0] && a2[1] === b2[1];
+};
+var normalizeClosedPoints = (points) => {
+  const deduplicated = points.reduce((acc, entry) => {
+    const previous = acc[acc.length - 1];
+    if (previous && areSamePoint(previous.point, entry.point)) {
+      acc[acc.length - 1] = {
+        point: previous.point,
+        round: previous.round && entry.round
+      };
+      return acc;
+    }
+    return [...acc, entry];
+  }, []);
+  if (deduplicated.length === 0) {
+    return deduplicated;
+  }
+  const first = deduplicated[0];
+  const last = deduplicated[deduplicated.length - 1];
+  if (areSamePoint(first.point, last.point)) {
+    const [firstEntry, ...rest] = deduplicated;
+    const withoutLast = rest.slice(0, -1);
+    const mergedFirst = {
+      point: firstEntry.point,
+      round: firstEntry.round && last.round
+    };
+    return [mergedFirst, ...withoutLast, mergedFirst];
+  }
+  return [...deduplicated, first];
+};
+var unitDir2 = (from, to) => {
+  const dx = to[0] - from[0];
+  const dy = to[1] - from[1];
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) {
+    return [0, 0];
+  }
+  return [dx / len, dy / len];
+};
+var makeInstructions2 = ({
+  points,
+  edgeRoundness,
+  cornerRadius
+}) => {
+  const rawPoints = points.map((p) => p.point);
+  if (edgeRoundness !== null || cornerRadius === 0) {
+    return [
+      ...joinPoints(rawPoints, {
+        edgeRoundness,
+        cornerRadius,
+        roundCornerStrategy: "arc"
+      }),
+      {
+        type: "Z"
+      }
+    ];
+  }
+  const uniquePoints = areSamePoint(points[0].point, points[points.length - 1].point) ? points.slice(0, -1) : points;
+  const firstPoint = uniquePoints[0];
+  const startDir = firstPoint.round ? unitDir2(uniquePoints[0].point, uniquePoints[1].point) : null;
+  const startPoint = startDir ? [
+    firstPoint.point[0] + startDir[0] * cornerRadius,
+    firstPoint.point[1] + startDir[1] * cornerRadius
+  ] : firstPoint.point;
+  const instructions = [
+    { type: "M", x: startPoint[0], y: startPoint[1] }
+  ];
+  for (let i = 1;i < uniquePoints.length; i++) {
+    const current = uniquePoints[i];
+    if (!current.round) {
+      instructions.push({
+        type: "L",
+        x: current.point[0],
+        y: current.point[1]
+      });
+      continue;
+    }
+    const previous = uniquePoints[i - 1].point;
+    const next = uniquePoints[(i + 1) % uniquePoints.length].point;
+    const incoming = unitDir2(previous, current.point);
+    const outgoing = unitDir2(current.point, next);
+    const arcStart = [
+      current.point[0] - incoming[0] * cornerRadius,
+      current.point[1] - incoming[1] * cornerRadius
+    ];
+    instructions.push({
+      type: "L",
+      x: arcStart[0],
+      y: arcStart[1]
+    }, {
+      type: "a",
+      rx: cornerRadius,
+      ry: cornerRadius,
+      xAxisRotation: 0,
+      dx: incoming[0] * cornerRadius + outgoing[0] * cornerRadius,
+      dy: incoming[1] * cornerRadius + outgoing[1] * cornerRadius,
+      largeArcFlag: false,
+      sweepFlag: true
+    });
+  }
+  if (firstPoint.round) {
+    const previous = uniquePoints[uniquePoints.length - 1].point;
+    const incoming = unitDir2(previous, firstPoint.point);
+    instructions.push({
+      type: "L",
+      x: firstPoint.point[0] - incoming[0] * cornerRadius,
+      y: firstPoint.point[1] - incoming[1] * cornerRadius
+    }, {
+      type: "a",
+      rx: cornerRadius,
+      ry: cornerRadius,
+      xAxisRotation: 0,
+      dx: incoming[0] * cornerRadius + startDir[0] * cornerRadius,
+      dy: incoming[1] * cornerRadius + startDir[1] * cornerRadius,
+      largeArcFlag: false,
+      sweepFlag: true
+    });
+  }
+  instructions.push({ type: "Z" });
+  return instructions;
+};
+var makeCallout = ({
+  width = 500,
+  height = 200,
+  pointerLength = 40,
+  pointerBaseWidth = 60,
+  pointerPosition = 0.5,
+  pointerDirection = "down",
+  edgeRoundness = null,
+  cornerRadius = 0
+}) => {
+  ensurePositive("width", width);
+  ensurePositive("height", height);
+  ensurePositive("pointerLength", pointerLength);
+  ensurePositive("pointerBaseWidth", pointerBaseWidth);
+  if (typeof pointerPosition !== "number" || pointerPosition < 0 || pointerPosition > 1) {
+    throw new Error(`"pointerPosition" must be a number between 0 and 1, got ${pointerPosition}`);
+  }
+  const horizontalInterval = pointerInterval({
+    availableLength: width,
+    pointerBaseWidth,
+    pointerPosition
+  });
+  const verticalInterval = pointerInterval({
+    availableLength: height,
+    pointerBaseWidth,
+    pointerPosition
+  });
+  const pointsByDirection = {
+    up: [
+      { point: [0, pointerLength], round: true },
+      { point: [horizontalInterval.start, pointerLength], round: false },
+      { point: [horizontalInterval.center, 0], round: false },
+      { point: [horizontalInterval.end, pointerLength], round: false },
+      { point: [width, pointerLength], round: true },
+      { point: [width, height + pointerLength], round: true },
+      { point: [0, height + pointerLength], round: true },
+      { point: [0, pointerLength], round: true }
+    ],
+    down: [
+      { point: [0, 0], round: true },
+      { point: [width, 0], round: true },
+      { point: [width, height], round: true },
+      { point: [horizontalInterval.end, height], round: false },
+      {
+        point: [horizontalInterval.center, height + pointerLength],
+        round: false
+      },
+      { point: [horizontalInterval.start, height], round: false },
+      { point: [0, height], round: true },
+      { point: [0, 0], round: true }
+    ],
+    left: [
+      { point: [pointerLength, 0], round: true },
+      { point: [width + pointerLength, 0], round: true },
+      { point: [width + pointerLength, height], round: true },
+      { point: [pointerLength, height], round: true },
+      { point: [pointerLength, verticalInterval.end], round: false },
+      { point: [0, verticalInterval.center], round: false },
+      { point: [pointerLength, verticalInterval.start], round: false },
+      { point: [pointerLength, 0], round: true }
+    ],
+    right: [
+      { point: [0, 0], round: true },
+      { point: [width, 0], round: true },
+      { point: [width, verticalInterval.start], round: false },
+      { point: [width + pointerLength, verticalInterval.center], round: false },
+      { point: [width, verticalInterval.end], round: false },
+      { point: [width, height], round: true },
+      { point: [0, height], round: true },
+      { point: [0, 0], round: true }
+    ]
+  };
+  const points = normalizeClosedPoints(pointsByDirection[pointerDirection]);
+  const instructions = makeInstructions2({ points, edgeRoundness, cornerRadius });
+  const path = serializeInstructions(instructions);
+  const shapeWidth = pointerDirection === "left" || pointerDirection === "right" ? width + pointerLength : width;
+  const shapeHeight = pointerDirection === "up" || pointerDirection === "down" ? height + pointerLength : height;
+  const bodyX = pointerDirection === "left" ? pointerLength : 0;
+  const bodyY = pointerDirection === "up" ? pointerLength : 0;
+  return {
+    width: shapeWidth,
+    height: shapeHeight,
+    instructions,
+    path,
+    transformOrigin: `${bodyX + width / 2} ${bodyY + height / 2}`
+  };
+};
+var calloutSchema = makeShapeSchema({
+  width: numberField({
+    defaultValue: 500,
+    description: "Width",
+    min: 1
+  }),
+  height: numberField({
+    defaultValue: 200,
+    description: "Height",
+    min: 1
+  }),
+  pointerLength: numberField({
+    defaultValue: 40,
+    description: "Pointer Length",
+    min: 1
+  }),
+  pointerBaseWidth: numberField({
+    defaultValue: 60,
+    description: "Pointer Base Width",
+    min: 1
+  }),
+  pointerPosition: numberField({
+    defaultValue: 0.5,
+    description: "Pointer Position",
+    min: 0,
+    max: 1,
+    step: 0.01
+  }),
+  pointerDirection: enumField({
+    defaultValue: "down",
+    description: "Pointer Direction",
+    variants: ["up", "down", "left", "right"]
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var CalloutInner = ({
+  width,
+  height,
+  pointerLength,
+  pointerBaseWidth,
+  pointerPosition,
+  pointerDirection,
+  edgeRoundness,
+  cornerRadius,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx310(RenderSvg, {
+    defaultName: "<Callout>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/callout",
+    ...makeCallout({
+      width,
+      height,
+      pointerLength,
+      pointerBaseWidth,
+      pointerPosition,
+      pointerDirection,
+      edgeRoundness,
+      cornerRadius
+    }),
+    ...props
+  });
+};
+var Callout = Internals.wrapInSchema({
+  Component: CalloutInner,
+  componentIdentity: "dev.remotion.shapes.Callout",
+  schema: calloutSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Callout);
 var makeCircle = ({ radius }) => {
   const instructions = [
     {
@@ -16099,7 +16606,7 @@ var circleSchema = makeShapeSchema({
   })
 });
 var CircleInner = ({ radius, ...props }) => {
-  return /* @__PURE__ */ jsx310(RenderSvg, {
+  return /* @__PURE__ */ jsx42(RenderSvg, {
     defaultName: "<Circle>",
     documentationLink: "https://www.remotion.dev/docs/shapes/circle",
     ...makeCircle({ radius }),
@@ -16108,6 +16615,7 @@ var CircleInner = ({ radius, ...props }) => {
 };
 var Circle = Internals.wrapInSchema({
   Component: CircleInner,
+  componentIdentity: "dev.remotion.shapes.Circle",
   schema: circleSchema,
   supportsEffects: true
 });
@@ -16155,7 +16663,7 @@ var ellipseSchema = makeShapeSchema({
   })
 });
 var EllipseInner = ({ rx, ry, ...props }) => {
-  return /* @__PURE__ */ jsx42(RenderSvg, {
+  return /* @__PURE__ */ jsx52(RenderSvg, {
     defaultName: "<Ellipse>",
     documentationLink: "https://www.remotion.dev/docs/shapes/ellipse",
     ...makeEllipse({ rx, ry }),
@@ -16164,6 +16672,7 @@ var EllipseInner = ({ rx, ry, ...props }) => {
 };
 var Ellipse = Internals.wrapInSchema({
   Component: EllipseInner,
+  componentIdentity: "dev.remotion.shapes.Ellipse",
   schema: ellipseSchema,
   supportsEffects: true
 });
@@ -16287,7 +16796,7 @@ var HeartInner = ({
   depthAdjustment = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx52(RenderSvg, {
+  return /* @__PURE__ */ jsx62(RenderSvg, {
     defaultName: "<Heart>",
     documentationLink: "https://www.remotion.dev/docs/shapes/heart",
     ...makeHeart({
@@ -16301,6 +16810,7 @@ var HeartInner = ({
 };
 var Heart = Internals.wrapInSchema({
   Component: HeartInner,
+  componentIdentity: "dev.remotion.shapes.Heart",
   schema: heartSchema,
   supportsEffects: true
 });
@@ -16445,7 +16955,7 @@ var PieInner = ({
   rotation,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx62(RenderSvg, {
+  return /* @__PURE__ */ jsx72(RenderSvg, {
     defaultName: "<Pie>",
     documentationLink: "https://www.remotion.dev/docs/shapes/pie",
     ...makePie({ radius, progress, closePath, counterClockwise, rotation }),
@@ -16454,134 +16964,11 @@ var PieInner = ({
 };
 var Pie = Internals.wrapInSchema({
   Component: PieInner,
+  componentIdentity: "dev.remotion.shapes.Pie",
   schema: pieSchema,
   supportsEffects: true
 });
 Internals.addSequenceStackTraces(Pie);
-var shortenVector = (vector, radius) => {
-  const [x, y] = vector;
-  const currentLength = Math.sqrt(x * x + y * y);
-  const scalingFactor = (currentLength - radius) / currentLength;
-  return [x * scalingFactor, y * scalingFactor];
-};
-var scaleVectorToLength = (vector, length2) => {
-  const [x, y] = vector;
-  const currentLength = Math.sqrt(x * x + y * y);
-  const scalingFactor = length2 / currentLength;
-  return [x * scalingFactor, y * scalingFactor];
-};
-var joinPoints = (points, {
-  edgeRoundness,
-  cornerRadius,
-  roundCornerStrategy
-}) => {
-  return points.map(([x, y], i) => {
-    const prevPointIndex = i === 0 ? points.length - 2 : i - 1;
-    const prevPoint = points[prevPointIndex];
-    const nextPointIndex = i === points.length - 1 ? 1 : i + 1;
-    const nextPoint = points[nextPointIndex];
-    const middleOfLine = [(x + nextPoint[0]) / 2, (y + nextPoint[1]) / 2];
-    const prevPointMiddleOfLine = [
-      (x + prevPoint[0]) / 2,
-      (y + prevPoint[1]) / 2
-    ];
-    const prevVector = [x - prevPoint[0], y - prevPoint[1]];
-    const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
-    if (i === 0) {
-      if (edgeRoundness !== null) {
-        return [
-          {
-            type: "M",
-            x: middleOfLine[0],
-            y: middleOfLine[1]
-          }
-        ];
-      }
-      if (cornerRadius !== 0) {
-        const computeRadius = shortenVector(nextVector, cornerRadius);
-        return [
-          {
-            type: "M",
-            x: computeRadius[0] + x,
-            y: computeRadius[1] + y
-          }
-        ];
-      }
-      return [
-        {
-          type: "M",
-          x,
-          y
-        }
-      ];
-    }
-    if (cornerRadius && edgeRoundness !== null) {
-      throw new Error(`"cornerRadius" and "edgeRoundness" cannot be specified at the same time.`);
-    }
-    if (edgeRoundness === null) {
-      if (cornerRadius === 0) {
-        return [
-          {
-            type: "L",
-            x,
-            y
-          }
-        ];
-      }
-      const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
-      const prevVectorLength = scaleVectorToLength(prevVector, cornerRadius);
-      const nextVectorMinusRadius = scaleVectorToLength(nextVector, cornerRadius);
-      const firstDraw = [
-        prevPoint[0] + prevVectorMinusRadius[0],
-        prevPoint[1] + prevVectorMinusRadius[1]
-      ];
-      return [
-        {
-          type: "L",
-          x: firstDraw[0],
-          y: firstDraw[1]
-        },
-        roundCornerStrategy === "arc" ? {
-          type: "a",
-          rx: cornerRadius,
-          ry: cornerRadius,
-          xAxisRotation: 0,
-          dx: prevVectorLength[0] + nextVectorMinusRadius[0],
-          dy: prevVectorLength[1] + nextVectorMinusRadius[1],
-          largeArcFlag: false,
-          sweepFlag: true
-        } : {
-          type: "C",
-          x: firstDraw[0] + prevVectorLength[0] + nextVectorMinusRadius[0],
-          y: firstDraw[1] + prevVectorLength[1] + nextVectorMinusRadius[1],
-          cp1x: x,
-          cp1y: y,
-          cp2x: x,
-          cp2y: y
-        }
-      ];
-    }
-    const controlPoint1 = [
-      prevPointMiddleOfLine[0] + prevVector[0] * edgeRoundness * 0.5,
-      prevPointMiddleOfLine[1] + prevVector[1] * edgeRoundness * 0.5
-    ];
-    const controlPoint2 = [
-      middleOfLine[0] - nextVector[0] * edgeRoundness * 0.5,
-      middleOfLine[1] - nextVector[1] * edgeRoundness * 0.5
-    ];
-    return [
-      {
-        type: "C",
-        cp1x: controlPoint1[0],
-        cp1y: controlPoint1[1],
-        cp2x: controlPoint2[0],
-        cp2y: controlPoint2[1],
-        x: middleOfLine[0],
-        y: middleOfLine[1]
-      }
-    ];
-  }).flat(1);
-};
 function polygon({
   points,
   radius,
@@ -16662,7 +17049,7 @@ var PolygonInner = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx72(RenderSvg, {
+  return /* @__PURE__ */ jsx82(RenderSvg, {
     defaultName: "<Polygon>",
     documentationLink: "https://www.remotion.dev/docs/shapes/polygon",
     ...makePolygon({
@@ -16676,6 +17063,7 @@ var PolygonInner = ({
 };
 var Polygon = Internals.wrapInSchema({
   Component: PolygonInner,
+  componentIdentity: "dev.remotion.shapes.Polygon",
   schema: polygonSchema,
   supportsEffects: true
 });
@@ -16732,7 +17120,7 @@ var RectInner = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx82(RenderSvg, {
+  return /* @__PURE__ */ jsx92(RenderSvg, {
     defaultName: "<Rect>",
     documentationLink: "https://www.remotion.dev/docs/shapes/rect",
     ...makeRect({ height, width, edgeRoundness, cornerRadius }),
@@ -16741,6 +17129,7 @@ var RectInner = ({
 };
 var Rect = Internals.wrapInSchema({
   Component: RectInner,
+  componentIdentity: "dev.remotion.shapes.Rect",
   schema: rectSchema,
   supportsEffects: true
 });
@@ -16835,7 +17224,7 @@ var StarInner = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx92(RenderSvg, {
+  return /* @__PURE__ */ jsx102(RenderSvg, {
     defaultName: "<Star>",
     documentationLink: "https://www.remotion.dev/docs/shapes/star",
     ...makeStar({
@@ -16850,6 +17239,7 @@ var StarInner = ({
 };
 var Star = Internals.wrapInSchema({
   Component: StarInner,
+  componentIdentity: "dev.remotion.shapes.Star",
   schema: starSchema,
   supportsEffects: true
 });
@@ -16946,7 +17336,7 @@ var TriangleInner = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx102(RenderSvg, {
+  return /* @__PURE__ */ jsx112(RenderSvg, {
     defaultName: "<Triangle>",
     documentationLink: "https://www.remotion.dev/docs/shapes/triangle",
     ...makeTriangle({ length: length2, direction, edgeRoundness, cornerRadius }),
@@ -16955,6 +17345,7 @@ var TriangleInner = ({
 };
 var Triangle = Internals.wrapInSchema({
   Component: TriangleInner,
+  componentIdentity: "dev.remotion.shapes.Triangle",
   schema: triangleSchema,
   supportsEffects: true
 });
@@ -18035,7 +18426,7 @@ import { jsx as jsx83, jsxs as jsxs32 } from "react/jsx-runtime";
 import { jsx as jsx93 } from "react/jsx-runtime";
 import React72 from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 import { jsx as jsx122 } from "react/jsx-runtime";
 import * as React36 from "react";
 import * as ReactDOM4 from "react-dom";
@@ -18595,7 +18986,7 @@ var Button = ({
   const [dimensions, setDimensions] = useState22(null);
   const ref = useRef210(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
-  const onPointerEnter = useCallback26((e) => {
+  const onPointerEnter = useCallback27((e) => {
     if (e.pointerType !== "mouse") {
       return;
     }
@@ -18632,7 +19023,7 @@ var Button = ({
   const isDisabled = disabled || loading;
   const isAnchor = !asChild && "href" in rest && rest.href !== undefined;
   const sharedClasses = cn("text-text", "inline-flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex-row", "items-center", "relative", "overflow-hidden", isDisabled && "cursor-default opacity-50", className);
-  const preventInteraction = useCallback26((e) => {
+  const preventInteraction = useCallback27((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
@@ -18843,7 +19234,7 @@ var Link = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx112("a", {
+  return /* @__PURE__ */ jsx113("a", {
     ...props,
     className: cn(className, "text-brand underline underline-offset-4"),
     children: props.children
@@ -24726,10 +25117,10 @@ var Triangle22 = (props) => {
 };
 
 // src/components/design.tsx
-import { useCallback as useCallback38, useState as useState39 } from "react";
+import { useCallback as useCallback39, useState as useState39 } from "react";
 
 // src/components/ManageTeamMembers.tsx
-import React53, { useCallback as useCallback37, useState as useState38 } from "react";
+import React53, { useCallback as useCallback38, useState as useState38 } from "react";
 import { jsx as jsx45, jsxs as jsxs6, Fragment as Fragment9 } from "react/jsx-runtime";
 function generateId() {
   return Math.random().toString(36).substr(2, 9);
@@ -24775,7 +25166,7 @@ var Row = ({ value, onChange, onDelete, disableDelete }) => {
 var ManageTeamMembers = () => {
   const [members, setMembers] = useState38(initialMembers);
   const displayedMembers = [...members, { id: "NEW", name: "" }];
-  const updateMember = useCallback37((idx, value) => {
+  const updateMember = useCallback38((idx, value) => {
     if (idx === members.length) {
       if (value.trim() !== "") {
         setMembers((prev) => [...prev, { id: generateId(), name: value }]);
@@ -24784,11 +25175,11 @@ var ManageTeamMembers = () => {
       setMembers((prev) => prev.map((m, i) => i === idx ? { ...m, name: value } : m));
     }
   }, [members.length]);
-  const deleteMember = useCallback37((idx) => {
+  const deleteMember = useCallback38((idx) => {
     setMembers((prev) => prev.filter((_, i) => i !== idx));
   }, []);
   const [loading, setLoading] = useState38(false);
-  const save = useCallback37(() => {
+  const save = useCallback38(() => {
     setLoading(true);
     setTimeout(() => {
       setLoading(false);
@@ -24847,20 +25238,20 @@ var DesignPage = () => {
   const [active, setActive] = useState39(false);
   const [submitButtonActive, setSubmitButtonActive] = useState39(true);
   const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState39(true);
-  const onClick = useCallback38(() => {
+  const onClick = useCallback39(() => {
     setSubmitButtonActive(false);
     setTimeout(() => {
       setSubmitButtonActive(true);
     }, 1000);
   }, []);
-  const onClickPrimary = useCallback38(() => {
+  const onClickPrimary = useCallback39(() => {
     setSubmitButtonPrimaryActive(false);
     setTimeout(() => {
       setSubmitButtonPrimaryActive(true);
     }, 1000);
   }, []);
   const [saving, setSaving] = useState39(false);
-  const save = useCallback38(() => {
+  const save = useCallback39(() => {
     setSaving(true);
     setTimeout(() => {
       setSaving(false);