File size: 1,999 Bytes
f6aada0
 
 
47aab45
 
 
 
 
 
 
 
 
d86c84c
520b716
d007318
4f51c77
7191cf4
e9c34f9
d86c84c
1419555
 
 
 
 
 
 
 
 
 
 
 
 
 
57155b1
 
1419555
9a5a73f
 
 
 
 
 
1419555
57155b1
 
 
 
d86c84c
7191cf4
ce7cdca
c853239
47aab45
 
fb03e05
47aab45
 
 
 
 
 
e2c597b
ce7cdca
47aab45
9a5a73f
 
 
 
75f8f69
d007318
9a5a73f
 
ce7cdca
47aab45
9a5a73f
 
 
7deade8
9a5a73f
 
 
47aab45
9a5a73f
 
 
 
 
47aab45
ce7cdca
c853239
e569b05
7191cf4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import {AbsoluteFill} from 'remotion';

import React, {useMemo} from 'react';
import {
	staticFile,
	useVideoConfig,
	Img,
	Easing,
	Audio,
	useCurrentFrame,
	interpolate,
} from 'remotion';
import imageSequences from './Assets/ImageSequences.json';
import {TransitionSeries, linearTiming} from '@remotion/transitions';
import {slide} from '@remotion/transitions/slide';

const ImageStream = React.memo(() => {
	const {fps} = useVideoConfig();
	return (
		<AbsoluteFill
			style={{
				top: '50%',
				left: '50%',
				transform: 'translate(-50%, -50%)',
				color: 'white',
				position: 'absolute',
				width: '100%',
				height: '100%',
				zIndex: 0,
				objectFit: 'cover',
			}}
		>
			<TransitionSeries>
				{imageSequences.map((entry, index) => {
					return (
						<>
							<TransitionSeries.Sequence
								key={entry.start}
								durationInFrames={fps * (entry.end - entry.start)}
							>
								<Images key={index} index={index} entry={entry} />;
							</TransitionSeries.Sequence>
						</>
					);
				})}
			</TransitionSeries>
		</AbsoluteFill>
	);
});

const Images = React.memo(({entry, index}) => {
	const frame = useCurrentFrame();
	const {fps} = useVideoConfig();

	const duration = fps * 2.5;
	const ImgScale = interpolate(frame, [1, duration], [1, 1.2], {
		easing: Easing.bezier(0.65, 0, 0.35, 1),
		extrapolateRight: 'clamp',
		extrapolateLeft: 'clamp',
	});

	return (
		<AbsoluteFill
			style={{
				BackgroundColor: 'black',
			}}
			className="bg-black"
		>
			{/* <Audio src={staticFile('sfx_1.mp3')} volume={0.5} /> */}
			<Img
				id="imagex"
				style={{
					scale: 2,
					filter: `url(#blur)`,
					objectPosition: 'center',
					objectFit: 'cover',

					position: 'absolute',
					top: '50%', // Center vertically
					left: '50%', // Center horizontally
					transform: `translate(-50%, -50%) scale(${ImgScale})`,
					width: 1080,
					height: 1920,
				}}
				src={staticFile(entry.name)}
			/>
		</AbsoluteFill>
	);
});

export default ImageStream;