@remotion/transitions 4.0.498 → 4.0.500

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,7 +1349,7 @@ 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,
@@ -1287,7 +1411,7 @@ var SeriesSequenceInner = ({
       stack
     });
   }
-  return /* @__PURE__ */ jsx4(Fragment, {
+  return /* @__PURE__ */ jsx5(Fragment, {
     children: props.children
   });
 };
@@ -1313,7 +1437,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 +1466,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,7 +1477,7 @@ 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>",
@@ -1450,9 +1574,9 @@ 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>",
@@ -1533,7 +1657,7 @@ var TransitionSeriesChildren = ({
             }
           }
           const renderSequenceAndRest = (sequence) => {
-            return /* @__PURE__ */ jsxs2(Fragment, {
+            return /* @__PURE__ */ jsxs3(Fragment, {
               children: [
                 sequence,
                 renderNext({
@@ -1564,7 +1688,7 @@ 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,
@@ -1572,7 +1696,7 @@ var TransitionSeriesChildren = ({
               _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 +1708,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 +1724,7 @@ var TransitionSeriesChildren = ({
                       onNextElementImage(null, null, null, i - 1);
                     },
                     bothEnteringAndExiting: true,
-                    children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
+                    children: /* @__PURE__ */ jsx5(WrapInEnteringProgressContext, {
                       presentationProgress: prevProgress,
                       children: sequenceChildren
                     })
@@ -1612,7 +1736,7 @@ 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,
@@ -1620,7 +1744,7 @@ var TransitionSeriesChildren = ({
               _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 +1754,7 @@ var TransitionSeriesChildren = ({
                   onNextElementImage(null, null, null, i - 1);
                 },
                 bothEnteringAndExiting: false,
-                children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
+                children: /* @__PURE__ */ jsx5(WrapInEnteringProgressContext, {
                   presentationProgress: prevProgress,
                   children: sequenceChildren
                 })
@@ -1640,7 +1764,7 @@ 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,
@@ -1648,7 +1772,7 @@ var TransitionSeriesChildren = ({
               _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,14 +1782,14 @@ 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,
@@ -1687,7 +1811,7 @@ var TransitionSeriesChildren = ({
       pendingOverlayValidation: false
     });
   }, [flattedChildren, fps, frame, onPrevElementImage, onNextElementImage]);
-  return /* @__PURE__ */ jsx4(Fragment, {
+  return /* @__PURE__ */ jsx5(Fragment, {
     children: childrenValue
   });
 };
@@ -1705,14 +1829,14 @@ var TransitionSeriesInner = (props) => {
   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,
     controls: controls ?? undefined,
-    children: /* @__PURE__ */ jsx4(TransitionSeriesChildren, {
+    children: /* @__PURE__ */ jsx5(TransitionSeriesChildren, {
       children
     })
   });
@@ -1748,6 +1872,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.498",
+	"version": "4.0.500",
 	"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.498",
-		"@remotion/shapes": "4.0.498",
-		"@remotion/paths": "4.0.498"
+		"remotion": "4.0.500",
+		"@remotion/shapes": "4.0.500",
+		"@remotion/paths": "4.0.500"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"remotion": "4.0.498",
+		"remotion": "4.0.500",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/test-utils": "4.0.498",
-		"@remotion/player": "4.0.498",
-		"@remotion/eslint-config-internal": "4.0.498",
+		"@remotion/test-utils": "4.0.500",
+		"@remotion/player": "4.0.500",
+		"@remotion/eslint-config-internal": "4.0.500",
 		"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');