File size: 1,716 Bytes
1c1e321 0caf896 8a4825d 1c1e321 8a4825d 1c1e321 8a4825d f88b184 1c1e321 00ce43d 1c1e321 8a4825d 1c1e321 0caf896 1c1e321 948d87b 0caf896 948d87b 0caf896 948d87b 0caf896 948d87b 1c1e321 0caf896 1c1e321 0caf896 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 |
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 codeStyle = (index) => {
return {
color: 'white',
position: 'absolute',
top: '50%',
zIndex: 50,
transform: 'translate(-50%, -50%)',
left: '50%',
};
};
const subtitle = {
fontFamily: FONT_FAMILY,
fontSize: 90,
textAlign: 'center',
display: 'absolute',
bottom: 140,
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',
color: 'white',
fontSize: 120,
fontFamily: FONT_FAMILY,
fontWeight: 'bolder',
WebkitBackfaceVisibility: 'hidden',
}}
>
<TransitionSeries>
{transcriptData.map((entry, index) => {
return (
<TransitionSeries.Sequence
style={subtitle}
key={index}
from={entry.start * fps}
durationInFrames={fps * (entry.end - entry.start) + 1}
>
<Letter style={subtitle} index={index} color="#0b84f3">
{entry.text}
</Letter>
</TransitionSeries.Sequence>
);
})}
</TransitionSeries>
</AbsoluteFill>
);
};
export function Letter({children, color, index, style}) {
return createElement('div', {style: style}, children);
}
|