@remotion/transitions 4.0.83 → 4.0.84

package/dist/cjs/clock-wipe.js

@@ -21,9 +21,26 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
             width: '100%',
             height: '100%',
             clipPath: presentationDirection === 'exiting' ? undefined : `url(#${clipId})`,
+            ...(presentationDirection === 'entering'
+                ? passedProps.innerEnterStyle
+                : passedProps.innerExitStyle),
         };
-    }, [clipId, presentationDirection]);
-    return (jsxRuntime.jsxs(remotion.AbsoluteFill, { children: [jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx("svg", { children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, children: jsxRuntime.jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+    }, [
+        clipId,
+        passedProps.innerEnterStyle,
+        passedProps.innerExitStyle,
+        presentationDirection,
+    ]);
+    const outerStyle = react.useMemo(() => {
+        return presentationDirection === 'entering'
+            ? passedProps.outerEnterStyle
+            : passedProps.outerExitStyle;
+    }, [
+        passedProps.outerEnterStyle,
+        passedProps.outerExitStyle,
+        presentationDirection,
+    ]);
+    return (jsxRuntime.jsxs(remotion.AbsoluteFill, { style: outerStyle, children: [jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx("svg", { children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, children: jsxRuntime.jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
 };
 const clockWipe = (props) => {
     return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };

package/dist/cjs/fade.js

@@ -6,14 +6,23 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var remotion = require('remotion');
 
-const FadePresentation = ({ children, presentationDirection, presentationProgress }) => {
+const FadePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
     const isEntering = presentationDirection === 'entering';
     const style = react.useMemo(() => {
         return {
             opacity: isEntering ? presentationProgress : 1,
+            ...(presentationDirection === 'entering'
+                ? passedProps.enterStyle
+                : passedProps.exitStyle),
         };
-    }, [isEntering, presentationProgress]);
-    return (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
+    }, [
+        isEntering,
+        passedProps.enterStyle,
+        passedProps.exitStyle,
+        presentationDirection,
+        presentationProgress,
+    ]);
+    return jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children });
 };
 const fade = (props) => {
     return {

package/dist/cjs/flip.js

@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var remotion = require('remotion');
 
-const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000 }, }) => {
+const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000, innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
     const style = react.useMemo(() => {
         const startRotationEntering = direction === 'from-right' || direction === 'from-top' ? 180 : -180;
         const endRotationEntering = direction === 'from-right' || direction === 'from-top' ? -180 : 180;
@@ -22,15 +22,27 @@ const Flip = ({ children, presentationDirection, presentationProgress, passedPro
             transform: `${rotateProperty}(${rotation}deg)`,
             backfaceVisibility: 'hidden',
             WebkitBackfaceVisibility: 'hidden',
+            ...(presentationDirection === 'entering'
+                ? innerEnterStyle
+                : innerExitStyle),
         };
-    }, [direction, presentationDirection, presentationProgress]);
+    }, [
+        direction,
+        innerEnterStyle,
+        innerExitStyle,
+        presentationDirection,
+        presentationProgress,
+    ]);
     const outer = react.useMemo(() => {
         return {
             perspective,
             // Make children also their backface hidden
             transformStyle: 'preserve-3d',
+            ...(presentationDirection === 'entering'
+                ? outerEnterStyle
+                : outerExitStyle),
         };
-    }, [perspective]);
+    }, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
     return (jsxRuntime.jsx(remotion.AbsoluteFill, { style: outer, children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
 };
 const flip = (props) => {

package/dist/cjs/index.js

@@ -68,7 +68,7 @@ const flattenChildren = (children) => {
     }, []);
 };
 
-const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
     const directionStyle = React.useMemo(() => {
         if (presentationDirection === 'exiting') {
             switch (direction) {
@@ -120,9 +120,10 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             justifyContent: 'center',
             alignItems: 'center',
             ...directionStyle,
+            ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
         };
-    }, [directionStyle]);
-    return (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
+    }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
+    return jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children });
 };
 const slide = (props) => {
     return {

package/dist/cjs/presentations/clock-wipe.d.ts

@@ -1,6 +1,11 @@
+import React from 'react';
 import type { TransitionPresentation } from '../types.js';
 export type ClockWipeProps = {
     width: number;
     height: number;
+    outerEnterStyle?: React.CSSProperties;
+    outerExitStyle?: React.CSSProperties;
+    innerEnterStyle?: React.CSSProperties;
+    innerExitStyle?: React.CSSProperties;
 };
 export declare const clockWipe: (props: ClockWipeProps) => TransitionPresentation<ClockWipeProps>;

package/dist/cjs/presentations/fade.d.ts

@@ -1,3 +1,7 @@
+/// <reference types="react" />
 import type { TransitionPresentation } from '../types.js';
-export type FadeProps = Record<string, never>;
+export type FadeProps = {
+    enterStyle?: React.CSSProperties;
+    exitStyle?: React.CSSProperties;
+};
 export declare const fade: (props?: FadeProps) => TransitionPresentation<FadeProps>;

package/dist/cjs/presentations/flip.d.ts

@@ -1,7 +1,12 @@
+import React from 'react';
 import type { TransitionPresentation } from '../types.js';
 export type FlipDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
 export type FlipProps = {
     direction?: FlipDirection;
     perspective?: number;
+    outerEnterStyle?: React.CSSProperties;
+    outerExitStyle?: React.CSSProperties;
+    innerEnterStyle?: React.CSSProperties;
+    innerExitStyle?: React.CSSProperties;
 };
 export declare const flip: (props?: FlipProps) => TransitionPresentation<FlipProps>;

package/dist/cjs/presentations/slide.d.ts

@@ -1,6 +1,9 @@
+import React from 'react';
 import type { TransitionPresentation } from '../types.js';
 export type SlideDirection = 'from-left' | 'from-top' | 'from-right' | 'from-bottom';
 export type SlideProps = {
     direction?: SlideDirection;
+    exitStyle?: React.CSSProperties;
+    enterStyle?: React.CSSProperties;
 };
 export declare const slide: (props?: SlideProps) => TransitionPresentation<SlideProps>;

package/dist/cjs/presentations/wipe.d.ts

@@ -1,6 +1,11 @@
+import React from 'react';
 import type { TransitionPresentation } from '../types.js';
 export type WipeDirection = 'from-left' | 'from-top-left' | 'from-top' | 'from-top-right' | 'from-right' | 'from-bottom-right' | 'from-bottom' | 'from-bottom-left';
 export type WipeProps = {
     direction?: WipeDirection;
+    outerEnterStyle?: React.CSSProperties;
+    outerExitStyle?: React.CSSProperties;
+    innerEnterStyle?: React.CSSProperties;
+    innerExitStyle?: React.CSSProperties;
 };
 export declare const wipe: (props?: WipeProps) => TransitionPresentation<WipeProps>;

package/dist/cjs/slide.js

@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var remotion = require('remotion');
 
-const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
     const directionStyle = react.useMemo(() => {
         if (presentationDirection === 'exiting') {
             switch (direction) {
@@ -58,9 +58,10 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             justifyContent: 'center',
             alignItems: 'center',
             ...directionStyle,
+            ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
         };
-    }, [directionStyle]);
-    return (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
+    }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
+    return jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children });
 };
 const slide = (props) => {
     return {

package/dist/cjs/wipe.js

@@ -122,7 +122,7 @@ Z`;
             throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
     }
 };
-const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
+const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
     const [clipId] = react.useState(() => String(remotion.random(null)));
     const progressInDirection = presentationDirection === 'entering'
         ? presentationProgress
@@ -137,8 +137,16 @@ const WipePresentation = ({ children, presentationProgress, presentationDirectio
             justifyContent: 'center',
             alignItems: 'center',
             clipPath: `url(#${clipId})`,
+            ...(presentationDirection === 'entering'
+                ? innerEnterStyle
+                : innerExitStyle),
         };
-    }, [clipId]);
+    }, [clipId, innerEnterStyle, innerExitStyle, presentationDirection]);
+    const outerStyle = react.useMemo(() => {
+        return presentationDirection === 'entering'
+            ? outerEnterStyle
+            : outerExitStyle;
+    }, [outerEnterStyle, outerExitStyle, presentationDirection]);
     const svgStyle = react.useMemo(() => {
         return {
             width: '100%',
@@ -146,7 +154,7 @@ const WipePresentation = ({ children, presentationProgress, presentationDirectio
             pointerEvents: 'none',
         };
     }, []);
-    return (jsxRuntime.jsxs(remotion.AbsoluteFill, { children: [jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }), jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsxRuntime.jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
+    return (jsxRuntime.jsxs(remotion.AbsoluteFill, { style: outerStyle, children: [jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }), jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsxRuntime.jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
 };
 const wipe = (props) => {
     return {

package/dist/presentations/clock-wipe.d.ts

@@ -1,6 +1,11 @@
+import React from 'react';
 import type { TransitionPresentation } from '../types.js';
 export type ClockWipeProps = {
     width: number;
     height: number;
+    outerEnterStyle?: React.CSSProperties;
+    outerExitStyle?: React.CSSProperties;
+    innerEnterStyle?: React.CSSProperties;
+    innerExitStyle?: React.CSSProperties;
 };
 export declare const clockWipe: (props: ClockWipeProps) => TransitionPresentation<ClockWipeProps>;

package/dist/presentations/clock-wipe.js

@@ -16,9 +16,26 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
             width: '100%',
             height: '100%',
             clipPath: presentationDirection === 'exiting' ? undefined : `url(#${clipId})`,
+            ...(presentationDirection === 'entering'
+                ? passedProps.innerEnterStyle
+                : passedProps.innerExitStyle),
         };
-    }, [clipId, presentationDirection]);
-    return (_jsxs(AbsoluteFill, { children: [_jsx(AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (_jsx(AbsoluteFill, { children: _jsx("svg", { children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+    }, [
+        clipId,
+        passedProps.innerEnterStyle,
+        passedProps.innerExitStyle,
+        presentationDirection,
+    ]);
+    const outerStyle = useMemo(() => {
+        return presentationDirection === 'entering'
+            ? passedProps.outerEnterStyle
+            : passedProps.outerExitStyle;
+    }, [
+        passedProps.outerEnterStyle,
+        passedProps.outerExitStyle,
+        presentationDirection,
+    ]);
+    return (_jsxs(AbsoluteFill, { style: outerStyle, children: [_jsx(AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (_jsx(AbsoluteFill, { children: _jsx("svg", { children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
 };
 export const clockWipe = (props) => {
     return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };

package/dist/presentations/fade.d.ts

@@ -1,3 +1,7 @@
+/// <reference types="react" />
 import type { TransitionPresentation } from '../types.js';
-export type FadeProps = Record<string, never>;
+export type FadeProps = {
+    enterStyle?: React.CSSProperties;
+    exitStyle?: React.CSSProperties;
+};
 export declare const fade: (props?: FadeProps) => TransitionPresentation<FadeProps>;

package/dist/presentations/fade.js

@@ -1,14 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { AbsoluteFill } from 'remotion';
-const FadePresentation = ({ children, presentationDirection, presentationProgress }) => {
+const FadePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
     const isEntering = presentationDirection === 'entering';
     const style = useMemo(() => {
         return {
             opacity: isEntering ? presentationProgress : 1,
+            ...(presentationDirection === 'entering'
+                ? passedProps.enterStyle
+                : passedProps.exitStyle),
         };
-    }, [isEntering, presentationProgress]);
-    return (_jsx(AbsoluteFill, { children: _jsx(AbsoluteFill, { style: style, children: children }) }));
+    }, [
+        isEntering,
+        passedProps.enterStyle,
+        passedProps.exitStyle,
+        presentationDirection,
+        presentationProgress,
+    ]);
+    return _jsx(AbsoluteFill, { style: style, children: children });
 };
 export const fade = (props) => {
     return {

package/dist/presentations/flip.d.ts

@@ -1,7 +1,12 @@
+import React from 'react';
 import type { TransitionPresentation } from '../types.js';
 export type FlipDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
 export type FlipProps = {
     direction?: FlipDirection;
     perspective?: number;
+    outerEnterStyle?: React.CSSProperties;
+    outerExitStyle?: React.CSSProperties;
+    innerEnterStyle?: React.CSSProperties;
+    innerExitStyle?: React.CSSProperties;
 };
 export declare const flip: (props?: FlipProps) => TransitionPresentation<FlipProps>;

package/dist/presentations/flip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { AbsoluteFill, interpolate } from 'remotion';
-const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000 }, }) => {
+const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000, innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
     const style = useMemo(() => {
         const startRotationEntering = direction === 'from-right' || direction === 'from-top' ? 180 : -180;
         const endRotationEntering = direction === 'from-right' || direction === 'from-top' ? -180 : 180;
@@ -17,15 +17,27 @@ const Flip = ({ children, presentationDirection, presentationProgress, passedPro
             transform: `${rotateProperty}(${rotation}deg)`,
             backfaceVisibility: 'hidden',
             WebkitBackfaceVisibility: 'hidden',
+            ...(presentationDirection === 'entering'
+                ? innerEnterStyle
+                : innerExitStyle),
         };
-    }, [direction, presentationDirection, presentationProgress]);
+    }, [
+        direction,
+        innerEnterStyle,
+        innerExitStyle,
+        presentationDirection,
+        presentationProgress,
+    ]);
     const outer = useMemo(() => {
         return {
             perspective,
             // Make children also their backface hidden
             transformStyle: 'preserve-3d',
+            ...(presentationDirection === 'entering'
+                ? outerEnterStyle
+                : outerExitStyle),
         };
-    }, [perspective]);
+    }, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
     return (_jsx(AbsoluteFill, { style: outer, children: _jsx(AbsoluteFill, { style: style, children: children }) }));
 };
 export const flip = (props) => {

package/dist/presentations/slide.d.ts

@@ -1,6 +1,9 @@
+import React from 'react';
 import type { TransitionPresentation } from '../types.js';
 export type SlideDirection = 'from-left' | 'from-top' | 'from-right' | 'from-bottom';
 export type SlideProps = {
     direction?: SlideDirection;
+    exitStyle?: React.CSSProperties;
+    enterStyle?: React.CSSProperties;
 };
 export declare const slide: (props?: SlideProps) => TransitionPresentation<SlideProps>;

package/dist/presentations/slide.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { AbsoluteFill } from 'remotion';
-const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
     const directionStyle = useMemo(() => {
         if (presentationDirection === 'exiting') {
             switch (direction) {
@@ -53,9 +53,10 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             justifyContent: 'center',
             alignItems: 'center',
             ...directionStyle,
+            ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
         };
-    }, [directionStyle]);
-    return (_jsx(AbsoluteFill, { children: _jsx(AbsoluteFill, { style: style, children: children }) }));
+    }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
+    return _jsx(AbsoluteFill, { style: style, children: children });
 };
 export const slide = (props) => {
     return {

package/dist/presentations/wipe.d.ts

@@ -1,6 +1,11 @@
+import React from 'react';
 import type { TransitionPresentation } from '../types.js';
 export type WipeDirection = 'from-left' | 'from-top-left' | 'from-top' | 'from-top-right' | 'from-right' | 'from-bottom-right' | 'from-bottom' | 'from-bottom-left';
 export type WipeProps = {
     direction?: WipeDirection;
+    outerEnterStyle?: React.CSSProperties;
+    outerExitStyle?: React.CSSProperties;
+    innerEnterStyle?: React.CSSProperties;
+    innerExitStyle?: React.CSSProperties;
 };
 export declare const wipe: (props?: WipeProps) => TransitionPresentation<WipeProps>;

package/dist/presentations/wipe.js

@@ -117,7 +117,7 @@ Z`;
             throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
     }
 };
-const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left' }, }) => {
+const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
     const [clipId] = useState(() => String(random(null)));
     const progressInDirection = presentationDirection === 'entering'
         ? presentationProgress
@@ -132,8 +132,16 @@ const WipePresentation = ({ children, presentationProgress, presentationDirectio
             justifyContent: 'center',
             alignItems: 'center',
             clipPath: `url(#${clipId})`,
+            ...(presentationDirection === 'entering'
+                ? innerEnterStyle
+                : innerExitStyle),
         };
-    }, [clipId]);
+    }, [clipId, innerEnterStyle, innerExitStyle, presentationDirection]);
+    const outerStyle = useMemo(() => {
+        return presentationDirection === 'entering'
+            ? outerEnterStyle
+            : outerExitStyle;
+    }, [outerEnterStyle, outerExitStyle, presentationDirection]);
     const svgStyle = useMemo(() => {
         return {
             width: '100%',
@@ -141,7 +149,7 @@ const WipePresentation = ({ children, presentationProgress, presentationDirectio
             pointerEvents: 'none',
         };
     }, []);
-    return (_jsxs(AbsoluteFill, { children: [_jsx(AbsoluteFill, { style: style, children: children }), _jsx(AbsoluteFill, { children: _jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: _jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
+    return (_jsxs(AbsoluteFill, { style: outerStyle, children: [_jsx(AbsoluteFill, { style: style, children: children }), _jsx(AbsoluteFill, { children: _jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: _jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
 };
 export const wipe = (props) => {
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.83",
+  "version": "4.0.84",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -16,15 +16,15 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.83",
-    "@remotion/shapes": "4.0.83",
-    "@remotion/paths": "4.0.83"
+    "@remotion/paths": "4.0.84",
+    "@remotion/shapes": "4.0.84",
+    "remotion": "4.0.84"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.276",
     "eslint": "8.42.0",
-    "prettier": "3.0.2",
-    "prettier-plugin-organize-imports": "^3.2.2",
+    "prettier": "3.1.1",
+    "prettier-plugin-organize-imports": "3.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vitest": "0.31.1",
@@ -33,8 +33,8 @@
     "@vitejs/plugin-react": "^2.0.0",
     "rollup": "^2.70.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "remotion": "4.0.83",
-    "@remotion/test-utils": "4.0.83"
+    "remotion": "4.0.84",
+    "@remotion/test-utils": "4.0.84"
   },
   "peerDependencies": {
     "react": ">=16.8.0",