remotion 4.0.528 → 4.0.529

package/dist/cjs/HtmlInCanvas.d.ts

@@ -63,6 +63,7 @@ export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Interac
     readonly onPaint?: HtmlInCanvasOnPaint;
     readonly onInit?: HtmlInCanvasOnInit;
     readonly pixelDensity?: HtmlInCanvasPixelDensity;
+    readonly _remotionInternalCanvasSiblings?: React.ReactNode;
 };
 export declare const htmlInCanvasSchema: {
     readonly 'style.transformOrigin': {
@@ -290,6 +291,7 @@ export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<Interact
     readonly onPaint?: HtmlInCanvasOnPaint | undefined;
     readonly onInit?: HtmlInCanvasOnInit | undefined;
     readonly pixelDensity?: number | undefined;
+    readonly _remotionInternalCanvasSiblings?: React.ReactNode;
 } & React.RefAttributes<HTMLCanvasElement>> & {
     readonly isSupported: () => boolean;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -100,7 +100,7 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
 };
 /* eslint-enable react/require-default-props */
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
-const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, onPaint, onInit, pixelDensity, controls, style, }, ref) => {
+const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, canvasSiblings, onPaint, onInit, pixelDensity, controls, style, }, ref) => {
     var _a;
     const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
@@ -360,10 +360,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [height, style, width]);
-    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
+    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsxs("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: [
+                jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }), canvasSiblings] }, canvasSizeKey) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, _remotionInternalCanvasSiblings, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
     var _a;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
@@ -394,7 +395,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
         style: premountingStyle,
         componentName: '<HtmlInCanvas />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, canvasSiblings: _remotionInternalCanvasSiblings !== null && _remotionInternalCanvasSiblings !== void 0 ? _remotionInternalCanvasSiblings : null, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {

package/dist/cjs/Interactive.js

@@ -94,7 +94,7 @@ const interactiveSvgPathElementSchema = {
         type: 'svg-path',
         default: undefined,
         description: 'Path',
-        keyframable: false,
+        keyframable: true,
     },
 };
 const interactiveSvgStrokeElementSchema = {

package/dist/cjs/TimelineContext.d.ts

@@ -20,7 +20,7 @@ export type BufferingState = Readonly<{
 }>;
 export type SetTimelineContextValue = {
     seek: TimelineSeek | null;
-    setFrame: (u: React.SetStateAction<Record<string, number>>) => void;
+    setFrameWithoutSeek: (u: React.SetStateAction<Record<string, number>>) => void;
     setPlaying: (u: React.SetStateAction<boolean>) => void;
     setBuffering: (buffering: boolean) => void;
     subscribePlaying: (listener: (state: PlayingState) => void) => () => void;

package/dist/cjs/TimelineContext.js

@@ -13,7 +13,7 @@ const missingSetTimelineContext = () => {
 };
 exports.SetTimelineContext = (0, react_1.createContext)({
     seek: null,
-    setFrame: missingSetTimelineContext,
+    setFrameWithoutSeek: missingSetTimelineContext,
     setPlaying: missingSetTimelineContext,
     setBuffering: missingSetTimelineContext,
     subscribePlaying: () => () => undefined,
@@ -88,7 +88,7 @@ const TimelineContextProvider = ({ children, frameState }) => {
     }, [playbackRate]);
     const setTimelineContextValue = (0, react_1.useMemo)(() => {
         return {
-            setFrame,
+            setFrameWithoutSeek: setFrame,
             seek,
             setPlaying: (updater) => {
                 const current = playingStore.store.getSnapshot().playing;

package/dist/cjs/interactivity-schema.d.ts

@@ -96,7 +96,7 @@ export type SvgPathFieldSchema = {
     type: 'svg-path';
     default: string | undefined;
     description?: string;
-    keyframable?: false;
+    keyframable?: boolean;
 };
 export type FontFamilyFieldSchema = {
     type: 'font-family';

package/dist/cjs/internals.d.ts

@@ -1027,7 +1027,7 @@ export declare const Internals: {
     }) => void;
     readonly usePlaybackRate: () => PlaybackRateContextValue;
     readonly useTimelineContext: () => TimelineContextValue;
-    readonly useTimelineSetFrame: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
+    readonly useTimelineSetFrameWithoutSeek: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
     readonly isIosSafari: () => boolean;
     readonly WATCH_REMOTION_STATIC_FILES: "remotion_staticFilesChanged";
     readonly addSequenceStackTraces: (component: unknown) => void;
@@ -1239,6 +1239,17 @@ export declare const Internals: {
         forceSpringAllowTail: boolean | null;
         status: CanUpdateSequencePropStatusKeyframed;
     }) => string | number | readonly number[] | null;
+    readonly setInterpolatePaths: (interpolator: (input: number, inputRange: readonly number[], outputRange: readonly string[], options: Pick<Partial<{
+        easing: readonly import("./interpolate.js").EasingFunction[] | import("./interpolate.js").EasingFunction;
+        extrapolateLeft: import("./interpolate.js").ExtrapolateType;
+        extrapolateRight: import("./interpolate.js").ExtrapolateType;
+        output: import("./interpolate.js").InterpolateOutputOption;
+        outputType: import("./interpolate.js").InterpolateOutputType;
+        posterize: number;
+    }>, "easing" | "posterize"> & {
+        extrapolateLeft: "clamp" | "extend" | "wrap";
+        extrapolateRight: "clamp" | "extend" | "wrap";
+    }) => string) => void;
     readonly makeStaticDragOverride: (value: unknown) => DragOverrideValue;
     readonly makeKeyframedDragOverride: ({ status, frame, value, defaultEasing, }: {
         status: CanUpdateSequencePropStatusKeyframed;

package/dist/cjs/internals.js

@@ -235,7 +235,7 @@ exports.Internals = {
     persistCurrentFrame: timeline_position_state_js_1.persistCurrentFrame,
     usePlaybackRate: timeline_position_state_js_1.usePlaybackRate,
     useTimelineContext: timeline_position_state_js_1.useTimelineContext,
-    useTimelineSetFrame: timeline_position_state_js_1.useTimelineSetFrame,
+    useTimelineSetFrameWithoutSeek: timeline_position_state_js_1.useTimelineSetFrameWithoutSeek,
     isIosSafari: video_fragment_js_1.isIosSafari,
     WATCH_REMOTION_STATIC_FILES: watch_static_file_js_1.WATCH_REMOTION_STATIC_FILES,
     addSequenceStackTraces: enable_sequence_stack_traces_js_1.addSequenceStackTraces,
@@ -291,6 +291,7 @@ exports.Internals = {
     createWebGL2ContextError: webgl2_context_error_js_1.createWebGL2ContextError,
     computeEffectiveSchemaValuesDotNotation: use_schema_js_1.computeEffectiveSchemaValuesDotNotation,
     interpolateKeyframedStatus: interpolate_keyframed_status_js_1.interpolateKeyframedStatus,
+    setInterpolatePaths: interpolate_keyframed_status_js_1.setInterpolatePaths,
     makeStaticDragOverride: use_schema_js_1.makeStaticDragOverride,
     makeKeyframedDragOverride: use_schema_js_1.makeKeyframedDragOverride,
     resolveDragOverrideValue: get_effective_visual_mode_value_js_1.resolveDragOverrideValue,

package/dist/cjs/interpolate-keyframed-status.d.ts

@@ -1,5 +1,11 @@
+import type { ExtrapolateType, InterpolateOptions } from './interpolate.js';
 import type { CanUpdateSequencePropStatusKeyframed } from './use-schema.js';
 type InterpolateKeyframedStatusResult = number | string | readonly number[] | null;
+type PathInterpolator = (input: number, inputRange: readonly number[], outputRange: readonly string[], options: Pick<InterpolateOptions, 'easing' | 'posterize'> & {
+    extrapolateLeft: Exclude<ExtrapolateType, 'identity'>;
+    extrapolateRight: Exclude<ExtrapolateType, 'identity'>;
+}) => string;
+export declare const setInterpolatePaths: (interpolator: PathInterpolator) => void;
 export declare const interpolateKeyframedStatus: ({ frame, forceSpringAllowTail, status, }: {
     frame: number;
     forceSpringAllowTail: boolean | null;

package/dist/cjs/interpolate-keyframed-status.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.interpolateKeyframedStatus = void 0;
+exports.interpolateKeyframedStatus = exports.setInterpolatePaths = void 0;
 const bezier_js_1 = require("./bezier.js");
 const easing_js_1 = require("./easing.js");
 const interpolate_colors_js_1 = require("./interpolate-colors.js");
 const interpolate_js_1 = require("./interpolate.js");
+// Studio supplies the path interpolator to avoid a dependency from remotion
+// to @remotion/paths, which itself uses remotion's interpolation timing.
+let interpolatePaths = null;
+const setInterpolatePaths = (interpolator) => {
+    interpolatePaths = interpolator;
+};
+exports.setInterpolatePaths = setInterpolatePaths;
 const easingToFn = ({ easing, forceSpringAllowTail, }) => {
     var _a, _b;
     switch (easing.type) {
@@ -35,6 +42,30 @@ const interpolateKeyframedStatus = ({ frame, forceSpringAllowTail, status, }) =>
     const sortedKeyframes = [...keyframes].sort((a, b) => a.frame - b.frame);
     const inputRange = sortedKeyframes.map((k) => k.frame);
     const outputs = sortedKeyframes.map((k) => k.value);
+    if (interpolationFunction === 'interpolatePaths') {
+        if (!outputs.every((v) => typeof v === 'string')) {
+            return null;
+        }
+        if (keyframes.length === 1) {
+            return outputs[0];
+        }
+        if (!interpolatePaths ||
+            clamping.left === 'identity' ||
+            clamping.right === 'identity') {
+            return null;
+        }
+        try {
+            return interpolatePaths(frame, inputRange, outputs, {
+                easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
+                extrapolateLeft: clamping.left,
+                extrapolateRight: clamping.right,
+                posterize: status.posterize,
+            });
+        }
+        catch (_a) {
+            return null;
+        }
+    }
     if (interpolationFunction === 'interpolateColors') {
         if (!outputs.every((v) => typeof v === 'string')) {
             return null;
@@ -48,7 +79,7 @@ const interpolateKeyframedStatus = ({ frame, forceSpringAllowTail, status, }) =>
                 posterize: status.posterize,
             });
         }
-        catch (_a) {
+        catch (_b) {
             return null;
         }
     }
@@ -64,7 +95,7 @@ const interpolateKeyframedStatus = ({ frame, forceSpringAllowTail, status, }) =>
             posterize: status.posterize,
         });
     }
-    catch (_b) {
+    catch (_c) {
         return null;
     }
 };

package/dist/cjs/timeline-position-state.d.ts

@@ -13,7 +13,7 @@ export declare const usePlaybackRate: () => PlaybackRateContextValue;
 export declare const useTimelinePosition: () => number;
 export declare const useIsInsideFreeze: () => boolean;
 export declare const useAbsoluteTimelinePosition: () => number;
-export declare const useTimelineSetFrame: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
+export declare const useTimelineSetFrameWithoutSeek: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
 export declare const useTimelineSeekFrame: () => (frame: import("react").SetStateAction<Record<string, number>>) => void;
 export { usePlaying } from './use-playing.js';
 export { useBuffering } from './use-buffering.js';

package/dist/cjs/timeline-position-state.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBuffering = exports.usePlaying = exports.useTimelineSeekFrame = exports.useTimelineSetFrame = exports.useAbsoluteTimelinePosition = exports.useIsInsideFreeze = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
+exports.useBuffering = exports.usePlaying = exports.useTimelineSeekFrame = exports.useTimelineSetFrameWithoutSeek = exports.useAbsoluteTimelinePosition = exports.useIsInsideFreeze = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
 const react_1 = require("react");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -81,16 +81,17 @@ const useAbsoluteTimelinePosition = () => {
     return useTimelinePositionFromContext(state);
 };
 exports.useAbsoluteTimelinePosition = useAbsoluteTimelinePosition;
-const useTimelineSetFrame = () => {
-    const { setFrame } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
-    return setFrame;
+// Playback and frame persistence only. Navigation must use useTimelineSeekFrame.
+const useTimelineSetFrameWithoutSeek = () => {
+    const { setFrameWithoutSeek } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
+    return setFrameWithoutSeek;
 };
-exports.useTimelineSetFrame = useTimelineSetFrame;
-// Explicit navigation only. Playback and frame persistence must use setFrame.
+exports.useTimelineSetFrameWithoutSeek = useTimelineSetFrameWithoutSeek;
+// Explicit navigation only. Rendering and thumbnails have no seek revision.
 const useTimelineSeekFrame = () => {
     var _a;
-    const { seek, setFrame } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
-    return (_a = seek === null || seek === void 0 ? void 0 : seek.setFrame) !== null && _a !== void 0 ? _a : setFrame;
+    const { seek, setFrameWithoutSeek } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
+    return (_a = seek === null || seek === void 0 ? void 0 : seek.seekFrame) !== null && _a !== void 0 ? _a : setFrameWithoutSeek;
 };
 exports.useTimelineSeekFrame = useTimelineSeekFrame;
 const use_playing_js_1 = require("./use-playing.js");

package/dist/cjs/use-schema.d.ts

@@ -61,7 +61,7 @@ export type CanUpdateSequencePropStatusClamping = {
     left: ExtrapolateType;
     right: ExtrapolateType;
 };
-export type CanUpdateSequencePropStatusInterpolationFunction = 'interpolate' | 'interpolateColors';
+export type CanUpdateSequencePropStatusInterpolationFunction = 'interpolate' | 'interpolateColors' | 'interpolatePaths';
 export type CanUpdateSequencePropStatusComputed = {
     status: 'computed';
 };

package/dist/cjs/use-timeline-seek.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject, SetStateAction } from 'react';
 export type TimelineSeek = {
     readonly revision: RefObject<number>;
-    readonly setFrame: (frame: SetStateAction<Record<string, number>>) => void;
+    readonly seekFrame: (frame: SetStateAction<Record<string, number>>) => void;
 };
 export declare const useTimelineSeek: (setFrame: (frame: SetStateAction<Record<string, number>>) => void) => TimelineSeek;

package/dist/cjs/use-timeline-seek.js

@@ -8,7 +8,7 @@ const useTimelineSeek = (setFrame) => {
     const revision = (0, react_1.useRef)(0);
     return (0, react_1.useMemo)(() => ({
         revision,
-        setFrame: (frame) => {
+        seekFrame: (frame) => {
             // Even a same-frame seek is a boundary for the next media update.
             revision.current++;
             setFrame(frame);

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.528";
+export declare const VERSION = "4.0.529";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.528';
+exports.VERSION = '4.0.529';

package/dist/esm/index.mjs

@@ -1537,7 +1537,7 @@ var Composition = (props) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.528";
+var VERSION = "4.0.529";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1589,7 +1589,7 @@ import { useContext as useContext15, useMemo as useMemo10 } from "react";
 // src/timeline-position-state.ts
 var exports_timeline_position_state = {};
 __export(exports_timeline_position_state, {
-  useTimelineSetFrame: () => useTimelineSetFrame,
+  useTimelineSetFrameWithoutSeek: () => useTimelineSetFrameWithoutSeek,
   useTimelineSeekFrame: () => useTimelineSeekFrame,
   useTimelinePosition: () => useTimelinePosition,
   useTimelineContext: () => useTimelineContext,
@@ -1648,7 +1648,7 @@ var useTimelineSeek = (setFrame) => {
   const revision = useRef2(0);
   return useMemo8(() => ({
     revision,
-    setFrame: (frame) => {
+    seekFrame: (frame) => {
       revision.current++;
       setFrame(frame);
     }
@@ -1662,7 +1662,7 @@ var missingSetTimelineContext = () => {
 };
 var SetTimelineContext = createContext13({
   seek: null,
-  setFrame: missingSetTimelineContext,
+  setFrameWithoutSeek: missingSetTimelineContext,
   setPlaying: missingSetTimelineContext,
   setBuffering: missingSetTimelineContext,
   subscribePlaying: () => () => {
@@ -1736,7 +1736,7 @@ var TimelineContextProvider = ({ children, frameState }) => {
   }, [playbackRate]);
   const setTimelineContextValue = useMemo9(() => {
     return {
-      setFrame,
+      setFrameWithoutSeek: setFrame,
       seek,
       setPlaying: (updater) => {
         const current = playingStore.store.getSnapshot().playing;
@@ -1892,13 +1892,13 @@ var useAbsoluteTimelinePosition = () => {
   }
   return useTimelinePositionFromContext(state);
 };
-var useTimelineSetFrame = () => {
-  const { setFrame } = useContext12(SetTimelineContext);
-  return setFrame;
+var useTimelineSetFrameWithoutSeek = () => {
+  const { setFrameWithoutSeek } = useContext12(SetTimelineContext);
+  return setFrameWithoutSeek;
 };
 var useTimelineSeekFrame = () => {
-  const { seek, setFrame } = useContext12(SetTimelineContext);
-  return seek?.setFrame ?? setFrame;
+  const { seek, setFrameWithoutSeek } = useContext12(SetTimelineContext);
+  return seek?.seekFrame ?? setFrameWithoutSeek;
 };
 
 // src/use-current-frame.ts
@@ -4765,6 +4765,10 @@ var interpolateColors = (input, inputRange, outputRange, options) => {
 };
 
 // src/interpolate-keyframed-status.ts
+var interpolatePaths = null;
+var setInterpolatePaths = (interpolator) => {
+  interpolatePaths = interpolator;
+};
 var easingToFn = ({
   easing,
   forceSpringAllowTail
@@ -4801,6 +4805,27 @@ var interpolateKeyframedStatus = ({
   const sortedKeyframes = [...keyframes].sort((a2, b2) => a2.frame - b2.frame);
   const inputRange = sortedKeyframes.map((k) => k.frame);
   const outputs = sortedKeyframes.map((k) => k.value);
+  if (interpolationFunction === "interpolatePaths") {
+    if (!outputs.every((v) => typeof v === "string")) {
+      return null;
+    }
+    if (keyframes.length === 1) {
+      return outputs[0];
+    }
+    if (!interpolatePaths || clamping.left === "identity" || clamping.right === "identity") {
+      return null;
+    }
+    try {
+      return interpolatePaths(frame, inputRange, outputs, {
+        easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
+        extrapolateLeft: clamping.left,
+        extrapolateRight: clamping.right,
+        posterize: status.posterize
+      });
+    } catch {
+      return null;
+    }
+  }
   if (interpolationFunction === "interpolateColors") {
     if (!outputs.every((v) => typeof v === "string")) {
       return null;
@@ -10814,7 +10839,7 @@ import {
   useMemo as useMemo32,
   useRef as useRef24
 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs3 } from "react/jsx-runtime";
 var transferredOffscreenCanvases = new WeakMap;
 var getTransferredOffscreenCanvas = (canvas) => {
   const existing = transferredOffscreenCanvases.get(canvas);
@@ -10894,6 +10919,7 @@ var HtmlInCanvasContent = forwardRef9(({
   height,
   effects,
   children,
+  canvasSiblings,
   onPaint,
   onInit,
   pixelDensity,
@@ -11135,16 +11161,19 @@ var HtmlInCanvasContent = forwardRef9(({
   }, [height, style, width]);
   return /* @__PURE__ */ jsx27(HtmlInCanvasAncestorContext.Provider, {
     value: true,
-    children: /* @__PURE__ */ jsx27("canvas", {
+    children: /* @__PURE__ */ jsxs3("canvas", {
       ref: setLayoutCanvasRef,
       width: canvasWidth,
       height: canvasHeight,
       style: canvasStyle,
-      children: /* @__PURE__ */ jsx27("div", {
-        ref: divRef,
-        style: innerStyle,
-        children
-      })
+      children: [
+        /* @__PURE__ */ jsx27("div", {
+          ref: divRef,
+          style: innerStyle,
+          children
+        }),
+        canvasSiblings
+      ]
     }, canvasSizeKey)
   });
 });
@@ -11157,6 +11186,7 @@ var HtmlInCanvasInner = forwardRef9(({
   onPaint,
   onInit,
   pixelDensity,
+  _remotionInternalCanvasSiblings,
   controls,
   style,
   cropLeft,
@@ -11231,6 +11261,7 @@ var HtmlInCanvasInner = forwardRef9(({
         onPaint,
         onInit,
         pixelDensity,
+        canvasSiblings: _remotionInternalCanvasSiblings ?? null,
         controls,
         style: croppedStyle ?? undefined,
         children
@@ -12316,7 +12347,7 @@ var interactiveSvgPathElementSchema = {
     type: "svg-path",
     default: undefined,
     description: "Path",
-    keyframable: false
+    keyframable: true
   }
 };
 var interactiveSvgStrokeElementSchema = {
@@ -14233,7 +14264,7 @@ var Internals = {
   persistCurrentFrame,
   usePlaybackRate,
   useTimelineContext,
-  useTimelineSetFrame,
+  useTimelineSetFrameWithoutSeek,
   isIosSafari,
   WATCH_REMOTION_STATIC_FILES,
   addSequenceStackTraces,
@@ -14289,6 +14320,7 @@ var Internals = {
   createWebGL2ContextError,
   computeEffectiveSchemaValuesDotNotation,
   interpolateKeyframedStatus,
+  setInterpolatePaths,
   makeStaticDragOverride,
   makeKeyframedDragOverride,
   resolveDragOverrideValue,
@@ -14329,7 +14361,7 @@ var flattenChildren = (children) => {
 };
 
 // src/series/index.tsx
-import { jsx as jsx38, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
 var seriesSequenceSchema = {
   durationInFrames: Interactive.baseSchema.durationInFrames,
   name: Interactive.sequenceSchema.name,
@@ -14427,7 +14459,7 @@ var SeriesInner = (props2) => {
           });
           const currentStartFrame = startFrame + offset;
           const nextStartFrame = startFrame + durationInFramesProp + offset;
-          return /* @__PURE__ */ jsxs3(Fragment, {
+          return /* @__PURE__ */ jsxs4(Fragment, {
             children: [
               /* @__PURE__ */ jsx38(SequenceWithoutSchemaWithRef, {
                 ref,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.528";
+var VERSION = "4.0.529";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.528",
+	"version": "4.0.529",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.5.4",
-		"@remotion/eslint-config-internal": "4.0.528",
+		"@remotion/eslint-config-internal": "4.0.529",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},