File size: 2,225 Bytes
1c1e321 0caf896 8a4825d 84efe74 1c1e321 6a02642 313654e 84efe74 313654e 0c84f6a 84efe74 313654e 8a4825d 84efe74 8a4825d 1c1e321 0caf896 2d9a860 0caf896 1c1e321 1ecc9f0 1c1e321 948d87b 0caf896 948d87b 1ecc9f0 948d87b 6a02642 948d87b 1c1e321 0caf896 1c1e321 6a02642 1c1e321 6a02642 |
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 |
import React, {createElement} from 'react';
import {useVideoConfig, AbsoluteFill, TransitionSeries} from 'remotion';
import * as Fonts from '@remotion/google-fonts';
import transcriptData from './Assets/TextSequences.json';
import Constants from './Assets/Constants.json';
import {TransitionSeries} from '@remotion/transitions';
import {GsapAnimation} from './Components/GsapAnimation';
import gsap from 'gsap';
const defaultText = {
fontFamily: 'Luckiest Guy',
fontSize: 120,
textAlign: 'center',
textShadow:
'-10px -10px 0 #000, 0 -10px 0 #000, 10px -10px 0 #000, 10px 0 0 #000, 10px 10px 0 #000, 0 10px 0 #000, -10px 10px 0 #000, -10px 0 0 #000',
position: 'fixed',
fontWeight: 'bolder',
color: 'yellow',
bottom: '30vh',
height: 'fit-content',
width: '100%',
};
const subtitle = Constants?.text
? {
...defaultText,
...Constants.text,
}
: defaultText;
Fonts.getAvailableFonts()
.filter((font) => {
return font.fontFamily === subtitle.fontFamily;
})[0]
.load()
.then((font) => font.loadFont());
export const TextStream = () => {
const {fps} = useVideoConfig();
return (
<AbsoluteFill
style={{
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
// backgroundColor: 'red',
}}
>
<TransitionSeries>
{transcriptData.map((entry, index) => {
const delta = entry.end - entry.start < 1 / 30 ? 0.2 : 0;
return (
<TransitionSeries.Sequence
style={subtitle}
key={index}
from={(entry.start + delta) * fps}
durationInFrames={fps * (entry.end - entry.start + delta)}
>
<Letter duration={(entry.end - entry.start + delta)} style={subtitle}>{entry.text}</Letter>
</TransitionSeries.Sequence>
);
})}
</TransitionSeries>
</AbsoluteFill>
);
};
export function Letter({children, style,duration}) {
const Textimeline =()=>{
let timeline=gsap.timeline()
timeline.fromTo('#letter',{yPercent:100},{yPercent:0,duration:duration/2, ease:"power2.inOut"})
return timeline
}
return <GsapAnimation Timeline={Textimeline} className='h-fit' style={style}>
<div id="letter">
{children}
</div>
</GsapAnimation>;
}
|