Added Images

Remotion-app/src/HelloWorld/ImageStream.jsx

@@ -0,0 +1,29 @@
+import {Series} from 'remotion';
+import React from 'react';
+import {staticFile, useVideoConfig, Img} from 'remotion';
+import imageSequences from './Assets/ImageSequences.json';
+import {TransitionSeries} from '@remotion/transitions';
+export default function ImageStream() {
+	const {fps} = useVideoConfig();
+	return (
+		<TransitionSeries
+			style={{
+				color: 'white',
+				position: 'absolute',
+				zIndex: 4,
+			}}
+		>
+			{imageSequences.map((entry, index) => {
+				return (
+					<TransitionSeries.Sequence
+						key={index}
+						from={fps * entry.start}
+						durationInFrames={fps * (entry.end - entry.start)}
+					>
+						<Img src={staticFile(entry.name)} />
+					</TransitionSeries.Sequence>
+				);
+			})}
+		</TransitionSeries>
+	);
+}

Remotion-app/src/HelloWorld/index.jsx

@@ -1,11 +1,14 @@
 import {AbsoluteFill} from 'remotion';
 import VideoStream from './VideoStream';
 import {TextStream} from './TextStream';
+
 import AudioStream from './AudioStream';
+import ImageStream from './ImageStream';
 
 export const HelloWorld = () => {
 	return (
 		<AbsoluteFill style={{position: 'relative', backgroundColor: 'black'}}>
+			<ImageStream />
 			<TextStream />
 			<VideoStream />
 			<AudioStream />