testing

Remotion-app/src/HelloWorld/AudioStream.jsx

@@ -1,20 +1,22 @@
+import {Series} from 'remotion';
 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 {fps} = useVideoConfig();
 	return (
-		<>
+		<TransitionSeries>
 			{audioSequences.map((entry, index) => {
 				return (
 					<Audio
-						key={index}
+						volume={entry.props.volume}
 						endAt={entry.props.endAt}
 						startFrom={entry.props.startFrom}
 						src={staticFile(entry.name)}
 					/>
 				);
 			})}
-		</>
+		</TransitionSeries>
 	);
 }

Remotion-app/src/HelloWorld/ImageStream.jsx

@@ -10,6 +10,9 @@ export default function ImageStream() {
 		<TransitionSeries
 			style={{
 				color: 'white',
+				position: 'absolute',
+				zIndex: 0,
+				objectFit: 'cover',
 			}}
 		>
 			{imageSequences.map((entry, index) => {
@@ -19,7 +22,7 @@ export default function ImageStream() {
 						from={fps * entry.start}
 						durationInFrames={fps * (entry.end - entry.start)}
 					>
-						<Img src={staticFile(entry.name)} />
+						<Img className="zoomInOut" src={staticFile(entry.name)} />
 					</TransitionSeries.Sequence>
 				);
 			})}

Remotion-app/src/HelloWorld/SfxStream.jsx

@@ -15,6 +15,7 @@ export default function SfxStream() {
 						durationInFrames={fps * (entry.end - entry.start)}
 					>
 						<Audio
+							volume={entry.props.volume}
 							endAt={entry.props.endAt}
 							startFrom={entry.props.startFrom}
 							src={staticFile(entry.name)}

Remotion-app/src/Root.jsx

@@ -1,7 +1,7 @@
 import {Composition} from 'remotion';
 import {HelloWorld} from './HelloWorld';
 import {DURATION} from './HelloWorld/constants';
-
+import 'index.css';
 export const RemotionRoot = () => {
 	return (
 		<>

Remotion-app/src/index.css

@@ -0,0 +1,9 @@
+@keyframes zoomInOut {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+.zoomInOut {
+  animation: zoomInOut 5s ease-in-out infinite;
+}