padhle - post migration

2026-09-15 04:08:55 -04:00
parent 534b51b41b
commit b2d8109019
509 changed files with 147378 additions and 303 deletions
@@ -0,0 +1,81 @@
+If the video being created is a multi-scene video, it should be structured in a special way.
+Create a new folder and put each scene in a separate file.
+
+```tsx
+// SceneA.tsx
+export const SceneA: React.FC = () => {
+ return // ...
+}
+```
+
+```tsx
+// SceneB.tsx
+export const SceneB: React.FC = () => {
+  return // ...
+} 
+```
+
+Install `@remotion/transitions` if not yet available:
+
+```
+npx remotion add @remotion/transitions
+```
+
+// MyVideo.tsx
+```tsx
+import {TransitionSeries} from '@remotion/transitions';
+
+const MyVideo: React.FC = () => {
+  return (
+    <TransitionSeries>
+      <TransitionSeries.Sequence durationInFrames={4 * fps} name="SceneA">
+        <SceneA />
+      </TransitionSeries.Sequence>
+      <TransitionSeries.Sequence durationInFrames={4 * fps} name="SceneB">
+        <SceneB />
+      </TransitionSeries.Sequence>
+    </TransitionSeries>
+  )
+}
+```
+
+It could also make sense to register each scene individually in the root file so it can be edited there.
+If a composition with the same component is registered, one can double click the sequence in the main composition and jump to that composition.
+
+```tsx
+export const Root: React.FC = () => {
+  return (
+    <>
+      <Folder id="MyVideo-Scenes">
+        <Composition
+          id="Scene1"
+          component={Scene1}
+          durationInFrames={5 * fps}
+          fps={30}
+          width={1920}
+          height={1080}
+        />
+        <Composition
+          id="Scene2"
+          component={Scene2}
+          durationInFrames={5 * fps}
+          fps={30}
+          width={1920}
+          height={1080}
+        /> 
+      </Folder>
+      <Composition
+        id="MyVideo"
+        component={MyVideo}
+        durationInFrames={10 * fps}
+        fps={30}
+        width={1920}
+        height={1080}
+      /> 
+    </>
+  )
+}
+```
+
+This allows the user to trim the start and end of the durations visually and add [transitions](./transitions.md) later.
+Prefer inlining the `durationInFrames` values, because only then they are editable. It's okay if the value is redundant.