Text using sequence
Browse files
Remotion-app/src/HelloWorld/TextStream.jsx
CHANGED
@@ -1,9 +1,9 @@
|
|
1 |
import React, {useMemo} from 'react';
|
2 |
-
import {useVideoConfig, AbsoluteFill,
|
3 |
import * as Fonts from '@remotion/google-fonts';
|
4 |
import transcriptData from './Assets/TextSequences.json';
|
5 |
import Constants from './Assets/Constants.json';
|
6 |
-
|
7 |
const defaultText = {
|
8 |
fontFamily: 'Luckiest Guy',
|
9 |
fontSize: 120,
|
@@ -45,20 +45,18 @@ const TextStream = React.memo(() => {
|
|
45 |
alignItems: 'center',
|
46 |
}}
|
47 |
>
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
|
56 |
-
>
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
})}
|
61 |
-
</TransitionSeries>
|
62 |
</AbsoluteFill>
|
63 |
);
|
64 |
});
|
|
|
1 |
import React, {useMemo} from 'react';
|
2 |
+
import {useVideoConfig, AbsoluteFill, Sequence} from 'remotion';
|
3 |
import * as Fonts from '@remotion/google-fonts';
|
4 |
import transcriptData from './Assets/TextSequences.json';
|
5 |
import Constants from './Assets/Constants.json';
|
6 |
+
|
7 |
const defaultText = {
|
8 |
fontFamily: 'Luckiest Guy',
|
9 |
fontSize: 120,
|
|
|
45 |
alignItems: 'center',
|
46 |
}}
|
47 |
>
|
48 |
+
{memoizedTranscriptData.map((entry, index) => {
|
49 |
+
return (
|
50 |
+
<Sequence
|
51 |
+
style={subtitle}
|
52 |
+
key={index}
|
53 |
+
from={entry.start * fps}
|
54 |
+
durationInFrames={fps * (entry.end - entry.start)}
|
55 |
+
>
|
56 |
+
<Letter style={subtitle}>{entry.text}</Letter>
|
57 |
+
</Sequence>
|
58 |
+
);
|
59 |
+
})}
|
|
|
|
|
60 |
</AbsoluteFill>
|
61 |
);
|
62 |
});
|