remotion 4.0.511 → 4.0.513

package/dist/cjs/HtmlInCanvas.js

@@ -13,6 +13,23 @@ const use_crop_style_js_1 = require("./use-crop-style.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
+// `transferControlToOffscreen()` may only be called once per canvas — a second
+// call throws an `InvalidStateError`. The layout effect that needs the
+// `OffscreenCanvas` can run more than once for the same canvas element: its
+// dependencies (e.g. the paint callback) can change identity without the
+// canvas remounting, and React StrictMode intentionally double-invokes
+// effects. Cache the transferred `OffscreenCanvas` per canvas element so
+// re-runs reuse it instead of throwing.
+const transferredOffscreenCanvases = new WeakMap();
+const getTransferredOffscreenCanvas = (canvas) => {
+    const existing = transferredOffscreenCanvases.get(canvas);
+    if (existing) {
+        return existing;
+    }
+    const offscreen = canvas.transferControlToOffscreen();
+    transferredOffscreenCanvases.set(canvas, offscreen);
+    return offscreen;
+};
 // Memoize the support check across the session — neither the platform
 // capability nor the chrome://flags toggle can change between calls.
 // SSR results are not cached so the check runs again once `document` exists.
@@ -297,7 +314,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         placeholder.layoutSubtree = true;
         const paintTarget = usesDirectLayoutCanvas
             ? placeholder
-            : placeholder.transferControlToOffscreen();
+            : getTransferredOffscreenCanvas(placeholder);
         paintTargetRef.current = paintTarget;
         resizePaintTarget({
             target: paintTarget,

package/dist/cjs/get-effective-visual-mode-value.d.ts

@@ -5,6 +5,10 @@ export type ResolvedDragOverrideValue = {
     readonly type: 'resolved';
     readonly value: unknown;
 };
+export declare const getFrameInKeyframedStatusClock: ({ frame, status, }: {
+    readonly frame: number;
+    readonly status: CanUpdateSequencePropStatusKeyframed;
+}) => number;
 export declare const resolveDragOverrideValue: ({ dragOverrideValue, frame, }: {
     dragOverrideValue: DragOverrideValue | undefined;
     frame: number | null;

package/dist/cjs/get-effective-visual-mode-value.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEffectiveVisualModeValue = exports.resolveDragOverrideValue = void 0;
+exports.getEffectiveVisualModeValue = exports.resolveDragOverrideValue = exports.getFrameInKeyframedStatusClock = void 0;
 const interpolate_keyframed_status_1 = require("./interpolate-keyframed-status");
+const getFrameInKeyframedStatusClock = ({ frame, status, }) => {
+    var _a;
+    return frame - ((_a = status.keyframeDisplayOffsetAdjustment) !== null && _a !== void 0 ? _a : 0);
+};
+exports.getFrameInKeyframedStatusClock = getFrameInKeyframedStatusClock;
 const resolveDragOverrideValue = ({ dragOverrideValue, frame, }) => {
     if (dragOverrideValue === undefined) {
         return { type: 'none' };
@@ -14,7 +19,10 @@ const resolveDragOverrideValue = ({ dragOverrideValue, frame, }) => {
     }
     const interpolated = (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
         forceSpringAllowTail: null,
-        frame,
+        frame: (0, exports.getFrameInKeyframedStatusClock)({
+            frame,
+            status: dragOverrideValue.status,
+        }),
         status: dragOverrideValue.status,
     });
     if (interpolated === null) {
@@ -35,7 +43,7 @@ const getEffectiveVisualModeValue = ({ propStatus, dragOverrideValue, defaultVal
         if (frame !== null) {
             return (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
                 forceSpringAllowTail: null,
-                frame,
+                frame: (0, exports.getFrameInKeyframedStatusClock)({ frame, status: propStatus }),
                 status: propStatus,
             });
         }

package/dist/cjs/interpolate.js

@@ -490,8 +490,12 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
     var _a;
     const initiallyParsedOutputRange = outputRange.map(parseStringInterpolationValue);
     const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
+    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
+        ? input
+        : Math.floor(input / options.posterize) * options.posterize;
+    const segmentIndex = inputRange.length === 1 ? 0 : findRange(posterizedInput, inputRange);
     const parsedOutputRange = hasAxisRotation
-        ? initiallyParsedOutputRange.map((parsed) => {
+        ? initiallyParsedOutputRange.map((parsed, index) => {
             if (parsed.kind !== 'rotate') {
                 return parsed;
             }
@@ -501,9 +505,22 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
             if (parsed.dimensions !== 1) {
                 throw new TypeError('Cannot interpolate a multi-angle rotate value with an axis rotation');
             }
+            // A zero-degree rotation is the identity regardless of its axis. Reusing
+            // the active neighbor's axis prevents the axis from drifting while the
+            // angle interpolates away from zero.
+            const adjacentAxisRotation = parsed.values[0] === 0
+                ? index === segmentIndex
+                    ? initiallyParsedOutputRange[index + 1]
+                    : index === segmentIndex + 1
+                        ? initiallyParsedOutputRange[index - 1]
+                        : undefined
+                : undefined;
+            const axis = (adjacentAxisRotation === null || adjacentAxisRotation === void 0 ? void 0 : adjacentAxisRotation.axisRotation)
+                ? adjacentAxisRotation.values
+                : [0, 0, 1];
             return {
                 kind: 'rotate',
-                values: [0, 0, 1, parsed.values[0]],
+                values: [axis[0], axis[1], axis[2], parsed.values[0]],
                 units: [null, null, null, parsed.units[0]],
                 dimensions: 4,
                 axisRotation: true,

package/dist/cjs/series/index.js

@@ -127,7 +127,7 @@ const SeriesInner = (props) => {
                     const currentStartFrame = startFrame + offset;
                     const nextStartFrame = startFrame + durationInFramesProp + offset;
                     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
+                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, _remotionInternalSingleChildComponent: (0, enable_sequence_stack_traces_js_1.getSingleChildComponent)(sequenceChildren), children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
                 },
             });
         };

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

@@ -4,6 +4,7 @@ import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey } fro
 export type CanUpdateSequencePropStatusStatic = {
     status: 'static';
     codeValue: unknown;
+    keyframeDisplayOffsetAdjustment: number | null;
     numericExpression?: VideoConfigNumericExpression;
 };
 export type CanUpdateSequencePropStatusKeyframe = {
@@ -67,6 +68,13 @@ export type CanUpdateSequencePropStatusComputed = {
 export type CanUpdateSequencePropStatusKeyframed = {
     status: 'keyframed';
     interpolationFunction: CanUpdateSequencePropStatusInterpolationFunction;
+    /**
+     * Added to the timeline track's keyframe display offset and subtracted from
+     * the controlled element's local frame when evaluating the interpolation.
+     * This is non-zero when the useCurrentFrame() call is outside a timing
+     * element that wraps the controlled element.
+     */
+    keyframeDisplayOffsetAdjustment: number | null;
     keyframes: CanUpdateSequencePropStatusKeyframe[];
     easing: CanUpdateSequencePropStatusEasing[];
     clamping: CanUpdateSequencePropStatusClamping;

package/dist/cjs/use-schema.js

@@ -111,7 +111,7 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
                 else if (frame !== null) {
                     const interpolated = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
                         forceSpringAllowTail: null,
-                        frame,
+                        frame: (0, get_effective_visual_mode_value_js_1.getFrameInKeyframedStatusClock)({ frame, status }),
                         status,
                     });
                     value = interpolated !== null && interpolated !== void 0 ? interpolated : currentValue[key];

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.511";
+export declare const VERSION = "4.0.513";

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.511';
+exports.VERSION = '4.0.513';

package/dist/esm/index.mjs

@@ -1340,7 +1340,7 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.511";
+var VERSION = "4.0.513";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -3114,7 +3114,9 @@ var interpolateString = ({
 }) => {
   const initiallyParsedOutputRange = outputRange.map(parseStringInterpolationValue);
   const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
-  const parsedOutputRange = hasAxisRotation ? initiallyParsedOutputRange.map((parsed) => {
+  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
+  const segmentIndex = inputRange.length === 1 ? 0 : findRange(posterizedInput, inputRange);
+  const parsedOutputRange = hasAxisRotation ? initiallyParsedOutputRange.map((parsed, index) => {
     if (parsed.kind !== "rotate") {
       return parsed;
     }
@@ -3124,9 +3126,11 @@ var interpolateString = ({
     if (parsed.dimensions !== 1) {
       throw new TypeError("Cannot interpolate a multi-angle rotate value with an axis rotation");
     }
+    const adjacentAxisRotation = parsed.values[0] === 0 ? index === segmentIndex ? initiallyParsedOutputRange[index + 1] : index === segmentIndex + 1 ? initiallyParsedOutputRange[index - 1] : undefined : undefined;
+    const axis = adjacentAxisRotation?.axisRotation ? adjacentAxisRotation.values : [0, 0, 1];
     return {
       kind: "rotate",
-      values: [0, 0, 1, parsed.values[0]],
+      values: [axis[0], axis[1], axis[2], parsed.values[0]],
       units: [null, null, null, parsed.units[0]],
       dimensions: 4,
       axisRotation: true
@@ -4331,6 +4335,10 @@ var interpolateKeyframedStatus = ({
 };
 
 // src/get-effective-visual-mode-value.ts
+var getFrameInKeyframedStatusClock = ({
+  frame,
+  status
+}) => frame - (status.keyframeDisplayOffsetAdjustment ?? 0);
 var resolveDragOverrideValue = ({
   dragOverrideValue,
   frame
@@ -4346,7 +4354,10 @@ var resolveDragOverrideValue = ({
   }
   const interpolated = interpolateKeyframedStatus({
     forceSpringAllowTail: null,
-    frame,
+    frame: getFrameInKeyframedStatusClock({
+      frame,
+      status: dragOverrideValue.status
+    }),
     status: dragOverrideValue.status
   });
   if (interpolated === null) {
@@ -4372,7 +4383,7 @@ var getEffectiveVisualModeValue = ({
     if (frame !== null) {
       return interpolateKeyframedStatus({
         forceSpringAllowTail: null,
-        frame,
+        frame: getFrameInKeyframedStatusClock({ frame, status: propStatus }),
         status: propStatus
       });
     }
@@ -4759,7 +4770,7 @@ var computeEffectiveSchemaValuesDotNotation = ({
         } else if (frame !== null) {
           const interpolated = interpolateKeyframedStatus({
             forceSpringAllowTail: null,
-            frame,
+            frame: getFrameInKeyframedStatusClock({ frame, status }),
             status
           });
           value = interpolated ?? currentValue[key];
@@ -10027,6 +10038,16 @@ import {
   useRef as useRef23
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
+var transferredOffscreenCanvases = new WeakMap;
+var getTransferredOffscreenCanvas = (canvas) => {
+  const existing = transferredOffscreenCanvases.get(canvas);
+  if (existing) {
+    return existing;
+  }
+  const offscreen = canvas.transferControlToOffscreen();
+  transferredOffscreenCanvases.set(canvas, offscreen);
+  return offscreen;
+};
 var cachedSupport = null;
 var isHtmlInCanvasSupported = () => {
   if (cachedSupport !== null) {
@@ -10287,7 +10308,7 @@ var HtmlInCanvasContent = forwardRef9(({
       throw new Error("Canvas not found");
     }
     placeholder.layoutSubtree = true;
-    const paintTarget = usesDirectLayoutCanvas ? placeholder : placeholder.transferControlToOffscreen();
+    const paintTarget = usesDirectLayoutCanvas ? placeholder : getTransferredOffscreenCanvas(placeholder);
     paintTargetRef.current = paintTarget;
     resizePaintTarget({
       target: paintTarget,
@@ -13419,6 +13440,7 @@ var SeriesInner = (props2) => {
                 from: currentStartFrame,
                 durationInFrames: durationInFramesProp,
                 ...passedProps,
+                _remotionInternalSingleChildComponent: getSingleChildComponent(sequenceChildren),
                 children: /* @__PURE__ */ jsx38(IsNotInsideSeriesProvider, {
                   children: sequenceChildren
                 })

package/dist/esm/no-react.mjs

@@ -978,7 +978,9 @@ var interpolateString = ({
 }) => {
   const initiallyParsedOutputRange = outputRange.map(parseStringInterpolationValue);
   const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
-  const parsedOutputRange = hasAxisRotation ? initiallyParsedOutputRange.map((parsed) => {
+  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
+  const segmentIndex = inputRange.length === 1 ? 0 : findRange(posterizedInput, inputRange);
+  const parsedOutputRange = hasAxisRotation ? initiallyParsedOutputRange.map((parsed, index) => {
     if (parsed.kind !== "rotate") {
       return parsed;
     }
@@ -988,9 +990,11 @@ var interpolateString = ({
     if (parsed.dimensions !== 1) {
       throw new TypeError("Cannot interpolate a multi-angle rotate value with an axis rotation");
     }
+    const adjacentAxisRotation = parsed.values[0] === 0 ? index === segmentIndex ? initiallyParsedOutputRange[index + 1] : index === segmentIndex + 1 ? initiallyParsedOutputRange[index - 1] : undefined : undefined;
+    const axis = adjacentAxisRotation?.axisRotation ? adjacentAxisRotation.values : [0, 0, 1];
     return {
       kind: "rotate",
-      values: [0, 0, 1, parsed.values[0]],
+      values: [axis[0], axis[1], axis[2], parsed.values[0]],
       units: [null, null, null, parsed.units[0]],
       dimensions: 4,
       axisRotation: true

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.511";
+var VERSION = "4.0.513";
 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.511",
+	"version": "4.0.513",
 	"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.4.3",
-		"@remotion/eslint-config-internal": "4.0.511",
+		"@remotion/eslint-config-internal": "4.0.513",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},