File size: 1,940 Bytes
f6aada0 47aab45 d86c84c 520b716 4f51c77 7191cf4 e9c34f9 d86c84c 1419555 57155b1 1419555 9a5a73f 1419555 57155b1 d86c84c 7191cf4 ce7cdca c853239 47aab45 fb03e05 47aab45 e2c597b ce7cdca 47aab45 9a5a73f 75f8f69 ebca033 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 |
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';
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;
|