@remotion/three 4.0.526 → 4.0.528

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/ThreeCanvas.d.ts +3 -2
  2. package/dist/cjs/ThreeCanvas.js +14 -1
  3. package/dist/esm/index.mjs +61 -1
  4. package/dist/esm/webgpu.mjs +61 -1
  5. package/package.json +5 -5
package/dist/cjs/ThreeCanvas.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Canvas } from '@react-three/fiber';
2
2
  import React from 'react';
3
- export type ThreeCanvasProps = React.ComponentProps<typeof Canvas> & {
3
+ import { type InteractiveBaseProps, type InteractivePremountProps } from 'remotion';
4
+ export type ThreeCanvasProps = Omit<React.ComponentProps<typeof Canvas>, keyof InteractiveBaseProps> & InteractiveBaseProps & InteractivePremountProps & {
4
5
  readonly width: number;
5
6
  readonly height: number;
6
7
  readonly children: React.ReactNode;
@@ -12,6 +13,6 @@ type ThreeCanvasInternalsProps = ThreeCanvasProps & {
12
13
  readonly FrameRenderer: React.ComponentType<ThreeCanvasFrameRendererProps>;
13
14
  readonly advanceOnCreated: boolean;
14
15
  };
15
- export declare const ThreeCanvasInternals: (props: ThreeCanvasInternalsProps) => import("react/jsx-runtime").JSX.Element;
16
+ export declare const ThreeCanvasInternals: ({ from, durationInFrames, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, ...props }: ThreeCanvasInternalsProps) => import("react/jsx-runtime").JSX.Element;
16
17
  export declare const ThreeCanvas: (props: ThreeCanvasProps) => import("react/jsx-runtime").JSX.Element;
17
18
  export {};
package/dist/cjs/ThreeCanvas.js CHANGED
@@ -26,7 +26,7 @@ const ManualFrameRenderer = ({ onRendered }) => {
26
26
  }, [frame, advance, onRendered]);
27
27
  return null;
28
28
  };
29
- const ThreeCanvasInternals = (props) => {
29
+ const ThreeCanvasContent = (props) => {
30
30
  const { children, width, height, style, resize, frameloop, onCreated, FrameRenderer, advanceOnCreated, ...rest } = props;
31
31
  const { isRendering } = (0, remotion_1.useRemotionEnvironment)();
32
32
  const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
@@ -69,6 +69,19 @@ const ThreeCanvasInternals = (props) => {
69
69
  jsx_runtime_1.jsx(Scale, { width: width, height: height }), jsx_runtime_1.jsxs(remotion_1.Internals.RemotionContextProvider, { contexts: contexts, children: [isRendering && jsx_runtime_1.jsx(FrameRenderer, { onRendered: handleRendered }), children] })
70
70
  ] }) }));
71
71
  };
72
+ const ThreeCanvasInternals = ({ from, durationInFrames, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, ...props }) => {
73
+ const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = remotion_1.Internals.usePremounting({
74
+ from: from !== null && from !== void 0 ? from : 0,
75
+ durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
76
+ premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
77
+ postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
78
+ style: style !== null && style !== void 0 ? style : null,
79
+ styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
80
+ styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
81
+ hideWhilePremounted: 'opacity',
82
+ });
83
+ return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, durationInFrames: durationInFrames, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<ThreeCanvas>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : false, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(ThreeCanvasContent, { ...props, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined }) }) }));
84
+ };
72
85
  exports.ThreeCanvasInternals = ThreeCanvasInternals;
73
86
  /*
74
87
  * @description A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotion's useCurrentFrame().
package/dist/esm/index.mjs CHANGED
@@ -32,6 +32,8 @@ import {
32
32
  useState
33
33
  } from "react";
34
34
  import {
35
+ Freeze,
36
+ Sequence,
35
37
  Internals,
36
38
  useCurrentFrame,
37
39
  useDelayRender as useDelayRender2,
@@ -89,7 +91,7 @@ var ManualFrameRenderer = ({ onRendered }) => {
89
91
  }, [frame, advance, onRendered]);
90
92
  return null;
91
93
  };
92
- var ThreeCanvasInternals = (props) => {
94
+ var ThreeCanvasContent = (props) => {
93
95
  const {
94
96
  children,
95
97
  width,
@@ -164,6 +166,64 @@ var ThreeCanvasInternals = (props) => {
164
166
  })
165
167
  });
166
168
  };
169
+ var ThreeCanvasInternals = ({
170
+ from,
171
+ durationInFrames,
172
+ trimBefore,
173
+ playbackRate,
174
+ freeze,
175
+ hidden,
176
+ name,
177
+ showInTimeline,
178
+ premountFor,
179
+ postmountFor,
180
+ styleWhilePremounted,
181
+ styleWhilePostmounted,
182
+ style,
183
+ ...props
184
+ }) => {
185
+ const {
186
+ effectivePremountFor,
187
+ effectivePostmountFor,
188
+ freezeFrame,
189
+ isPremountingOrPostmounting,
190
+ premountingActive,
191
+ postmountingActive,
192
+ premountingStyle
193
+ } = Internals.usePremounting({
194
+ from: from ?? 0,
195
+ durationInFrames: durationInFrames ?? Infinity,
196
+ premountFor: premountFor ?? null,
197
+ postmountFor: postmountFor ?? null,
198
+ style: style ?? null,
199
+ styleWhilePremounted: styleWhilePremounted ?? null,
200
+ styleWhilePostmounted: styleWhilePostmounted ?? null,
201
+ hideWhilePremounted: "opacity"
202
+ });
203
+ return /* @__PURE__ */ jsx2(Freeze, {
204
+ frame: freezeFrame,
205
+ active: isPremountingOrPostmounting,
206
+ children: /* @__PURE__ */ jsx2(Sequence, {
207
+ layout: "none",
208
+ from,
209
+ durationInFrames,
210
+ trimBefore,
211
+ playbackRate,
212
+ freeze,
213
+ hidden,
214
+ name: name ?? "<ThreeCanvas>",
215
+ showInTimeline: showInTimeline ?? false,
216
+ _remotionInternalPremountDisplay: effectivePremountFor || null,
217
+ _remotionInternalPostmountDisplay: effectivePostmountFor || null,
218
+ _remotionInternalIsPremounting: premountingActive,
219
+ _remotionInternalIsPostmounting: postmountingActive,
220
+ children: /* @__PURE__ */ jsx2(ThreeCanvasContent, {
221
+ ...props,
222
+ style: premountingStyle ?? undefined
223
+ })
224
+ })
225
+ });
226
+ };
167
227
  var ThreeCanvas = (props) => {
168
228
  return /* @__PURE__ */ jsx2(ThreeCanvasInternals, {
169
229
  ...props,
package/dist/esm/webgpu.mjs CHANGED
@@ -38,6 +38,8 @@ import {
38
38
  useState
39
39
  } from "react";
40
40
  import {
41
+ Freeze,
42
+ Sequence,
41
43
  Internals,
42
44
  useCurrentFrame,
43
45
  useDelayRender as useDelayRender2,
@@ -95,7 +97,7 @@ var ManualFrameRenderer = ({ onRendered }) => {
95
97
  }, [frame, advance, onRendered]);
96
98
  return null;
97
99
  };
98
- var ThreeCanvasInternals = (props) => {
100
+ var ThreeCanvasContent = (props) => {
99
101
  const {
100
102
  children,
101
103
  width,
@@ -170,6 +172,64 @@ var ThreeCanvasInternals = (props) => {
170
172
  })
171
173
  });
172
174
  };
175
+ var ThreeCanvasInternals = ({
176
+ from,
177
+ durationInFrames,
178
+ trimBefore,
179
+ playbackRate,
180
+ freeze,
181
+ hidden,
182
+ name,
183
+ showInTimeline,
184
+ premountFor,
185
+ postmountFor,
186
+ styleWhilePremounted,
187
+ styleWhilePostmounted,
188
+ style,
189
+ ...props
190
+ }) => {
191
+ const {
192
+ effectivePremountFor,
193
+ effectivePostmountFor,
194
+ freezeFrame,
195
+ isPremountingOrPostmounting,
196
+ premountingActive,
197
+ postmountingActive,
198
+ premountingStyle
199
+ } = Internals.usePremounting({
200
+ from: from ?? 0,
201
+ durationInFrames: durationInFrames ?? Infinity,
202
+ premountFor: premountFor ?? null,
203
+ postmountFor: postmountFor ?? null,
204
+ style: style ?? null,
205
+ styleWhilePremounted: styleWhilePremounted ?? null,
206
+ styleWhilePostmounted: styleWhilePostmounted ?? null,
207
+ hideWhilePremounted: "opacity"
208
+ });
209
+ return /* @__PURE__ */ jsx2(Freeze, {
210
+ frame: freezeFrame,
211
+ active: isPremountingOrPostmounting,
212
+ children: /* @__PURE__ */ jsx2(Sequence, {
213
+ layout: "none",
214
+ from,
215
+ durationInFrames,
216
+ trimBefore,
217
+ playbackRate,
218
+ freeze,
219
+ hidden,
220
+ name: name ?? "<ThreeCanvas>",
221
+ showInTimeline: showInTimeline ?? false,
222
+ _remotionInternalPremountDisplay: effectivePremountFor || null,
223
+ _remotionInternalPostmountDisplay: effectivePostmountFor || null,
224
+ _remotionInternalIsPremounting: premountingActive,
225
+ _remotionInternalIsPostmounting: postmountingActive,
226
+ children: /* @__PURE__ */ jsx2(ThreeCanvasContent, {
227
+ ...props,
228
+ style: premountingStyle ?? undefined
229
+ })
230
+ })
231
+ });
232
+ };
173
233
  var ThreeCanvas = (props) => {
174
234
  return /* @__PURE__ */ jsx2(ThreeCanvasInternals, {
175
235
  ...props,
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "url": "https://github.com/remotion-dev/remotion/tree/main/packages/three"
4
4
  },
5
5
  "name": "@remotion/three",
6
- "version": "4.0.526",
6
+ "version": "4.0.528",
7
7
  "description": "Include React Three Fiber components in a Remotion video",
8
8
  "main": "dist/cjs/index.js",
9
9
  "types": "dist/cjs/index.d.ts",
@@ -21,14 +21,14 @@
21
21
  "url": "https://github.com/remotion-dev/remotion/issues"
22
22
  },
23
23
  "dependencies": {
24
- "remotion": "4.0.526"
24
+ "remotion": "4.0.528"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "@react-three/fiber": ">=8.0.0",
28
28
  "react": ">=16.8.0",
29
29
  "react-dom": ">=16.8.0",
30
30
  "three": ">=0.137.0",
31
- "remotion": "4.0.526"
31
+ "remotion": "4.0.528"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@react-three/fiber": "9.2.0",
@@ -37,9 +37,9 @@
37
37
  "@types/web": "0.0.166",
38
38
  "react": "19.2.3",
39
39
  "react-dom": "19.2.3",
40
- "remotion": "4.0.526",
40
+ "remotion": "4.0.528",
41
41
  "three": "0.178.0",
42
- "@remotion/eslint-config-internal": "4.0.526",
42
+ "@remotion/eslint-config-internal": "4.0.528",
43
43
  "eslint": "9.19.0",
44
44
  "@typescript/native-preview": "7.0.0-dev.20260217.1"
45
45
  },