File size: 3,085 Bytes
57155b1 d86c84c 7380380 d86c84c 520b716 1419555 d86c84c 2d9a860 14a8e84 d86c84c 1419555 57155b1 1419555 05a52d4 1419555 05a52d4 1419555 05a52d4 1419555 05a52d4 1419555 57155b1 d86c84c ce7cdca 6395d23 ce7cdca 21d5d82 05a52d4 ce7cdca c969f77 6395d23 05a52d4 21d5d82 05a52d4 ab402b3 05a52d4 ce7cdca 05a52d4 ce7cdca 8da55e6 05a52d4 8da55e6 6395d23 ce7cdca |
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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
import {
AbsoluteFill,
Series,
interpolate,
spring,
useCurrentFrame,
} from 'remotion';
import React from 'react';
import {staticFile, useVideoConfig, Img, Easing} from 'remotion';
import imageSequences from './Assets/ImageSequences.json';
import {TransitionSeries, linearTiming} from '@remotion/transitions';
import {slide} from '@remotion/transitions/slide';
export default function ImageStream() {
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} entry={entry} />;
</TransitionSeries.Sequence>
<TransitionSeries.Transition
presentation={slide('from-left')}
timing={linearTiming({
durationInFrames: 2,
easing: Easing.bezier(0.02, 1.85, 0.83, 0.43),
})}
/>
</>
);
})}
</TransitionSeries>
</AbsoluteFill>
);
}
const Images = ({entry}) => {
const {fps} = useVideoConfig();
const frame = useCurrentFrame();
const durationInFrames = (entry.end - entry.start) * fps;
const spr = spring({
fps,
frame,
config: {
damping: 100,
},
delay: 0,
from: 0,
to: 1,
durationInFrames: durationInFrames,
});
const initialSpring = spring({
fps,
frame,
config: {
damping: 100,
},
delay: 0,
from: 0,
to: 1,
durationInFrames: durationInFrames,
});
const zoom = interpolate(spr, [0, 0.5, 1], [1, 1.3, 1.2], {
easing: Easing.bezier(0.23, 1, 0.32, 1),
// extrapolateLeft: 'clamp',
// extrapolateRight: 'clamp',
});
const blur = interpolate(
initialSpring,
[0.0, 0.09, 0.99, 0.995, 1],
[20, 0, 0, 0, 5],
{
easing: Easing.bezier(0.23, 1, 0.32, 1),
extrapolateLeft: 'identity',
extrapolateRight: 'identity',
}
);
return (
<>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" className="filters">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation={`${blur * 5},0`} />
</filter>
</defs>
</svg>
<Img
style={{
transform: ` scale(${zoom}) ${
initialSpring > 0.99
? `translateX(${blur * 5}px)`
: `translateX(-${blur * 5}px)`
}`,
filter: `url(#blur)`,
objectPosition: 'center',
objectFit: 'cover',
position: 'absolute',
top: '50%', // Center vertically
left: '50%', // Center horizontally
transform: 'translate(-50%, -50%)',
// zIndex: 150,
// height: '100vh',
width: 1080,
height: 1920,
// transformOrigin: 'center center', // Move rotation origin to the
// opacity: 0.1
// transform: `translateX(-${blur * 5}px)`,
// transition: 'all 5s ease',
}}
src={staticFile(entry.name)}
/>
</>
);
};
|