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 |
});
|