New text and image styles

Remotion-app/src/HelloWorld/ImageStream.jsx

@@ -7,12 +7,11 @@ import {
 } from 'remotion';
 import React from 'react';
 import {staticFile, useVideoConfig, Img, Easing} from 'remotion';
-import {slide} from '@remotion/transitions/slide';
 import imageSequences from './Assets/ImageSequences.json';
 import {TransitionSeries, linearTiming} from '@remotion/transitions';
 
 export default function ImageStream() {
-	const {fps, durationInFrames} = useVideoConfig();
+	const {fps} = useVideoConfig();
 
 	const frame = useCurrentFrame();
 	return (
@@ -37,7 +36,7 @@ export default function ImageStream() {
 						frame,
 						[
 							fps * entry.start,
-							fps * entry.start + 2 * (durationInFrames / 4),
+							fps * entry.start + durationInFrames / 2,
 							fps * entry.end,
 						],
 						[1, 1.5, 1.3],
@@ -57,6 +56,7 @@ export default function ImageStream() {
 							<Img
 								style={{
 									transform: `scale(${zoom})`,
+									// transition: 'all 5s ease',
 								}}
 								src={staticFile(entry.name)}
 							/>

Remotion-app/src/HelloWorld/TextStream.jsx

@@ -5,23 +5,17 @@ import transcriptData from './Assets/TextSequences.json';
 import {FONT_FAMILY} from './constants';
 import {TransitionSeries} from '@remotion/transitions';
 
-const codeStyle = (index) => {
-	return {
-		color: 'white',
-		position: 'absolute',
-		top: '50%',
-		zIndex: 50,
-		transform: 'translate(-50%, -50%)',
-		left: '50%',
-	};
-};
-
 const subtitle = {
 	fontFamily: FONT_FAMILY,
-	fontSize: 90,
+	fontSize: 150,
 	textAlign: 'center',
-	display: 'absolute',
-	bottom: 140,
+	textShadow:
+		'-5px -5px 0 #00ff, 0   -5px 0 #00ff, 5px -5px 0 #00ff, 5px  0   0 #00ff, 5px  5px 0 #00ff, 0    5px 0 #00ff, -5px  5px 0 #00ff, -5px  0   0 #00ff',
+	position: 'fixed',
+	fontWeight: 'bolder',
+	color: 'white',
+	bottom: 200,
+	height: 'fit-content',
 	width: '100%',
 };
 
@@ -42,11 +36,7 @@ export const TextStream = () => {
 				justifyContent: 'center',
 				alignItems: 'center',
 				position: 'relative',
-				color: 'white',
-				fontSize: 120,
-				fontFamily: FONT_FAMILY,
-				fontWeight: 'bolder',
-				WebkitBackfaceVisibility: 'hidden',
+				// backgroundColor: 'red',
 			}}
 		>
 			<TransitionSeries>
@@ -55,12 +45,10 @@ export const TextStream = () => {
 						<TransitionSeries.Sequence
 							style={subtitle}
 							key={index}
-							from={entry.start * fps}
-							durationInFrames={fps * (entry.end - entry.start) + 1}
+							from={(entry.start + 0.2) * fps}
+							durationInFrames={fps * (entry.end - entry.start)}
 						>
-							<Letter style={subtitle} index={index} color="#0b84f3">
-								{entry.text}
-							</Letter>
+							<Letter style={subtitle}>{entry.text}</Letter>
 						</TransitionSeries.Sequence>
 					);
 				})}
@@ -69,6 +57,6 @@ export const TextStream = () => {
 	);
 };
 
-export function Letter({children, color, index, style}) {
-	return createElement('div', {style: style}, children);
+export function Letter({children, style}) {
+	return <div style={style}>{children}</div>;
 }