File size: 2,942 Bytes
57155b1 d86c84c 7380380 d86c84c 520b716 1419555 d86c84c 2d9a860 14a8e84 d86c84c 1419555 57155b1 1419555 6395d23 1419555 6395d23 1419555 21d5d82 1419555 57155b1 d86c84c ce7cdca 6395d23 ce7cdca 21d5d82 6395d23 21d5d82 ce7cdca 21d5d82 6395d23 21d5d82 ce7cdca 6395d23 ce7cdca 6395d23 21d5d82 6395d23 ce7cdca 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 138 |
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={index}
// from={fps * entry.start}
durationInFrames={fps * (entry.end - entry.start)}
>
<Images entry={entry} />;
</TransitionSeries.Sequence>
<TransitionSeries.Transition
presentation={slide('from-left')}
timing={linearTiming({
durationInFrames: 1,
// easing: Easing.bezier(0.02, 1.85, 0.83, 0.43),
})}
>
jelllo
</TransitionSeries.Transition>
</>
);
})}
</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: 0.5 * fps,
});
const zoom = interpolate(spr, [0, 0.5, 1], [1, 1.5, 1.3], {
// easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
const blur = interpolate(initialSpring, [0, 1], [30, 0], {
easing: Easing.bezier(0.23, 1, 0.32, 1),
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
return (
<>
<div
style={{
fontSize: 150,
position: 'absolute',
zIndex: 1,
}}
>
{blur}
</div>
<Img
style={{
transform: `scale(${zoom}) translateX(-${blur * 5}px)`,
filter: `blur(${blur}px)`,
// opacity: 0.1
// transform: `translateX(-${blur * 5}px)`,
// transition: 'all 5s ease',
}}
src={staticFile(entry.name)}
/>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => {
return (
<Img
key={i}
style={{
transform: `scale(${zoom}) translateX(-${blur * i * 5}px)`,
filter: `blur(${(blur / i) * 2}px)`,
opacity: 0.1,
// transform: `translateX(-${blur * 5}px)`,
// transition: 'all 5s ease',
}}
src={staticFile(entry.name)}
/>
);
})}
</>
);
};
|