@remotion/transitions 4.0.315 → 4.0.316

package/bundle.ts

@@ -5,7 +5,7 @@ if (process.env.NODE_ENV !== 'production') {
 	throw new Error('This script must be run using NODE_ENV=production');
 }
 
-const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe', 'none'];
+const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe', 'none', 'iris'];
 
 const output = await build({
 	entrypoints: [

package/dist/esm/iris.mjs

@@ -0,0 +1,64 @@
+// src/presentations/iris.tsx
+import { translatePath } from "@remotion/paths";
+import { makeCircle } from "@remotion/shapes";
+import { useMemo, useState } from "react";
+import { AbsoluteFill, random } from "remotion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var IrisPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const maxRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
+  const minRadius = 0;
+  const currentRadius = presentationDirection === "entering" ? minRadius + (maxRadius - minRadius) * presentationProgress : maxRadius - (maxRadius - minRadius) * presentationProgress;
+  const { path } = makeCircle({
+    radius: currentRadius
+  });
+  const translatedPath = translatePath(path, passedProps.width / 2 - currentRadius, passedProps.height / 2 - currentRadius);
+  const [clipId] = useState(() => String(random(null)));
+  const style = useMemo(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      clipPath: presentationDirection === "exiting" ? undefined : `url(#${clipId})`,
+      ...presentationDirection === "entering" ? passedProps.innerEnterStyle : passedProps.innerExitStyle
+    };
+  }, [
+    clipId,
+    passedProps.innerEnterStyle,
+    passedProps.innerExitStyle,
+    presentationDirection
+  ]);
+  const outerStyle = useMemo(() => {
+    return presentationDirection === "entering" ? passedProps.outerEnterStyle : passedProps.outerExitStyle;
+  }, [
+    passedProps.outerEnterStyle,
+    passedProps.outerExitStyle,
+    presentationDirection
+  ]);
+  return /* @__PURE__ */ jsxs(AbsoluteFill, {
+    style: outerStyle,
+    children: [
+      /* @__PURE__ */ jsx(AbsoluteFill, {
+        style,
+        children
+      }),
+      presentationDirection === "exiting" ? null : /* @__PURE__ */ jsx(AbsoluteFill, {
+        children: /* @__PURE__ */ jsx("svg", {
+          children: /* @__PURE__ */ jsx("defs", {
+            children: /* @__PURE__ */ jsx("clipPath", {
+              id: clipId,
+              children: /* @__PURE__ */ jsx("path", {
+                d: translatedPath,
+                fill: "black"
+              })
+            })
+          })
+        })
+      })
+    ]
+  });
+};
+var iris = (props) => {
+  return { component: IrisPresentation, props: props ?? {} };
+};
+export {
+  iris
+};

package/dist/presentations/iris.d.ts

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

package/dist/presentations/iris.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iris = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const paths_1 = require("@remotion/paths");
+const shapes_1 = require("@remotion/shapes");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const IrisPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+    // Calculate the radius needed to cover the entire viewport
+    const maxRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
+    // For iris, we want to start small and grow large (entering)
+    // or start large and shrink small (exiting)
+    const minRadius = 0;
+    const currentRadius = presentationDirection === 'entering'
+        ? minRadius + (maxRadius - minRadius) * presentationProgress
+        : maxRadius - (maxRadius - minRadius) * presentationProgress;
+    const { path } = (0, shapes_1.makeCircle)({
+        radius: currentRadius,
+    });
+    // Center the circle in the viewport
+    const translatedPath = (0, paths_1.translatePath)(path, passedProps.width / 2 - currentRadius, passedProps.height / 2 - currentRadius);
+    const [clipId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            clipPath: presentationDirection === 'exiting' ? undefined : `url(#${clipId})`,
+            ...(presentationDirection === 'entering'
+                ? passedProps.innerEnterStyle
+                : passedProps.innerExitStyle),
+        };
+    }, [
+        clipId,
+        passedProps.innerEnterStyle,
+        passedProps.innerExitStyle,
+        presentationDirection,
+    ]);
+    const outerStyle = (0, react_1.useMemo)(() => {
+        return presentationDirection === 'entering'
+            ? passedProps.outerEnterStyle
+            : passedProps.outerExitStyle;
+    }, [
+        passedProps.outerEnterStyle,
+        passedProps.outerExitStyle,
+        presentationDirection,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: outerStyle, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)("svg", { children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, children: (0, jsx_runtime_1.jsx)("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+};
+/*
+ * @description Creates an iris transition that uses a circular mask starting from the center to reveal the underlying scene.
+ * @see [Documentation](https://www.remotion.dev/docs/transitions/presentations/iris)
+ */
+const iris = (props) => {
+    return { component: IrisPresentation, props: props !== null && props !== void 0 ? props : {} };
+};
+exports.iris = iris;

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
   },
   "name": "@remotion/transitions",
-  "version": "4.0.315",
+  "version": "4.0.316",
   "description": "Library for creating transitions in Remotion",
   "sideEffects": false,
   "main": "dist/esm/index.mjs",
@@ -16,19 +16,19 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.315",
-    "@remotion/shapes": "4.0.315",
-    "@remotion/paths": "4.0.315"
+    "remotion": "4.0.316",
+    "@remotion/paths": "4.0.316",
+    "@remotion/shapes": "4.0.316"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "14.5.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "eslint": "9.19.0",
-    "remotion": "4.0.315",
-    "@remotion/player": "4.0.315",
-    "@remotion/test-utils": "4.0.315",
-    "@remotion/eslint-config-internal": "4.0.315"
+    "remotion": "4.0.316",
+    "@remotion/test-utils": "4.0.316",
+    "@remotion/eslint-config-internal": "4.0.316",
+    "@remotion/player": "4.0.316"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -84,6 +84,12 @@
       "import": "./dist/esm/none.mjs",
       "require": "./dist/presentations/none.js"
     },
+    "./iris": {
+      "types": "./dist/presentations/iris.d.ts",
+      "module": "./dist/esm/iris.mjs",
+      "import": "./dist/esm/iris.mjs",
+      "require": "./dist/presentations/iris.js"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -105,6 +111,9 @@
       ],
       "clock-wipe": [
         "dist/presentations/clock-wipe.d.ts"
+      ],
+      "iris": [
+        "dist/presentations/iris.d.ts"
       ]
     }
   },