1import {
2	AbsoluteFill,
3	interpolate,
4	useCurrentFrame,
5	useVideoConfig,
6} from 'remotion';
7 
8const COLOR_BG = '#ffffff';
9const COLOR_TEXT = '#000000';
10const FULL_TEXT = 'From prompt to motion graphics. This is Remotion.';
11const PAUSE_AFTER = 'From prompt to motion graphics.';
12const FONT_SIZE = 72;
13const FONT_WEIGHT = 700;
14const CHAR_FRAMES = 2;
15const CURSOR_BLINK_FRAMES = 16;
16const PAUSE_SECONDS = 1;
17 
18// Ideal composition size: 1280x720
19 
20const getTypedText = ({
21	frame,
22	fullText,
23	pauseAfter,
24	charFrames,
25	pauseFrames,
26}: {
27	frame: number;
28	fullText: string;
29	pauseAfter: string;
30	charFrames: number;
31	pauseFrames: number;
32}): string => {
33	const pauseIndex = fullText.indexOf(pauseAfter);
34	const preLen =
35		pauseIndex >= 0 ? pauseIndex + pauseAfter.length : fullText.length;
36 
37	let typedChars = 0;
38	if (frame < preLen * charFrames) {
39		typedChars = Math.floor(frame / charFrames);
40	} else if (frame < preLen * charFrames + pauseFrames) {
41		typedChars = preLen;
42	} else {
43		const postPhase = frame - preLen * charFrames - pauseFrames;
44		typedChars = Math.min(
45			fullText.length,
46			preLen + Math.floor(postPhase / charFrames),
47		);
48	}
49	return fullText.slice(0, typedChars);
50};
51 
52const Cursor: React.FC<{
53	frame: number;
54	blinkFrames: number;
55	symbol?: string;
56}> = ({frame, blinkFrames, symbol = '\u258C'}) => {
57	const opacity = interpolate(
58		frame % blinkFrames,
59		[0, blinkFrames / 2, blinkFrames],
60		[1, 0, 1],
61		{extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
62	);
63 
64	return <span style={{opacity}}>{symbol}</span>;
65};
66 
67export const MyAnimation = () => {
68	const frame = useCurrentFrame();
69	const {fps} = useVideoConfig();
70 
71	const pauseFrames = Math.round(fps * PAUSE_SECONDS);
72 
73	const typedText = getTypedText({
74		frame,
75		fullText: FULL_TEXT,
76		pauseAfter: PAUSE_AFTER,
77		charFrames: CHAR_FRAMES,
78		pauseFrames,
79	});
80 
81	return (
82		<AbsoluteFill
83			style={{
84				backgroundColor: COLOR_BG,
85			}}
86		>
87			<div
88				style={{
89					color: COLOR_TEXT,
90					fontSize: FONT_SIZE,
91					fontWeight: FONT_WEIGHT,
92					fontFamily: 'sans-serif',
93				}}
94			>
95				<span>{typedText}</span>
96				<Cursor frame={frame} blinkFrames={CURSOR_BLINK_FRAMES} />
97			</div>
98		</AbsoluteFill>
99	);
100};
101