performance?

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

@@ -1,15 +1,24 @@
-import { useGsapTimeline } from '../../lib/useGsapTimeline'
-import { AbsoluteFill } from 'remotion';
+import {useGsapTimeline} from '../../lib/useGsapTimeline';
+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]);
 
-
-export default function GsapAnimation({ Timeline, style, className, children, plugins = [] }) {
-  gsap.registerPlugin(...plugins);
-  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>
+	);
 }

Remotion-app/src/HelloWorld/ImageStream.jsx

@@ -49,8 +49,9 @@ export default function ImageStream() {
 }
 
 const Images = ({entry, index}) => {
-	const plugins = [MotionPathPlugin];
-	const gsapTimeline = () => {
+	const plugins = useMemo(() => [MotionPathPlugin], []);
+
+	const gsapTimeline = useMemo(() => {
 		let tlContainer = gsap.timeline();
 		// tlContainer.fromTo(
 		// 	'#gaussianBlur',
@@ -77,7 +78,8 @@ const Images = ({entry, index}) => {
 		});
 
 		return tlContainer;
-	};
+	}, []);
+
 	return (
 		<>
 			<GsapAnimation
@@ -89,17 +91,6 @@ const Images = ({entry, index}) => {
 				Timeline={gsapTimeline}
 			>
 				<Audio src={staticFile('sfx_1.mp3')} />
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					version="1.1"
-					className="filters"
-				>
-					<defs>
-						<filter id="blur">
-							<feGaussianBlur id="gaussianBlur" in="SourceGraphic" />
-						</filter>
-					</defs>
-				</svg>
 				<Img
 					id="imagex"
 					style={{

Remotion-app/src/HelloWorld/TextStream.jsx

@@ -1,4 +1,4 @@
-import React, {createElement} from 'react';
+import React, {useMemo} from 'react';
 import {useVideoConfig, AbsoluteFill, TransitionSeries} from 'remotion';
 import * as Fonts from '@remotion/google-fonts';
 import transcriptData from './Assets/TextSequences.json';
@@ -33,6 +33,10 @@ Fonts.getAvailableFonts()
 export const TextStream = () => {
 	const {fps} = useVideoConfig();
 
+	const memoizedTranscriptData = useMemo(() => {
+		return transcriptData;
+	}, []);
+
 	return (
 		<AbsoluteFill
 			style={{
@@ -44,7 +48,7 @@ export const TextStream = () => {
 			}}
 		>
 			<TransitionSeries>
-				{transcriptData.map((entry, index) => {
+				{memoizedTranscriptData.map((entry, index) => {
 					const delta = entry.end - entry.start < 1 / 30 ? 0.2 : 0;
 					return (
 						<TransitionSeries.Sequence