File size: 1,321 Bytes
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 |
import React, {createElement} from 'react';
import {useVideoConfig} from 'remotion';
import {loadFont as loadMain} from '@remotion/google-fonts/Bungee';
import transcriptData from './Transcription.json';
const {fontFamily: fontFamily2} = loadMain();
import {TransitionSeries} from '@remotion/transitions';
const codeStyle = (index) => {
return {
color: 'white',
position: 'absolute',
backgroundColor: 'red',
top: '50%',
width: '100%',
transform: 'translate(-50%, -50%)',
left: '50%',
};
};
const subtitle = {
fontFamily: fontFamily2,
fontSize: 120,
textAlign: 'center',
display: 'relative',
bottom: 140,
width: '100%',
};
export const Subtitle = () => {
const {fps} = useVideoConfig();
return (
<div style={subtitle}>
<TransitionSeries>
{transcriptData.map((entry, index) => {
return (
<TransitionSeries.Sequence
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
);
}
|