@remotion/transitions 4.0.499 → 4.0.501

package/dist/TransitionSeries.js

@@ -43,9 +43,9 @@ const flatten_children_js_1 = require("./flatten-children.js");
 const slide_js_1 = require("./presentations/slide.js");
 const validate_js_1 = require("./validate.js");
 const { SequenceWithoutSchema } = remotion_1.Internals;
-const TransitionSeriesTransitionInner = ({ stack = null, _remotionInternalRender = null, ...props }) => {
+const TransitionSeriesTransitionInner = ({ _remotionInternalRender = null, ...props }) => {
     if (_remotionInternalRender) {
-        return _remotionInternalRender({ ...props, stack });
+        return _remotionInternalRender(props);
     }
     return null;
 };
@@ -57,9 +57,9 @@ const TransitionSeriesTransition = remotion_1.Interactive.withSchema({
     schema: transitionSeriesTransitionSchema,
     supportsEffects: false,
 });
-const SeriesOverlayInner = ({ stack = null, _remotionInternalRender = null, ...props }) => {
+const SeriesOverlayInner = ({ _remotionInternalRender = null, ...props }) => {
     if (_remotionInternalRender) {
-        return _remotionInternalRender({ ...props, stack });
+        return _remotionInternalRender(props);
     }
     return null;
 };
@@ -80,13 +80,12 @@ const transitionSeriesSequenceSchema = {
     trimBefore: remotion_1.Internals.sequenceSchema.trimBefore,
     layout: remotion_1.Internals.sequenceSchema.layout,
 };
-const SeriesSequenceInner = ({ offset = 0, className = '', stack = null, _remotionInternalRender = null, ...props }) => {
+const SeriesSequenceInner = ({ offset = 0, className = '', _remotionInternalRender = null, ...props }) => {
     if (_remotionInternalRender) {
         return _remotionInternalRender({
             ...props,
             offset,
             className: className || undefined,
-            stack,
         });
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
@@ -150,8 +149,8 @@ const TransitionSeriesChildren = ({ children, }) => {
             const { index: i, transitionOffsets, startFrame, overlayRenders, sequenceDurations, pendingOverlayValidation, } = state;
             if (i === flattedChildren.length) {
                 return overlayRenders.map((info) => {
-                    var _a, _b;
-                    return (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: Math.round(info.overlayFrom), durationInFrames: info.durationInFrames, name: "<TS.Overlay>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", _remotionInternalStack: (_a = info.stack) !== null && _a !== void 0 ? _a : undefined, controls: (_b = info.controls) !== null && _b !== void 0 ? _b : undefined, layout: "absolute-fill", children: info.children }, `overlay-${info.index}`));
+                    var _a;
+                    return (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: Math.round(info.overlayFrom), durationInFrames: info.durationInFrames, name: "<TS.Overlay>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", controls: (_a = info.controls) !== null && _a !== void 0 ? _a : undefined, layout: "absolute-fill", children: info.children }, `overlay-${info.index}`));
                 });
             }
             const child = flattedChildren[i];
@@ -234,7 +233,6 @@ const TransitionSeriesChildren = ({ children, }) => {
                             children: overlayProps.children,
                             index: i,
                             controls: overlayProps.controls,
-                            stack: overlayProps.stack,
                         };
                         return renderNext({
                             overlayRenders: [...overlayRenders, overlayRender],
@@ -253,10 +251,10 @@ const TransitionSeriesChildren = ({ children, }) => {
                 const castedTransition = current;
                 return react_1.default.cloneElement(castedTransition, {
                     _remotionInternalRender: (transitionProps) => {
-                        var _a, _b;
+                        var _a;
                         const transitionDuration = transitionProps.timing.getDurationInFrames({ fps });
                         const transitionFrom = startFrame + transitionOffsets - transitionDuration;
-                        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [transitionDuration > 0 ? (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: transitionFrom, durationInFrames: transitionDuration, name: "<TS.Transition>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", _remotionInternalStack: (_a = transitionProps.stack) !== null && _a !== void 0 ? _a : undefined, controls: (_b = transitionProps.controls) !== null && _b !== void 0 ? _b : undefined, layout: "none" })) : null, renderNext()] }));
+                        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [transitionDuration > 0 ? (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: transitionFrom, durationInFrames: transitionDuration, name: "<TS.Transition>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", controls: (_a = transitionProps.controls) !== null && _a !== void 0 ? _a : undefined, layout: "none" })) : null, renderNext()] }));
                     },
                 });
             }
@@ -279,7 +277,11 @@ const TransitionSeriesChildren = ({ children, }) => {
                     var _a, _b, _c, _d, _e, _f, _g, _h;
                     const durationInFramesProp = resolvedProps.durationInFrames;
                     const debugInfo = `index = ${i}, duration = ${durationInFramesProp}`;
-                    const { durationInFrames, children: sequenceChildren, offset: offsetProp, controls, stack, from: _from, ...passedProps } = resolvedProps;
+                    const { durationInFrames, children: sequenceChildren, offset: offsetProp, controls, from: _from, ...passedProps } = resolvedProps;
+                    const propsForSequence = {
+                        ...passedProps,
+                        _remotionInternalSingleChildComponent: remotion_1.Internals.getSingleChildComponent(sequenceChildren),
+                    };
                     (0, validate_js_1.validateDurationInFrames)(durationInFramesProp, {
                         component: `of a <TransitionSeries.Sequence /> component`,
                         allowFloats: true,
@@ -366,9 +368,9 @@ const TransitionSeriesChildren = ({ children, }) => {
                         const prevPresentation = (_b = prev.props.presentation) !== null && _b !== void 0 ? _b : (0, slide_js_1.slide)();
                         const UppercaseNextPresentation = nextPresentation.component;
                         const UppercasePrevPresentation = prevPresentation.component;
-                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...propsForSequence, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
                                 ? undefined
-                                : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_c = nextPresentation.props) !== null && _c !== void 0 ? _c : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: () => {
+                                : 'https://www.remotion.dev/docs/transitions/transitionseries', controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_c = nextPresentation.props) !== null && _c !== void 0 ? _c : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: () => {
                                     throw new Error('Should not call when exiting');
                                 }, onUnmount: () => {
                                     throw new Error('Should not call when exiting');
@@ -383,24 +385,24 @@ const TransitionSeriesChildren = ({ children, }) => {
                     if (prevProgress !== null && prev) {
                         const prevPresentation = (_e = prev.props.presentation) !== null && _e !== void 0 ? _e : (0, slide_js_1.slide)();
                         const UppercasePrevPresentation = prevPresentation.component;
-                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...propsForSequence, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
                                 ? undefined
-                                : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1), onUnmount: () => {
+                                : 'https://www.remotion.dev/docs/transitions/transitionseries', controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1), onUnmount: () => {
                                     onNextElementImage(null, null, null, i - 1);
                                 }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: sequenceChildren }) }) }, i));
                     }
                     if (nextProgress !== null && next) {
                         const nextPresentation = (_g = next.props.presentation) !== null && _g !== void 0 ? _g : (0, slide_js_1.slide)();
                         const UppercaseNextPresentation = nextPresentation.component;
-                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...propsForSequence, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
                                 ? undefined
-                                : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_h = nextPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1), onUnmount: () => {
+                                : 'https://www.remotion.dev/docs/transitions/transitionseries', controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_h = nextPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1), onUnmount: () => {
                                     onPrevElementImage(null, null, null, i + 1);
                                 }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: sequenceChildren }) }) }, i));
                     }
-                    return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                    return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...propsForSequence, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
                             ? undefined
-                            : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: sequenceChildren }, i));
+                            : 'https://www.remotion.dev/docs/transitions/transitionseries', controls: controls !== null && controls !== void 0 ? controls : undefined, children: sequenceChildren }, i));
                 },
             });
         };
@@ -422,7 +424,6 @@ const TransitionSeriesChildren = ({ children, }) => {
  */
 const TransitionSeriesInner = (props) => {
     const { children, name, layout: passedLayout, controls, ...otherProps } = props;
-    const { stack, ...propsForSequence } = otherProps;
     const displayName = name !== null && name !== void 0 ? name : '<TransitionSeries>';
     const layout = passedLayout !== null && passedLayout !== void 0 ? passedLayout : 'absolute-fill';
     if (no_react_1.NoReactInternals.ENABLE_V5_BREAKING_CHANGES &&
@@ -431,7 +432,7 @@ const TransitionSeriesInner = (props) => {
     }
     return (jsx_runtime_1.jsx(remotion_1.Sequence, { name: displayName, layout: layout, _remotionInternalDocumentationLink: name === undefined
             ? 'https://www.remotion.dev/docs/transitions/transitionseries'
-            : undefined, ...propsForSequence, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(TransitionSeriesChildren, { children: children }) }));
+            : undefined, ...otherProps, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(TransitionSeriesChildren, { children: children }) }));
 };
 const TransitionSeries = remotion_1.Interactive.withSchema({
     Component: TransitionSeriesInner,

package/dist/esm/index.mjs

@@ -1122,15 +1122,139 @@ var linearBlurShader = (canvas) => {
 };
 var linearBlur = makeHtmlInCanvasPresentation(linearBlurShader);
 
+// src/presentations/push-cut.tsx
+import { useMemo as useMemo3 } from "react";
+import { AbsoluteFill as AbsoluteFill3, Easing, interpolate } from "remotion";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var clamp = {
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp"
+};
+var validateFiniteNumber = (name, value) => {
+  if (!Number.isFinite(value)) {
+    throw new TypeError(`${name} passed to pushCut() must be finite, received ${value}`);
+  }
+};
+var validateProps = (props) => {
+  const cutProgress = props.cutProgress ?? 5 / 11;
+  const outgoingScale = props.outgoingScale ?? 1.04;
+  const incomingStartScale = props.incomingStartScale ?? 1.04;
+  const incomingEndScale = props.incomingEndScale ?? 1.07;
+  const flashOpacity = props.flashOpacity ?? 0.2;
+  const flashFrames = props.flashFrames ?? 2;
+  validateFiniteNumber("cutProgress", cutProgress);
+  if (cutProgress <= 0 || cutProgress >= 1) {
+    throw new TypeError(`cutProgress passed to pushCut() must be greater than 0 and less than 1, received ${cutProgress}`);
+  }
+  for (const [name, value] of [
+    ["outgoingScale", outgoingScale],
+    ["incomingStartScale", incomingStartScale],
+    ["incomingEndScale", incomingEndScale]
+  ]) {
+    validateFiniteNumber(name, value);
+    if (value <= 0) {
+      throw new TypeError(`${name} passed to pushCut() must be greater than 0, received ${value}`);
+    }
+  }
+  validateFiniteNumber("flashOpacity", flashOpacity);
+  if (flashOpacity < 0 || flashOpacity > 1) {
+    throw new TypeError(`flashOpacity passed to pushCut() must be between 0 and 1, received ${flashOpacity}`);
+  }
+  validateFiniteNumber("flashFrames", flashFrames);
+  if (flashFrames < 0) {
+    throw new TypeError(`flashFrames passed to pushCut() must be greater than or equal to 0, received ${flashFrames}`);
+  }
+};
+var PushCutPresentation = ({
+  children,
+  presentationDirection,
+  presentationDurationInFrames,
+  presentationProgress,
+  passedProps
+}) => {
+  const {
+    cutProgress = 5 / 11,
+    outgoingScale = 1.04,
+    incomingStartScale = 1.04,
+    incomingEndScale = 1.07,
+    transformOrigin = "50% 50%",
+    flashColor = "#f5f2ed",
+    flashOpacity: peakFlashOpacity = 0.2,
+    flashFrames = 2,
+    outerEnterStyle,
+    outerExitStyle,
+    innerEnterStyle,
+    innerExitStyle
+  } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const outgoingProgress = interpolate(presentationProgress, [0, cutProgress], [0, 1], {
+    ...clamp,
+    easing: Easing.in(Easing.quad)
+  });
+  const incomingProgress = interpolate(presentationProgress, [cutProgress, 1], [0, 1], {
+    ...clamp,
+    easing: Easing.out(Easing.quad)
+  });
+  const scale = isEntering ? interpolate(incomingProgress, [0, 1], [incomingStartScale, incomingEndScale]) : interpolate(outgoingProgress, [0, 1], [1, outgoingScale]);
+  const oneFrame = 1 / Math.max(1, presentationDurationInFrames);
+  const flashTail = flashFrames / Math.max(1, presentationDurationInFrames);
+  const flashOpacity = isEntering ? interpolate(presentationProgress, [cutProgress, cutProgress + flashTail], [peakFlashOpacity, 0], clamp) : interpolate(presentationProgress, [cutProgress - oneFrame, cutProgress], [0, peakFlashOpacity], clamp);
+  const outerStyle = useMemo3(() => {
+    return {
+      opacity: isEntering && presentationProgress < cutProgress ? 0 : 1,
+      overflow: "hidden",
+      ...isEntering ? outerEnterStyle : outerExitStyle
+    };
+  }, [
+    cutProgress,
+    isEntering,
+    outerEnterStyle,
+    outerExitStyle,
+    presentationProgress
+  ]);
+  const innerStyle = useMemo3(() => {
+    return {
+      transform: `scale(${scale})`,
+      transformOrigin,
+      willChange: "transform",
+      ...isEntering ? innerEnterStyle : innerExitStyle
+    };
+  }, [innerEnterStyle, innerExitStyle, isEntering, scale, transformOrigin]);
+  return /* @__PURE__ */ jsxs2(AbsoluteFill3, {
+    style: outerStyle,
+    children: [
+      /* @__PURE__ */ jsx3(AbsoluteFill3, {
+        style: innerStyle,
+        children
+      }),
+      flashOpacity > 0 ? /* @__PURE__ */ jsx3(AbsoluteFill3, {
+        style: {
+          backgroundColor: flashColor,
+          opacity: flashOpacity,
+          pointerEvents: "none"
+        }
+      }) : null
+    ]
+  });
+};
+var pushCut = (props) => {
+  const passedProps = props ?? {};
+  validateProps(passedProps);
+  return {
+    component: PushCutPresentation,
+    props: passedProps
+  };
+};
+
 // src/timings/linear-timing.ts
-import { interpolate } from "remotion";
+import { interpolate as interpolate2 } from "remotion";
 var linearTiming = (options) => {
   return {
     getDurationInFrames: () => {
       return options.durationInFrames;
     },
     getProgress: ({ frame }) => {
-      return interpolate(frame, [0, options.durationInFrames], [0, 1], {
+      return interpolate2(frame, [0, options.durationInFrames], [0, 1], {
         easing: options.easing,
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
@@ -1169,7 +1293,7 @@ var springTiming = (options = {}) => {
   };
 };
 // src/TransitionSeries.tsx
-import React4, { useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2 } from "react";
+import React4, { useCallback as useCallback2, useMemo as useMemo5, useRef as useRef2 } from "react";
 import {
   Internals as Internals2,
   Interactive,
@@ -1180,28 +1304,28 @@ import {
 import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
 
 // src/context.tsx
-import React2, { useMemo as useMemo3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import React2, { useMemo as useMemo4 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var EnteringContext = React2.createContext(null);
 var ExitingContext = React2.createContext(null);
 var WrapInEnteringProgressContext = ({ presentationProgress, children }) => {
-  const value = useMemo3(() => {
+  const value = useMemo4(() => {
     return {
       enteringProgress: presentationProgress
     };
   }, [presentationProgress]);
-  return /* @__PURE__ */ jsx3(EnteringContext.Provider, {
+  return /* @__PURE__ */ jsx4(EnteringContext.Provider, {
     value,
     children
   });
 };
 var WrapInExitingProgressContext = ({ presentationProgress, children }) => {
-  const value = useMemo3(() => {
+  const value = useMemo4(() => {
     return {
       exitingProgress: presentationProgress
     };
   }, [presentationProgress]);
-  return /* @__PURE__ */ jsx3(ExitingContext.Provider, {
+  return /* @__PURE__ */ jsx4(ExitingContext.Provider, {
     value,
     children
   });
@@ -1225,15 +1349,14 @@ import { NoReactInternals } from "remotion/no-react";
 var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 
 // src/TransitionSeries.tsx
-import { jsx as jsx4, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
 var { SequenceWithoutSchema } = Internals2;
 var TransitionSeriesTransitionInner = ({
-  stack = null,
   _remotionInternalRender = null,
   ...props
 }) => {
   if (_remotionInternalRender) {
-    return _remotionInternalRender({ ...props, stack });
+    return _remotionInternalRender(props);
   }
   return null;
 };
@@ -1246,12 +1369,11 @@ var TransitionSeriesTransition = Interactive.withSchema({
   supportsEffects: false
 });
 var SeriesOverlayInner = ({
-  stack = null,
   _remotionInternalRender = null,
   ...props
 }) => {
   if (_remotionInternalRender) {
-    return _remotionInternalRender({ ...props, stack });
+    return _remotionInternalRender(props);
   }
   return null;
 };
@@ -1275,7 +1397,6 @@ var transitionSeriesSequenceSchema = {
 var SeriesSequenceInner = ({
   offset = 0,
   className = "",
-  stack = null,
   _remotionInternalRender = null,
   ...props
 }) => {
@@ -1283,11 +1404,10 @@ var SeriesSequenceInner = ({
     return _remotionInternalRender({
       ...props,
       offset,
-      className: className || undefined,
-      stack
+      className: className || undefined
     });
   }
-  return /* @__PURE__ */ jsx4(Fragment, {
+  return /* @__PURE__ */ jsx5(Fragment, {
     children: props.children
   });
 };
@@ -1313,7 +1433,7 @@ var TransitionSeriesChildren = ({
   const frame = useCurrentFrame();
   const prevImageRef = useRef2({});
   const nextImageRef = useRef2({});
-  const flattedChildren = useMemo4(() => {
+  const flattedChildren = useMemo5(() => {
     return flattenChildren(children);
   }, [children]);
   const drawIfSynced = useCallback2((index) => {
@@ -1342,7 +1462,7 @@ var TransitionSeriesChildren = ({
     nextImageRef.current[index] = { elementImage, progress, draw };
     drawIfSynced(index);
   }, [drawIfSynced]);
-  const childrenValue = useMemo4(() => {
+  const childrenValue = useMemo5(() => {
     const renderChildren = (state) => {
       const {
         index: i,
@@ -1353,12 +1473,11 @@ var TransitionSeriesChildren = ({
         pendingOverlayValidation
       } = state;
       if (i === flattedChildren.length) {
-        return overlayRenders.map((info) => /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+        return overlayRenders.map((info) => /* @__PURE__ */ jsx5(SequenceWithoutSchema, {
           from: Math.round(info.overlayFrom),
           durationInFrames: info.durationInFrames,
           name: "<TS.Overlay>",
           _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries",
-          _remotionInternalStack: info.stack ?? undefined,
           controls: info.controls ?? undefined,
           layout: "absolute-fill",
           children: info.children
@@ -1428,8 +1547,7 @@ var TransitionSeriesChildren = ({
               halfDuration,
               children: overlayProps.children,
               index: i,
-              controls: overlayProps.controls,
-              stack: overlayProps.stack
+              controls: overlayProps.controls
             };
             return renderNext({
               overlayRenders: [...overlayRenders, overlayRender],
@@ -1450,14 +1568,13 @@ var TransitionSeriesChildren = ({
           _remotionInternalRender: (transitionProps) => {
             const transitionDuration = transitionProps.timing.getDurationInFrames({ fps });
             const transitionFrom = startFrame + transitionOffsets - transitionDuration;
-            return /* @__PURE__ */ jsxs2(Fragment, {
+            return /* @__PURE__ */ jsxs3(Fragment, {
               children: [
-                transitionDuration > 0 ? /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+                transitionDuration > 0 ? /* @__PURE__ */ jsx5(SequenceWithoutSchema, {
                   from: transitionFrom,
                   durationInFrames: transitionDuration,
                   name: "<TS.Transition>",
                   _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries",
-                  _remotionInternalStack: transitionProps.stack ?? undefined,
                   controls: transitionProps.controls ?? undefined,
                   layout: "none"
                 }) : null,
@@ -1482,10 +1599,13 @@ var TransitionSeriesChildren = ({
             children: sequenceChildren,
             offset: offsetProp,
             controls,
-            stack,
             from: _from,
             ...passedProps
           } = resolvedProps;
+          const propsForSequence = {
+            ...passedProps,
+            _remotionInternalSingleChildComponent: Internals2.getSingleChildComponent(sequenceChildren)
+          };
           validateDurationInFrames(durationInFramesProp, {
             component: `of a <TransitionSeries.Sequence /> component`,
             allowFloats: true
@@ -1533,7 +1653,7 @@ var TransitionSeriesChildren = ({
             }
           }
           const renderSequenceAndRest = (sequence) => {
-            return /* @__PURE__ */ jsxs2(Fragment, {
+            return /* @__PURE__ */ jsxs3(Fragment, {
               children: [
                 sequence,
                 renderNext({
@@ -1564,15 +1684,14 @@ var TransitionSeriesChildren = ({
             const prevPresentation = prev.props.presentation ?? slide();
             const UppercaseNextPresentation = nextPresentation.component;
             const UppercasePrevPresentation = prevPresentation.component;
-            return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+            return renderSequenceAndRest(/* @__PURE__ */ jsx5(SequenceWithoutSchema, {
               from: actualStartFrame,
               durationInFrames: durationInFramesProp,
-              ...passedProps,
+              ...propsForSequence,
               name: passedProps.name || "<TS.Sequence>",
               _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-              _remotionInternalStack: stack ?? undefined,
               controls: controls ?? undefined,
-              children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
+              children: /* @__PURE__ */ jsx5(UppercaseNextPresentation, {
                 passedProps: nextPresentation.props ?? {},
                 presentationDirection: "exiting",
                 presentationProgress: nextProgress,
@@ -1584,9 +1703,9 @@ var TransitionSeriesChildren = ({
                   throw new Error("Should not call when exiting");
                 },
                 bothEnteringAndExiting: true,
-                children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
+                children: /* @__PURE__ */ jsx5(WrapInExitingProgressContext, {
                   presentationProgress: nextProgress,
-                  children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
+                  children: /* @__PURE__ */ jsx5(UppercasePrevPresentation, {
                     passedProps: prevPresentation.props ?? {},
                     presentationDirection: "entering",
                     presentationProgress: prevProgress,
@@ -1600,7 +1719,7 @@ var TransitionSeriesChildren = ({
                       onNextElementImage(null, null, null, i - 1);
                     },
                     bothEnteringAndExiting: true,
-                    children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
+                    children: /* @__PURE__ */ jsx5(WrapInEnteringProgressContext, {
                       presentationProgress: prevProgress,
                       children: sequenceChildren
                     })
@@ -1612,15 +1731,14 @@ var TransitionSeriesChildren = ({
           if (prevProgress !== null && prev) {
             const prevPresentation = prev.props.presentation ?? slide();
             const UppercasePrevPresentation = prevPresentation.component;
-            return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+            return renderSequenceAndRest(/* @__PURE__ */ jsx5(SequenceWithoutSchema, {
               from: actualStartFrame,
               durationInFrames: durationInFramesProp,
-              ...passedProps,
+              ...propsForSequence,
               name: passedProps.name || "<TS.Sequence>",
               _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-              _remotionInternalStack: stack ?? undefined,
               controls: controls ?? undefined,
-              children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
+              children: /* @__PURE__ */ jsx5(UppercasePrevPresentation, {
                 passedProps: prevPresentation.props ?? {},
                 presentationDirection: "entering",
                 presentationProgress: prevProgress,
@@ -1630,7 +1748,7 @@ var TransitionSeriesChildren = ({
                   onNextElementImage(null, null, null, i - 1);
                 },
                 bothEnteringAndExiting: false,
-                children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
+                children: /* @__PURE__ */ jsx5(WrapInEnteringProgressContext, {
                   presentationProgress: prevProgress,
                   children: sequenceChildren
                 })
@@ -1640,15 +1758,14 @@ var TransitionSeriesChildren = ({
           if (nextProgress !== null && next) {
             const nextPresentation = next.props.presentation ?? slide();
             const UppercaseNextPresentation = nextPresentation.component;
-            return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+            return renderSequenceAndRest(/* @__PURE__ */ jsx5(SequenceWithoutSchema, {
               from: actualStartFrame,
               durationInFrames: durationInFramesProp,
-              ...passedProps,
+              ...propsForSequence,
               name: passedProps.name || "<TS.Sequence>",
               _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-              _remotionInternalStack: stack ?? undefined,
               controls: controls ?? undefined,
-              children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
+              children: /* @__PURE__ */ jsx5(UppercaseNextPresentation, {
                 passedProps: nextPresentation.props ?? {},
                 presentationDirection: "exiting",
                 presentationProgress: nextProgress,
@@ -1658,20 +1775,19 @@ var TransitionSeriesChildren = ({
                   onPrevElementImage(null, null, null, i + 1);
                 },
                 bothEnteringAndExiting: false,
-                children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
+                children: /* @__PURE__ */ jsx5(WrapInExitingProgressContext, {
                   presentationProgress: nextProgress,
                   children: sequenceChildren
                 })
               })
             }, i));
           }
-          return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+          return renderSequenceAndRest(/* @__PURE__ */ jsx5(SequenceWithoutSchema, {
             from: actualStartFrame,
             durationInFrames: durationInFramesProp,
-            ...passedProps,
+            ...propsForSequence,
             name: passedProps.name || "<TS.Sequence>",
             _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-            _remotionInternalStack: stack ?? undefined,
             controls: controls ?? undefined,
             children: sequenceChildren
           }, i));
@@ -1687,7 +1803,7 @@ var TransitionSeriesChildren = ({
       pendingOverlayValidation: false
     });
   }, [flattedChildren, fps, frame, onPrevElementImage, onNextElementImage]);
-  return /* @__PURE__ */ jsx4(Fragment, {
+  return /* @__PURE__ */ jsx5(Fragment, {
     children: childrenValue
   });
 };
@@ -1699,20 +1815,18 @@ var TransitionSeriesInner = (props) => {
     controls,
     ...otherProps
   } = props;
-  const { stack, ...propsForSequence } = otherProps;
   const displayName = name ?? "<TransitionSeries>";
   const layout = passedLayout ?? "absolute-fill";
   if (NoReactInternals2.ENABLE_V5_BREAKING_CHANGES && layout !== "absolute-fill") {
     throw new TypeError(`The "layout" prop of <TransitionSeries /> is not supported anymore in v5. TransitionSeries' must be absolutely positioned.`);
   }
-  return /* @__PURE__ */ jsx4(Sequence, {
+  return /* @__PURE__ */ jsx5(Sequence, {
     name: displayName,
     layout,
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/transitions/transitionseries" : undefined,
-    ...propsForSequence,
-    _remotionInternalStack: stack ?? undefined,
+    ...otherProps,
     controls: controls ?? undefined,
-    children: /* @__PURE__ */ jsx4(TransitionSeriesChildren, {
+    children: /* @__PURE__ */ jsx5(TransitionSeriesChildren, {
       children
     })
   });
@@ -1748,6 +1862,7 @@ var useTransitionProgress = () => {
 export {
   useTransitionProgress,
   springTiming,
+  pushCut,
   makeHtmlInCanvasPresentation,
   linearTiming,
   linearBlur,

package/dist/esm/push-cut.mjs

@@ -0,0 +1,126 @@
+// src/presentations/push-cut.tsx
+import { useMemo } from "react";
+import { AbsoluteFill, Easing, interpolate } from "remotion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var clamp = {
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp"
+};
+var validateFiniteNumber = (name, value) => {
+  if (!Number.isFinite(value)) {
+    throw new TypeError(`${name} passed to pushCut() must be finite, received ${value}`);
+  }
+};
+var validateProps = (props) => {
+  const cutProgress = props.cutProgress ?? 5 / 11;
+  const outgoingScale = props.outgoingScale ?? 1.04;
+  const incomingStartScale = props.incomingStartScale ?? 1.04;
+  const incomingEndScale = props.incomingEndScale ?? 1.07;
+  const flashOpacity = props.flashOpacity ?? 0.2;
+  const flashFrames = props.flashFrames ?? 2;
+  validateFiniteNumber("cutProgress", cutProgress);
+  if (cutProgress <= 0 || cutProgress >= 1) {
+    throw new TypeError(`cutProgress passed to pushCut() must be greater than 0 and less than 1, received ${cutProgress}`);
+  }
+  for (const [name, value] of [
+    ["outgoingScale", outgoingScale],
+    ["incomingStartScale", incomingStartScale],
+    ["incomingEndScale", incomingEndScale]
+  ]) {
+    validateFiniteNumber(name, value);
+    if (value <= 0) {
+      throw new TypeError(`${name} passed to pushCut() must be greater than 0, received ${value}`);
+    }
+  }
+  validateFiniteNumber("flashOpacity", flashOpacity);
+  if (flashOpacity < 0 || flashOpacity > 1) {
+    throw new TypeError(`flashOpacity passed to pushCut() must be between 0 and 1, received ${flashOpacity}`);
+  }
+  validateFiniteNumber("flashFrames", flashFrames);
+  if (flashFrames < 0) {
+    throw new TypeError(`flashFrames passed to pushCut() must be greater than or equal to 0, received ${flashFrames}`);
+  }
+};
+var PushCutPresentation = ({
+  children,
+  presentationDirection,
+  presentationDurationInFrames,
+  presentationProgress,
+  passedProps
+}) => {
+  const {
+    cutProgress = 5 / 11,
+    outgoingScale = 1.04,
+    incomingStartScale = 1.04,
+    incomingEndScale = 1.07,
+    transformOrigin = "50% 50%",
+    flashColor = "#f5f2ed",
+    flashOpacity: peakFlashOpacity = 0.2,
+    flashFrames = 2,
+    outerEnterStyle,
+    outerExitStyle,
+    innerEnterStyle,
+    innerExitStyle
+  } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const outgoingProgress = interpolate(presentationProgress, [0, cutProgress], [0, 1], {
+    ...clamp,
+    easing: Easing.in(Easing.quad)
+  });
+  const incomingProgress = interpolate(presentationProgress, [cutProgress, 1], [0, 1], {
+    ...clamp,
+    easing: Easing.out(Easing.quad)
+  });
+  const scale = isEntering ? interpolate(incomingProgress, [0, 1], [incomingStartScale, incomingEndScale]) : interpolate(outgoingProgress, [0, 1], [1, outgoingScale]);
+  const oneFrame = 1 / Math.max(1, presentationDurationInFrames);
+  const flashTail = flashFrames / Math.max(1, presentationDurationInFrames);
+  const flashOpacity = isEntering ? interpolate(presentationProgress, [cutProgress, cutProgress + flashTail], [peakFlashOpacity, 0], clamp) : interpolate(presentationProgress, [cutProgress - oneFrame, cutProgress], [0, peakFlashOpacity], clamp);
+  const outerStyle = useMemo(() => {
+    return {
+      opacity: isEntering && presentationProgress < cutProgress ? 0 : 1,
+      overflow: "hidden",
+      ...isEntering ? outerEnterStyle : outerExitStyle
+    };
+  }, [
+    cutProgress,
+    isEntering,
+    outerEnterStyle,
+    outerExitStyle,
+    presentationProgress
+  ]);
+  const innerStyle = useMemo(() => {
+    return {
+      transform: `scale(${scale})`,
+      transformOrigin,
+      willChange: "transform",
+      ...isEntering ? innerEnterStyle : innerExitStyle
+    };
+  }, [innerEnterStyle, innerExitStyle, isEntering, scale, transformOrigin]);
+  return /* @__PURE__ */ jsxs(AbsoluteFill, {
+    style: outerStyle,
+    children: [
+      /* @__PURE__ */ jsx(AbsoluteFill, {
+        style: innerStyle,
+        children
+      }),
+      flashOpacity > 0 ? /* @__PURE__ */ jsx(AbsoluteFill, {
+        style: {
+          backgroundColor: flashColor,
+          opacity: flashOpacity,
+          pointerEvents: "none"
+        }
+      }) : null
+    ]
+  });
+};
+var pushCut = (props) => {
+  const passedProps = props ?? {};
+  validateProps(passedProps);
+  return {
+    component: PushCutPresentation,
+    props: passedProps
+  };
+};
+export {
+  pushCut
+};

package/dist/index.d.ts

@@ -14,3 +14,5 @@ export { filmBurn } from './presentations/film-burn.js';
 export type { FilmBurnProps } from './presentations/film-burn.js';
 export { linearBlur } from './presentations/linear-blur.js';
 export type { LinearBlurProps } from './presentations/linear-blur.js';
+export { pushCut } from './presentations/push-cut.js';
+export type { PushCutProps } from './presentations/push-cut.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.linearBlur = exports.filmBurn = exports.dreamyZoom = exports.crossZoom = exports.makeHtmlInCanvasPresentation = exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
+exports.pushCut = exports.linearBlur = exports.filmBurn = exports.dreamyZoom = exports.crossZoom = exports.makeHtmlInCanvasPresentation = exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
 // Timings
 const linear_timing_js_1 = require("./timings/linear-timing.js");
 Object.defineProperty(exports, "linearTiming", { enumerable: true, get: function () { return linear_timing_js_1.linearTiming; } });
@@ -23,3 +23,5 @@ const film_burn_js_1 = require("./presentations/film-burn.js");
 Object.defineProperty(exports, "filmBurn", { enumerable: true, get: function () { return film_burn_js_1.filmBurn; } });
 const linear_blur_js_1 = require("./presentations/linear-blur.js");
 Object.defineProperty(exports, "linearBlur", { enumerable: true, get: function () { return linear_blur_js_1.linearBlur; } });
+const push_cut_js_1 = require("./presentations/push-cut.js");
+Object.defineProperty(exports, "pushCut", { enumerable: true, get: function () { return push_cut_js_1.pushCut; } });

package/dist/presentations/push-cut.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import type { TransitionPresentation } from '../types.js';
+export type PushCutProps = {
+    cutProgress?: number;
+    outgoingScale?: number;
+    incomingStartScale?: number;
+    incomingEndScale?: number;
+    transformOrigin?: CSSProperties['transformOrigin'];
+    flashColor?: string;
+    flashOpacity?: number;
+    flashFrames?: number;
+    outerEnterStyle?: CSSProperties;
+    outerExitStyle?: CSSProperties;
+    innerEnterStyle?: CSSProperties;
+    innerExitStyle?: CSSProperties;
+};
+export declare const pushCut: (props?: PushCutProps | undefined) => TransitionPresentation<PushCutProps>;

package/dist/presentations/push-cut.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pushCut = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const clamp = {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+};
+const validateFiniteNumber = (name, value) => {
+    if (!Number.isFinite(value)) {
+        throw new TypeError(`${name} passed to pushCut() must be finite, received ${value}`);
+    }
+};
+const validateProps = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const cutProgress = (_a = props.cutProgress) !== null && _a !== void 0 ? _a : 5 / 11;
+    const outgoingScale = (_b = props.outgoingScale) !== null && _b !== void 0 ? _b : 1.04;
+    const incomingStartScale = (_c = props.incomingStartScale) !== null && _c !== void 0 ? _c : 1.04;
+    const incomingEndScale = (_d = props.incomingEndScale) !== null && _d !== void 0 ? _d : 1.07;
+    const flashOpacity = (_e = props.flashOpacity) !== null && _e !== void 0 ? _e : 0.2;
+    const flashFrames = (_f = props.flashFrames) !== null && _f !== void 0 ? _f : 2;
+    validateFiniteNumber('cutProgress', cutProgress);
+    if (cutProgress <= 0 || cutProgress >= 1) {
+        throw new TypeError(`cutProgress passed to pushCut() must be greater than 0 and less than 1, received ${cutProgress}`);
+    }
+    for (const [name, value] of [
+        ['outgoingScale', outgoingScale],
+        ['incomingStartScale', incomingStartScale],
+        ['incomingEndScale', incomingEndScale],
+    ]) {
+        validateFiniteNumber(name, value);
+        if (value <= 0) {
+            throw new TypeError(`${name} passed to pushCut() must be greater than 0, received ${value}`);
+        }
+    }
+    validateFiniteNumber('flashOpacity', flashOpacity);
+    if (flashOpacity < 0 || flashOpacity > 1) {
+        throw new TypeError(`flashOpacity passed to pushCut() must be between 0 and 1, received ${flashOpacity}`);
+    }
+    validateFiniteNumber('flashFrames', flashFrames);
+    if (flashFrames < 0) {
+        throw new TypeError(`flashFrames passed to pushCut() must be greater than or equal to 0, received ${flashFrames}`);
+    }
+};
+const PushCutPresentation = ({ children, presentationDirection, presentationDurationInFrames, presentationProgress, passedProps, }) => {
+    const { cutProgress = 5 / 11, outgoingScale = 1.04, incomingStartScale = 1.04, incomingEndScale = 1.07, transformOrigin = '50% 50%', flashColor = '#f5f2ed', flashOpacity: peakFlashOpacity = 0.2, flashFrames = 2, outerEnterStyle, outerExitStyle, innerEnterStyle, innerExitStyle, } = passedProps;
+    const isEntering = presentationDirection === 'entering';
+    const outgoingProgress = (0, remotion_1.interpolate)(presentationProgress, [0, cutProgress], [0, 1], {
+        ...clamp,
+        easing: remotion_1.Easing.in(remotion_1.Easing.quad),
+    });
+    const incomingProgress = (0, remotion_1.interpolate)(presentationProgress, [cutProgress, 1], [0, 1], {
+        ...clamp,
+        easing: remotion_1.Easing.out(remotion_1.Easing.quad),
+    });
+    const scale = isEntering
+        ? (0, remotion_1.interpolate)(incomingProgress, [0, 1], [incomingStartScale, incomingEndScale])
+        : (0, remotion_1.interpolate)(outgoingProgress, [0, 1], [1, outgoingScale]);
+    const oneFrame = 1 / Math.max(1, presentationDurationInFrames);
+    const flashTail = flashFrames / Math.max(1, presentationDurationInFrames);
+    const flashOpacity = isEntering
+        ? (0, remotion_1.interpolate)(presentationProgress, [cutProgress, cutProgress + flashTail], [peakFlashOpacity, 0], clamp)
+        : (0, remotion_1.interpolate)(presentationProgress, [cutProgress - oneFrame, cutProgress], [0, peakFlashOpacity], clamp);
+    const outerStyle = (0, react_1.useMemo)(() => {
+        return {
+            opacity: isEntering && presentationProgress < cutProgress ? 0 : 1,
+            overflow: 'hidden',
+            ...(isEntering ? outerEnterStyle : outerExitStyle),
+        };
+    }, [
+        cutProgress,
+        isEntering,
+        outerEnterStyle,
+        outerExitStyle,
+        presentationProgress,
+    ]);
+    const innerStyle = (0, react_1.useMemo)(() => {
+        return {
+            transform: `scale(${scale})`,
+            transformOrigin,
+            willChange: 'transform',
+            ...(isEntering ? innerEnterStyle : innerExitStyle),
+        };
+    }, [innerEnterStyle, innerExitStyle, isEntering, scale, transformOrigin]);
+    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: outerStyle, children: [
+            jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: innerStyle, children: children }), flashOpacity > 0 ? (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: {
+                    backgroundColor: flashColor,
+                    opacity: flashOpacity,
+                    pointerEvents: 'none',
+                } })) : null] }));
+};
+/*
+ * Created by Tom Vaillant: https://github.com/tomvaillant
+ * @description A hard editorial cut with a short punch-in on both scenes and a brief flash at the edit point.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/presentations/push-cut)
+ */
+const pushCut = (props) => {
+    const passedProps = props !== null && props !== void 0 ? props : {};
+    validateProps(passedProps);
+    return {
+        component: PushCutPresentation,
+        props: passedProps,
+    };
+};
+exports.pushCut = pushCut;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
 	},
 	"name": "@remotion/transitions",
-	"version": "4.0.499",
+	"version": "4.0.501",
 	"description": "Library for creating transitions in Remotion",
 	"main": "dist/esm/index.mjs",
 	"module": "dist/esm/index.js",
@@ -22,18 +22,18 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.499",
-		"@remotion/shapes": "4.0.499",
-		"@remotion/paths": "4.0.499"
+		"remotion": "4.0.501",
+		"@remotion/shapes": "4.0.501",
+		"@remotion/paths": "4.0.501"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"remotion": "4.0.499",
+		"remotion": "4.0.501",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/test-utils": "4.0.499",
-		"@remotion/player": "4.0.499",
-		"@remotion/eslint-config-internal": "4.0.499",
+		"@remotion/test-utils": "4.0.501",
+		"@remotion/player": "4.0.501",
+		"@remotion/eslint-config-internal": "4.0.501",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -163,6 +163,12 @@
 			"import": "./dist/esm/swap.mjs",
 			"require": "./dist/presentations/swap.js"
 		},
+		"./push-cut": {
+			"types": "./dist/presentations/push-cut.d.ts",
+			"module": "./dist/esm/push-cut.mjs",
+			"import": "./dist/esm/push-cut.mjs",
+			"require": "./dist/presentations/push-cut.js"
+		},
 		"./package.json": "./package.json"
 	},
 	"typesVersions": {
@@ -220,6 +226,9 @@
 			],
 			"swap": [
 				"dist/presentations/swap.d.ts"
+			],
+			"push-cut": [
+				"dist/presentations/push-cut.d.ts"
 			]
 		}
 	},

package/push-cut.js

@@ -0,0 +1,2 @@
+// For backwards compatibility when you use `esm-wallaby`
+module.exports = require('./dist/presentations/push-cut.js');