improvements made

Remotion-app/public/Effects/Cloud_transparent.webm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d0c7d3f3ee338d5bd0a531cd63c00b60c8d6d3612fbcfbc643543e4be69941b4
-size 407296
+oid sha256:0f6a45557c19a20ee0169695fd4171f25d3006231eea9b1c08f8180ff4c0e1c7
+size 470277

Remotion-app/public/Effects/CurlingWave_transparent.webm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c3da1e8e62c14cf9b8edbba261f511ca343f10b88fa687e14fada403db3736e3
-size 397923
+oid sha256:98b50bb35f028a5c42e75b9ab767ff36296aed826595059e56ba4fcb675c1d49
+size 243272

Remotion-app/public/Effects/Fire_transparent.webm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0c0860e84e87e4dcbe7d8203c2eb0117a21ce865e28bb4c5e17c504f01245f95
-size 328798
+oid sha256:16669243c25f00d4fd00cf9854743af88f4ea80daea6dd41ed4029f25ef73ed6
+size 354200

Remotion-app/public/Effects/Happy_transparent.webm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e14e4d7e5148f01bc2cd560cb7f9db4f6b31b36b66929cf215c77fb22874a6a2
+size 658585

Remotion-app/public/Effects/Lightning_transparent.webm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:55501a8326f134bf9229edae2a594b9970f9c15df8397e707e36a7341baec523
-size 333275
+oid sha256:79356e90df5f5007d80bcb7f5c5bec06eeab88291d9db729af946e0e175b8edb
+size 524496

Remotion-app/public/Effects/Likes_transparent.webm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:14d1f54a3afe42fa8f4620ee9247259506d564d152ebea70517cc4584a435635
+size 796073

Remotion-app/public/Effects/Snow_transparent.webm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e1762003a6eba4ba53fc9f60059d643c0ffb98255ff504a75ac11edfe9facdad
+size 346196

Remotion-app/public/Effects/Swirl_transparent.webm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:51a87d24d790b3d3bffac1ed52ebbe47ed8405c8391d1dc00d9af43023639ed6
-size 241711
+oid sha256:ac4abdb90dac5ac071db9b6e55a12d61b07b7c4c296756d6f7826b5fabb7965a
+size 235339

Remotion-app/public/Effects/WaveBlue_transparent.webm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5b7efa26cd19e502de73bc48a8ec488d7841e3e51a90979e5f23f10edd2b6f87
-size 223682
+oid sha256:86c2ad1107dea569d47bbc7f626b4658d558c635f7f9472a86751f3ac29f51be
+size 226343

Remotion-app/public/Effects/WaveLeft_transparent.webm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a585c7c6202b9815386ebd347e899098b52787222f69754a830ee99b98fecd78
-size 333275
+oid sha256:fd8d7c016ee4230ae9a263c5871f95e99f811688fda67086f54300edfed617c3
+size 339082

Remotion-app/public/Effects/WaveRight_transparent.webm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e86eff8f31ddc36e4401a09cd91cfd68781cbbf88fdbe227fd6d7f101dde24d2
-size 213990
+oid sha256:8f6791d9a8b76c873bdf56037ca28bbc6a53466d9d9da65132f7dfcb12e1dab4
+size 263142

Remotion-app/public/Effects/Wave_transparent.webm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8f6e64c9c305a006869d46ffa0faf91e6f53289a4cb7eb1e6a5a33d0ba4bce1a
-size 241711
+oid sha256:cd51bd7c2a6f9aab77a9177dc99f903f830dd62d21262557b9de988370fb9686
+size 235339

Remotion-app/src/HelloWorld/AudioStream.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {staticFile, useVideoConfig, Audio} from 'remotion';
 import audioSequences from './Assets/AudioSequences.json';
 import {TransitionSeries} from '@remotion/transitions';
-export default function AudioStream() {
+const AudioStream = React.memo(() => {
 	const {fps} = useVideoConfig();
 	return (
 		<TransitionSeries
@@ -31,4 +31,6 @@ export default function AudioStream() {
 			})}
 		</TransitionSeries>
 	);
-}
+});
+
+export default AudioStream;

Remotion-app/src/HelloWorld/BackGroundStream.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 import {staticFile, useVideoConfig, Audio} from 'remotion';
 import backgroundSequences from './Assets/BackgroundSequences.json';
 import {TransitionSeries} from '@remotion/transitions';
-export default function BackgroundStream() {
+
+const BackgroundStream = React.memo(() => {
 	const {fps} = useVideoConfig();
 	return (
 		<TransitionSeries
@@ -30,4 +31,6 @@ export default function BackgroundStream() {
 			})}
 		</TransitionSeries>
 	);
-}
+});
+
+export default BackgroundStream;

Remotion-app/src/HelloWorld/Components/GsapAnimation.jsx

@@ -3,22 +3,20 @@ import {AbsoluteFill} from 'remotion';
 import React, {useMemo} from 'react';
 import gsap from 'gsap';
 
-export default function GsapAnimation({
-	Timeline,
-	style,
-	className,
-	children,
-	plugins = [],
-}) {
-	const memoizedPlugins = useMemo(() => {
-		return [...plugins];
-	}, [plugins]);
+const GsapAnimation = React.memo(
+	({Timeline, style, className, children, plugins = []}) => {
+		const memoizedPlugins = useMemo(() => {
+			return [...plugins];
+		}, [plugins]);
 
-	gsap.registerPlugin(memoizedPlugins);
-	const ContainerRef = useGsapTimeline(Timeline);
-	return (
-		<AbsoluteFill className={className} style={style} ref={ContainerRef}>
-			{children}
-		</AbsoluteFill>
-	);
-}
+		gsap.registerPlugin(memoizedPlugins);
+		const ContainerRef = useGsapTimeline(Timeline);
+		return (
+			<AbsoluteFill className={className} style={style} ref={ContainerRef}>
+				{children}
+			</AbsoluteFill>
+		);
+	}
+);
+
+export default GsapAnimation;

Remotion-app/src/HelloWorld/ImageStream.jsx

@@ -8,7 +8,7 @@ import GsapAnimation from './Components/GsapAnimation';
 import gsap from 'gsap';
 import {MotionPathPlugin} from 'gsap-trial/all';
 
-export default function ImageStream() {
+const ImageStream = React.memo(() => {
 	const {fps} = useVideoConfig();
 
 	return (
@@ -41,7 +41,7 @@ export default function ImageStream() {
 			</TransitionSeries>
 		</AbsoluteFill>
 	);
-}
+});
 
 const Images = ({entry, index}) => {
 	const plugins = useMemo(() => [MotionPathPlugin], []);
@@ -114,3 +114,5 @@ const CAMERA_PATHS = [
 	'M0,0 C0,0 0,100 0,0 C9.983341664682815,0 0,99.50041652780259 0,0 C19.866933079506122,0 0,98.00665778412416 0,0 C29.55202066613396,0 0,95.5336489125606 0,0 C38.941834230865055,0 0,92.10609940028851 0,0 C47.942553860420304,0 0,87.75825618903727 0,0 C56.46424733950355,0 0,82.53356149096783 0,0 C64.42176872376912,0 0,76.48421872844884 0,0 C71.73560908995228,0 0,69.67067093471654 0,0 C78.33269096274834,0 0,62.16099682706644 0,0 C84.14709848078965,0 0,54.03023058681398 0,0 C89.12073600614355,0 0,45.35961214255773 0,0 C93.20390859672264,0 0,36.235775447667336 0,0 C96.3558185417193,0 0,26.749882862458733 0,0 C98.54497299884602,0 0,16.99671429002408 0,0 C99.74949866040545,0 0,7.073720166770291 0,0 C99.95736030415051,0 0,-2.9199522301288816 0,0 C99.16648104524685,0 0,-12.884449429552486 0,0 C97.38476308781952,0 0,-22.72020946930871 0,0 C94.63000876874145,0 0,-32.32895668635036 0,0 C90.92974268256818,0 0,-41.61468365471424 0,0 C86.32093666488737,0 0,-50.48461045998576 0,0 C80.849640381959,0 0,-58.85011172553458 0,0 C74.57052121767201,0 0,-66.62760212798244 0,0 C67.54631805511507,0 0,-73.73937155412457 0,0 C59.84721441039566,0 0,-80.11436155469337 0,0 C51.550137182146415,0 0,-85.68887533689474 0,0 C42.737988023382975,0 0,-90.40721420170613 0,0 C33.498815015590466,0 0,-94.22223406686582 0,0 C23.9249329213982,0 0,-97.09581651495907 0,0 C14.112000805986721,0 0,-98.99924966004454 0,0 C4.158066243329049,0 0,-99.91351502732795 0,0 C-5.8374143427580085,0 0,-99.82947757947531 0,0 C-15.774569414324866,0 0,-98.74797699088649 0,0 C-25.554110202683166,0 0,-96.6798192579461 0,0 C-35.07832276896198,0 0,-93.64566872907963 0,0 C-44.252044329485244,0 0,-89.6758416334147 0,0 C-52.98361409084934,0 0,-84.8100031710408 0,0 C-61.185789094271925,0 0,-79.09677119144165 0,0 C-68.77661591839741,0 0,-72.59323042001398 0,0 C-75.68024953079282,0 0,-65.3643620863612 0,0 C-81.82771110644109,0 0,-57.48239465332685 0,0 C-87.15757724135882,0 0,-49.026082134069945 0,0 C-91.61659367494549,0 0,-40.079917207997546 0,0 C-95.1602073889516,0 0,-30.733286997841937 0,0 C-97.7530117665097,0 0,-21.07957994307797 0,0 C-99.36910036334645,0 0,-11.215252693505398 0,0 C-99.99232575641008,0 0,-1.2388663462890561 0,0 C-99.61646088358405,0 0,8.749898343944727 0,0 C-98.24526126243325,0 0,18.651236942257576 0,0 C-95.89242746631385,0 0,28.366218546322624 0,0 C-92.58146823277322,0 0,37.79777427129811 0,0 C-88.34546557201531,0 0,46.85166713003771 0,0 C-83.22674422239008,0 0,55.437433617916156 0,0 C-77.27644875559872,0 0,63.46928759426347 0,0 C-70.55403255703919,0 0,70.866977429126 0,0 C-63.12666378723208,0 0,77.55658785102501 0,0 C-55.06855425976376,0 0,83.47127848391598 0,0 C-46.46021794137566,0 0,88.55195169413193 0,0 C-37.3876664830236,0 0,92.74784307440359 0,0 C-27.941549819892586,0 0,96.01702866503659 0,0 C-18.216250427209502,0 0,98.32684384425848 0,0 C-8.30894028174964,0 0,99.65420970232175 0,0 C1.6813900484350601,0 0,99.98586363834151 0,0 C11.654920485049363,0 0,99.31849187581926 0,0 C21.511998808781552,0 0,97.65876257280235 0,0 C31.15413635133787,0 0,95.02325919585293 0,0 C40.48499206165983,0 0,91.43831482353194 0,0 C49.41133511386089,0 0,86.93974903498248 0,0 C57.84397643882001,0 0,81.57251001253569 0,0 C65.6986598718789,0 0,75.39022543433046 0,0 C72.89690401258765,0 0,68.45466664428059 0,0 C79.36678638491532,0 0,60.83513145322546 0,0 C85.04366206285648,0 0,52.60775173811045 0,0 C89.87080958116269,0 0,43.85473275743904 0,0 C93.7999976774739,0 0,34.663531783502584 0,0 C96.79196720314866,0 0,25.125984258225486 0,0 C98.81682338770004,0 0,15.337386203786435 0,0 C99.8543345374605,0 0,5.395542056264886 0,0 C99.8941341839772,0 0,-4.600212563953695 0,0 C98.93582466233818,0 0,-14.550003380861353 0,0 C96.98898108450862,0 0,-24.354415373579112 0,0 C94.07305566797726,0 0,-33.915486098383624 0,0 C90.21718337562933,0 0,-43.13768449706208 0,0 C85.45989080882805,0 0,-51.92886541166855 0,0 C79.84871126234903,0 0,-60.201190268482364 0,0 C73.43970978741133,0 0,-67.87200473200124 0,0 C66.2969230082182,0 0,-74.86466455973999 0,0 C58.49171928917617,0 0,-81.1093014061656 0,0 C50.10208564578846,0 0,-86.54352092411123 0,0 C41.21184852417566,0 0,-91.1130261884677 0,0 C31.909836234935213,0 0,-94.77216021311119 0,0 C22.288991410024593,0 0,-97.48436214041641 0,0 C12.44544235070617,0 0,-99.22253254526035 0,0 C2.4775425453357767,0 0,-99.96930420352065 0,0 C-7.51511204618093,0 0,-99.71721561963784 0,0 C-17.43267812229814,0 0,-98.46878557941267 0,0 C-27.17606264109442,0 0,-96.23648798313097 0,0 C-36.64791292519284,0 0,-93.04262721047533 0,0 C-45.75358937753214,0 0,-88.91911526253608 0,0',
 	'M0,0 L100,0 L99.51036656945537,9.984339998849284 L98.02625911568099,19.870906466122022 L95.56230900723436,29.5608862723338 L92.14294184004864,38.957410964557404 L87.80213531713179,47.96652513735051 L82.5830816278624,56.49812588790725 L76.53775768155874,64.46686396187575 L69.72640747146431,71.79299757722424 L62.2169417242108,78.40319038461482 L54.08426081740079,84.23124557927044 L45.40950771591454,89.2187688157503 L36.279258378204545,93.31575328703872 L26.78465771017993,96.48108110582352 L17.020509690030114,98.68293596104441 L7.084330747020447,99.89912290839605 L-2.9246241536970876,100.11729208063714 L-12.906352993582725,99.33506406302378 L-22.76110584635347,97.5600556613776 L-32.39038170405442,94.80980578540205 L-41.69791302202367,91.11160216793331 L-50.590628141951726,86.50221063188363 L-58.97958197133076,81.02750959079931 L-66.7808456128768,74.74203341647265 L-73.91634604585447,67.70842921844734 L-80.3146474585801,59.99683244642164 L-85.91166641277066,51.68416753882 L-90.65131368005072,42.85338059104611 L-94.48605632225305,33.59261169763412 L-97.37739438285246,23.994315226870256 L-99.29624740902467,14.15433680840468 L-100.22324692391267,4.170956248683369 L-100.14893190772963,-5.8560940686548335 L-99.07384531495642,-15.826625493392138 L-97.0085306434231,-25.640994177372292 L-93.97342856963141,-35.20109689865335 L-89.99867466329499,-44.411351689071395 L-85.12380018277366,-53.179653462985485 L-79.39733892196912,-61.41829509283016 L-72.87634401865205,-69.04484472047916 L-65.62581953470664,-75.982970528916 L-57.71807247140549,-82.1632047219775 L-49.23199167903304,-87.52363906577253 L-40.252260851991934,-92.01054502774777 L-30.86851346063244,-95.57891230146299 L-21.17443805282182,-98.192900319459 L-11.266842855895522,-99.82619822501783 L-1.2446890181166146,-100.46228968746522 L8.791897855995662,-100.09461989582526 L18.74262800327464,-98.72666304261917 L28.50804963905424,-96.37188960364541 L37.99054292008173,-93.05363372076036 L47.095295799113906,-88.80486199298979 L55.73125201609111,-83.66784596676875 L63.812021747272496,-77.69374157887896 L71.2567458049862,-70.94207973610291 L77.99090474299076,-63.48017310444059 L83.9470647712743,-55.382445019044404 L89.0655530139579,-46.72968720543564 L93.29505534854258,-37.60825371527344 L96.5931308370268,-28.10919911881194 L98.92663759170844,-18.32736955481548 L100.27206580247615,-8.360455711496488 L100.61577457926306,1.6919828057402009 L99.9541302238245,11.72951197615368 L98.29354452952558,21.651826801038634 L95.65041270654555,31.359753651256696 L92.05095153284961,40.756241508472954 L87.53093932842037,49.74733219263515 L82.13536033162218,58.24309987624787 L75.91795701237078,66.15855049098207 L68.94069477745498,73.41447203107701 L61.273144399688675,79.9382272468867 L52.99178832579866,85.66448079591534 L44.17925777984408,90.53585357206329 L34.92350827187885,94.50349766005495 L25.316941738588003,97.52758615389259 L15.45548407755559,99.57771292778533 L5.437627284303752,100.6331983468527 L-4.63655424320893,100.68329784403063 L-14.666403407908245,99.72731125963688 L-24.5516861381051,97.77459183129315 L-34.193593084390365,94.84445472445466 L-43.49572727838769,90.96598599764705 L-52.36506788112658,86.1777538916222 L-60.712900385764456,80.52742530807899 L-68.45570397269645,74.07129129158307 L-75.51598714140974,66.8737062383897 L-81.82306325853986,59.006446418920916 L-87.31375826033582,50.54799420803598 L-91.93304342416391,41.58275516089324 L-95.6345868710505,32.20021574467312 L-98.38121827210824,22.49405013099682 L-100.14530209793128,12.561184964567738 L-100.90901566303374,2.500831445261933 L-100.6645291680244,-7.586505610619649 L-99.41408592097503,-17.6000318322722 L-97.16998191656734,-27.439670448713034 L-93.954444957138,-37.00706247185973 L-89.79941450363519,-46.2065499123697',
 ];
+
+export default ImageStream;

Remotion-app/src/HelloWorld/SfxStream.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {staticFile, useVideoConfig, Audio} from 'remotion';
 import sfxSequences from './Assets/SfxSequences.json';
 import {TransitionSeries} from '@remotion/transitions';
-export default function SfxStream() {
+const SfxStream = React.memo(() => {
 	const {fps} = useVideoConfig();
 	return (
 		<TransitionSeries>
@@ -24,4 +24,6 @@ export default function SfxStream() {
 			})}
 		</TransitionSeries>
 	);
-}
+});
+
+export default SfxStream;

Remotion-app/src/HelloWorld/TextStream.jsx

@@ -30,7 +30,7 @@ Fonts.getAvailableFonts()
 	.load()
 	.then((font) => font.loadFont());
 
-export const TextStream = () => {
+const TextStream = React.memo(() => {
 	const {fps} = useVideoConfig();
 
 	const memoizedTranscriptData = useMemo(() => {
@@ -64,8 +64,10 @@ export const TextStream = () => {
 			</TransitionSeries>
 		</AbsoluteFill>
 	);
-};
+});
 
 export function Letter({children, style}) {
 	return <div style={style}>{children}</div>;
 }
+
+export default TextStream;

Remotion-app/src/HelloWorld/index.jsx

@@ -1,13 +1,12 @@
 import {AbsoluteFill} from 'remotion';
 import VideoStream from './VideoStream';
-import {TextStream} from './TextStream';
-
 import AudioStream from './AudioStream';
 import ImageStream from './ImageStream';
-import SfxStream from './SfxStream';
 import BackgroundStream from './BackGroundStream';
+import TextStream from './TextStream';
+import React from 'react';
 
-export const HelloWorld = () => {
+const HelloWorld = React.memo(() => {
 	return (
 		<AbsoluteFill style={{position: 'relative', backgroundColor: 'black'}}>
 			<BackgroundStream />
@@ -17,4 +16,6 @@ export const HelloWorld = () => {
 			<AudioStream />
 		</AbsoluteFill>
 	);
-};
+});
+
+export default HelloWorld;

Remotion-app/src/lib/useGsapTimeline.js

@@ -1,32 +1,31 @@
-import gsap from "gsap";
-import { useEffect, useRef } from "react";
-import { useCurrentFrame, useVideoConfig } from "remotion";
+import gsap from 'gsap';
+import {useEffect, useRef} from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
 
 export const useGsapTimeline = (gsapTimelineFactory) => {
+	const animationScopeRef = useRef(null);
+	const timelineRef = useRef();
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
 
-  const animationScopeRef = useRef(null);
-  const timelineRef = useRef();
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+	useEffect(() => {
+		if (animationScopeRef.current) {
+			// check if the component is mounted
+			const ctx = gsap.context(() => {
+				timelineRef.current = gsapTimelineFactory();
+				timelineRef.current.pause();
+			}, animationScopeRef);
+			return () => ctx.revert();
+		}
+	}, [animationScopeRef.current]);
 
-  useEffect(() => {
-    if (animationScopeRef.current) // check if the component is mounted
-    {
-      const ctx = gsap.context(() => {
-        timelineRef.current = gsapTimelineFactory();
-        timelineRef.current.pause();
-      }, animationScopeRef);
-      return () => ctx.revert();
-    }
+	useEffect(() => {
+		if (animationScopeRef.current)
+			if (timelineRef.current) {
+				// check if the component is mounted
+				timelineRef.current.seek(frame / fps);
+			}
+	}, [frame, fps, animationScopeRef.current]);
 
-  }, [animationScopeRef.current]);
-
-  useEffect(() => {
-    if (animationScopeRef.current) // check if the component is mounted
-    if (timelineRef.current) {
-      timelineRef.current.seek((frame) / fps);
-    }
-  }, [frame, fps,animationScopeRef.current]);
-
-  return animationScopeRef;
+	return animationScopeRef;
 };