Transitins working

anims/CircularWipe.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useVideoConfig } from 'remotion';
+import { useCurrentFrame, useVideoConfig } from 'remotion';
 import { TransitionImplementationProps } from 'remotion-transition-series/lib/components/Transition';
 
 export const CircularWipe: React.FC<
-  TransitionImplementationProps & { direction: 'in' | 'out' }
+  TransitionImplementationProps & { direction?: 'in' | 'out' }
 > = ({
   direction = 'out',
   progress: inProgress,
@@ -15,7 +15,6 @@ export const CircularWipe: React.FC<
     const isOut = direction === 'out';
     const progress = isOut ? inProgress : 1 - inProgress;
     const polygon = `circle(${radius * progress}px)`;
-
     return (
       <>
         <div
@@ -43,4 +42,4 @@ export const CircularWipe: React.FC<
         </div>
       </>
     );
-  };
+  };

anims/Pan.tsx

@@ -3,7 +3,7 @@ import { TransitionImplementationProps } from 'remotion-transition-series/lib/co
 
 export const Pan: React.FC<
   TransitionImplementationProps & {
-    direction: 'up' | 'down' | 'left' | 'right';
+    direction?: 'up' | 'down' | 'left' | 'right';
   }
 > = ({
   direction = 'left',
@@ -43,4 +43,4 @@ export const Pan: React.FC<
         </div>
       </>
     );
-  };
+  };

anims/Slide.tsx

@@ -3,7 +3,7 @@ import { TransitionImplementationProps } from 'remotion-transition-series/lib/co
 
 export const Slide: React.FC<
   TransitionImplementationProps & {
-    direction: 'up' | 'down' | 'left' | 'right';
+    direction?: 'up' | 'down' | 'left' | 'right';
   }
 > = ({
   direction = 'left',
@@ -42,4 +42,4 @@ export const Slide: React.FC<
         </div>
       </>
     );
-  };
+  };

package-lock.json

@@ -15,7 +15,6 @@
         "@remotion/cli": "4.0.19",
         "@remotion/eslint-config": "4.0.19",
         "@remotion/google-fonts": "4.0.19",
-        "@remotion/lottie": "^4.0.43",
         "@remotion/noise": "4.0.19",
         "@remotion/preload": "4.0.19",
         "@remotion/tailwind": "4.0.19",
@@ -4400,28 +4399,6 @@
         "remotion": "4.0.19"
       }
     },
-    "node_modules/@remotion/lottie": {
-      "version": "4.0.43",
-      "resolved": "https://registry.npmjs.org/@remotion/lottie/-/lottie-4.0.43.tgz",
-      "integrity": "sha512-+BuZuOF4rAG3oDrGfiw9jZ1yxgtsAixNV4yKZ4Pile2LFV/FDp8pFt3Ss6DPh0SrC27aGr9ubjSIb7j0nWcZnA==",
-      "dependencies": {
-        "remotion": "4.0.43"
-      },
-      "peerDependencies": {
-        "lottie-web": "^5",
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@remotion/lottie/node_modules/remotion": {
-      "version": "4.0.43",
-      "resolved": "https://registry.npmjs.org/remotion/-/remotion-4.0.43.tgz",
-      "integrity": "sha512-WKBzZWL37AgeAMlnpg4uce7lcEUqiaQNsPVBPUV3NZgnYCoEzpusYBr8ubcwndZovjLKJQchPzT4hoBEW71/Lg==",
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/@remotion/media-utils": {
       "version": "4.0.19",
       "resolved": "https://registry.npmjs.org/@remotion/media-utils/-/media-utils-4.0.19.tgz",
@@ -10411,12 +10388,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lottie-web": {
-      "version": "5.12.2",
-      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
-      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==",
-      "peer": true
-    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -22113,22 +22084,6 @@
         "remotion": "4.0.19"
       }
     },
-    "@remotion/lottie": {
-      "version": "4.0.43",
-      "resolved": "https://registry.npmjs.org/@remotion/lottie/-/lottie-4.0.43.tgz",
-      "integrity": "sha512-+BuZuOF4rAG3oDrGfiw9jZ1yxgtsAixNV4yKZ4Pile2LFV/FDp8pFt3Ss6DPh0SrC27aGr9ubjSIb7j0nWcZnA==",
-      "requires": {
-        "remotion": "4.0.43"
-      },
-      "dependencies": {
-        "remotion": {
-          "version": "4.0.43",
-          "resolved": "https://registry.npmjs.org/remotion/-/remotion-4.0.43.tgz",
-          "integrity": "sha512-WKBzZWL37AgeAMlnpg4uce7lcEUqiaQNsPVBPUV3NZgnYCoEzpusYBr8ubcwndZovjLKJQchPzT4hoBEW71/Lg==",
-          "requires": {}
-        }
-      }
-    },
     "@remotion/media-utils": {
       "version": "4.0.19",
       "resolved": "https://registry.npmjs.org/@remotion/media-utils/-/media-utils-4.0.19.tgz",
@@ -26659,12 +26614,6 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
-    "lottie-web": {
-      "version": "5.12.2",
-      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
-      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==",
-      "peer": true
-    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",

package.json

@@ -40,7 +40,6 @@
     "@remotion/cli": "4.0.19",
     "@remotion/eslint-config": "4.0.19",
     "@remotion/google-fonts": "4.0.19",
-    "@remotion/lottie": "^4.0.43",
     "@remotion/noise": "4.0.19",
     "@remotion/preload": "4.0.19",
     "@remotion/tailwind": "4.0.19",

src/OriginalManuscriptModel.ts

@@ -1,6 +1,7 @@
 export interface OriginalManuscript {
     id: string;
     bgMusic: string
+    bgMusicDuration: number
     status: boolean
     transcriptText: string
     transcript: Transcript[]

src/RenderUtils.ts

@@ -1,3 +1,4 @@
+import { random, useCurrentFrame } from "remotion";
 
 
 function levenshteinDistance(str1: string, str2: string) {
@@ -18,6 +19,10 @@ function levenshteinDistance(str1: string, str2: string) {
 }
 export class RenderUtils {
 
+  public static randomElement<T>(arr: T[], seed: number): T {
+    return arr[Math.floor(random(seed || 1) * arr.length)];
+  }
+
   public static hashCode(s) {
     return s.split("").reduce(function (a, b) {
       a = ((a << 5) - a) + b.charCodeAt(0);

src/ig-reel/IGMediaRender.tsx

@@ -0,0 +1,30 @@
+import { AbsoluteFill, Easing, Img, Video, interpolate, staticFile, useCurrentFrame } from "remotion";
+import { DisplayMedia } from "./IGSimpleScene";
+
+
+export function IGMediaRender(props) {
+  let displayMedia: DisplayMedia = props.displayMedia
+  let frame = useCurrentFrame()
+  let bgMediaPath = staticFile(displayMedia?.path || '')
+  let curZoom = props.curZoom
+
+  return (
+    displayMedia.type == 'video' ? (
+      <div style={{
+        position: 'relative',
+        height: '100%', width: '100%'
+      }}>
+        <Video playbackRate={0.5} volume={0} style={{
+          background: '#fff',
+          position: 'absolute',
+          height: '100%', width: '100%'
+        }} src={bgMediaPath} />
+      </div>
+    ) : (
+      <Img className='absolute inset-0 w-full h-full object-cover' style={{
+        transform: `scale(${(curZoom)})  translateX(${10 * curZoom}px)`,
+        height: '100%', width: '100%'
+      }} src={bgMediaPath} />
+    )
+  )
+}

src/ig-reel/IGReelComposition.tsx

@@ -1,14 +1,16 @@
 //@ts-nocheck
-import { AbsoluteFill, Audio, Img, staticFile } from 'remotion';
+import { AbsoluteFill, Audio, Img, interpolate, staticFile } from 'remotion';
 import React from 'react'
 import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { Series } from "remotion";
 import { IGScene } from './IGSimpleScene';
+import { OriginalManuscript } from '../OriginalManuscriptModel';
 
 
-export const IGReelComposition: React.FC = (props) => {
+export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   const { fontFamily } = loadFont();
-  let { contents, meta, bgMusic } = props
+  let { contents, meta, bgMusic, bgMusicDuration } = props
+  let fps = meta.fps
 
 
   let bgMusicPath = staticFile(bgMusic || '')
@@ -18,7 +20,11 @@ export const IGReelComposition: React.FC = (props) => {
     }}>
       {
         bgMusic && (
-          <Audio loop fade volume={0.05} src={bgMusicPath} />
+          <Audio loop
+            volume={(f) =>
+              interpolate(f, [0, bgMusicDuration * fps], [0.05, 0.01], { extrapolateLeft: "clamp" })
+            }
+            src={bgMusicPath} />
         )
       }
       <Series>

src/ig-reel/IGSimpleScene.tsx

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { AbsoluteFill, Img, staticFile, Audio, useCurrentFrame, Video } from 'remotion';
+import { AbsoluteFill, interpolate, Img, staticFile, Audio, useCurrentFrame, Video, Easing, random } from 'remotion';
 import React, { useEffect, useState } from 'react'
 import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { Series, Sequence } from "remotion";
@@ -10,8 +10,20 @@ import GeneralSubtitles from '../subtitles/general_Subtitles';
 import ExcitedSubtitles from '../subtitles/excited_Subtitles';
 import _ from 'lodash';
 import './styles.module.css'
-import { Lottie } from '@remotion/lottie';
-import animationData from "../../public/assets/transition_2.json";
+import TransitionSeries from 'remotion-transition-series';
+import { CircularWipe } from '../../anims/CircularWipe';
+import { LinearWipe } from '../../anims/LinearWipe';
+import { Slide } from '../../anims/Slide';
+import { Pan } from '../../anims/Pan';
+import { Dissolve } from '../../anims/Dissolve';
+import { SlidingDoors } from '../../anims/SlidingDoors';
+import { Plate } from '../../anims/Plate';
+import { GlowingStroke } from '../../anims/GlowingStrike';
+import { IGMediaRender } from './IGMediaRender';
+import { Group } from './Types';
+
+export type DisplayMedia = SectionMedia &
+{ idx: number, durationFrames: number, startFrame: number, endFrame: number, }
 
 export const IGScene: React.FC<any> = (props: {
   script: any,
@@ -101,10 +113,9 @@ export const IGScene: React.FC<any> = (props: {
 
   let curSecond: Number = frame / fps
   let word = findCurrentWord(curSecond, subtitles)
-  let group = findCurrentGroupByTime(curSecond, groups)
+  let group: Group = findCurrentGroupByTime(curSecond, groups)
 
-  let displayMedia: SectionMedia &
-  { idx: number, durationFrames: number, startFrame: number, endFrame: number, } = (item?.imageAbsPaths || [])[0]
+  let currentDisplayMedia: DisplayMedia = (item?.imageAbsPaths || [])[0]
   let transitioning = false
 
   if (!_.isEmpty(item?.imageAbsPaths)) {
@@ -120,13 +131,12 @@ export const IGScene: React.FC<any> = (props: {
       media.endFrame = frameOffest + media.durationFrames
       frameOffest = frameOffest + media.durationFrames
       if (frame > media.startFrame && frame < media.endFrame) {
-        displayMedia = media
+        currentDisplayMedia = media
       }
     }
 
   }
 
-  let bgMediaPath = staticFile(displayMedia?.path || '')
   let audioPath = RenderUtils.getFileName(item?.audioFullPath)
 
   let transition = {
@@ -135,67 +145,57 @@ export const IGScene: React.FC<any> = (props: {
     durationFrames: 2 * fps,
   }
 
-  return (
-    <AbsoluteFill className='relative'>
-      <Audio volume={1} src={staticFile(audioPath)} />
-
-      {
-        displayMedia && (
-
-          <>
-
-            {
-              displayMedia.type == 'video' ? (
-                <div style={{
-                  position: 'relative',
-                  height: '100%', width: '100%'
-
-                }}>
-
-
-                  <Sequence
-                    from={displayMedia.startFrame}
-                    durationInFrames={displayMedia.durationFrames}>
-                    <Video playbackRate={0.5} volume={0} style={{
-                      background: '#fff',
-                      position: 'absolute',
-                      height: '100%', width: '100%'
-                    }} src={bgMediaPath} />
-                  </Sequence>
-
 
-
-                </div>
-              ) : (
-                <Img className='absolute inset-0 w-full h-full object-cover' style={{ height: '100%', width: '100%' }} src={bgMediaPath} />
-              )
-            }
+  function randomElement<T>(arr: T[], seed: number): T {
+    let i = Math.floor(random(seed) * arr.length)
+    let rand = arr[i];
+    return rand
+  }
 
 
-            <Sequence from={displayMedia.startFrame} durationInFrames={60} >
-              <Video playbackRate={1}
-                startFrom={20}
-                className="transparent" volume={0} style={{
-                  position: 'absolute',
-                  background: `linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 0), linear-gradient(135deg, rgba(0, 0, 0, .1) 25%, transparent 0), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, .1) 0), linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, .1) 0), #fff;`,
-                  height: '100%', width: '100%',
-                }} src={staticFile(transition.file)} />
-            </Sequence>
 
+  let chunks = (item?.imageAbsPaths?.map((displayMedia: DisplayMedia, i) => {
+    let chunk = []
+    let easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
+    easeInOutExp = Easing.ease
+    let curZoom = 1 + 0.3 * (frame - displayMedia?.startFrame) / (displayMedia?.durationFrames || 1)
+    console.log(`[${frame}]`, 'image zoon', curZoom, [displayMedia?.startFrame, displayMedia?.endFrame])
+    chunk.push((
+      <TransitionSeries.Sequence durationInFrames={displayMedia.durationFrames}>
+        <IGMediaRender curZoom={curZoom} displayMedia={displayMedia} />
+      </TransitionSeries.Sequence>
+    ))
+    if (i < item?.imageAbsPaths.length - 1) {
+      let anims = [CircularWipe, Slide, SlidingDoors, Pan, LinearWipe, Dissolve, CircularWipe, Slide, SlidingDoors, Pan, LinearWipe, Dissolve]
+      // .fill(CircularWipe)
+      let Anim = anims[frame % 9]
+      let seed = i * displayMedia.idx
+      Anim = randomElement(anims, `x-${seed}`)
+      const easeInOutExp = Easing.inOut(Easing.bezier(0.8, 0.22, 0.96, 0.65));
+      chunk.push((
+        <TransitionSeries.Transition
+          durationInFrames={30}
+          transitionComponent={({ progress, ...props }) => {
+            return (
+              <Anim {...props} progress={easeInOutExp(progress)} />
+            )
+          }}
+        />
+      ))
+    }
+    return chunk
+  }))
+  return (
+    <AbsoluteFill className='relative'>
+      <Audio volume={1} src={staticFile(audioPath)} />
+      <TransitionSeries>
+        {
+          ...chunks
+        }
 
-            <Sequence from={displayMedia?.endFrame - 1 * fps} durationFrames={60}>
-              <Video playbackRate={1}
-                className="transparent" volume={0} style={{
-                  position: 'absolute',
-                  background: `linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 0), linear-gradient(135deg, rgba(0, 0, 0, .1) 25%, transparent 0), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, .1) 0), linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, .1) 0), #fff;`,
-                  height: '100%', width: '100%',
-                }} src={staticFile(transition.file)} />
-            </Sequence>
+      </TransitionSeries>
 
 
-          </>
-        )
-      }
       <div className='absolute inset-0'>
         <ExcitedSubtitles position='center' group={group} word={word} />
       </div>
@@ -203,6 +203,7 @@ export const IGScene: React.FC<any> = (props: {
   );
 };
 
+
 function splitWordsIntoGroups(words) {
   const groups = [];
   let currentGroup = [];

src/textWithBgImage/SemibitComposition.tsx

@@ -157,13 +157,12 @@ export const SemibitComposition: React.FC = () => {
                 fps={fps}
                 width={Script.meta?.resolution?.width || 1920}
                 height={Script.meta?.resolution?.height || 1080}
-                defaultProps={{
+                defaultProps={Object.assign(Script, {
                     bgMusic: RenderUtils.getFileName(Script.bgMusic, "mp3"),
                     contents: contents,
                     intro: intro,
-                    outro: outro,
-                    meta: Script.meta
-                }}
+                    outro: outro
+                })}
             />
 
             <Still