File size: 1,437 Bytes
1c1e321 8a4825d 1c1e321 8a4825d 1c1e321 8a4825d 1c1e321 8a4825d 1c1e321 123aef4 1c1e321 948d87b 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 |
import React, {createElement} from 'react';
import {useVideoConfig} 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: 120,
textAlign: 'center',
display: 'relative',
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 (
<div style={subtitle}>
<TransitionSeries>
{transcriptData.map((entry, index) => {
return (
<TransitionSeries.Sequence
key={index}
from={entry.start * fps}
durationInFrames={fps * (entry.end - entry.start)}
>
<Letter index={index} color="#0b84f3">
{entry.text}
</Letter>
</TransitionSeries.Sequence>
);
})}
</TransitionSeries>
</div>
);
};
export function Letter({children, color, index}) {
const x = codeStyle(index);
return createElement(
'div',
{className: 'greeting', style: {...x, color: 'white'}},
children
);
}
|