File size: 2,150 Bytes
1c1e321 0caf896 8a4825d 84efe74 1c1e321 84efe74 8a4825d 84efe74 8a4825d 1c1e321 0caf896 2d9a860 0caf896 1c1e321 1ecc9f0 1c1e321 948d87b 0caf896 948d87b 1ecc9f0 948d87b 2d9a860 948d87b 1c1e321 0caf896 1c1e321 2d9a860 1c1e321 |
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 |
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';
const subtitle = Constants?.text
? {
...Constants.text,
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%',
}
: {
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%',
};
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 style={subtitle}>{entry.text}</Letter>
</TransitionSeries.Sequence>
);
})}
</TransitionSeries>
</AbsoluteFill>
);
};
export function Letter({children, style}) {
return <div style={style}>{children}</div>;
}
|