File size: 1,678 Bytes
1c1e321 0caf896 8a4825d 1c1e321 8a4825d 2d9a860 1c1e321 2d9a860 c969f77 2d9a860 c969f77 2d9a860 1c1e321 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 |
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 {FONT_FAMILY} from './constants';
import {TransitionSeries} from '@remotion/transitions';
const subtitle = {
fontFamily: FONT_FAMILY,
fontSize: 150,
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: 200,
height: 'fit-content',
width: '100%',
};
Fonts.getAvailableFonts()
.filter((font) => {
return font.fontFamily === FONT_FAMILY;
})[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>;
}
|