1import {loadFont} from '@remotion/google-fonts/Inter';
2import React from 'react';
3import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
4 
5/*
6 * Highlight a word in a sentence with a spring-animated wipe effect.
7 */
8 
9// Ideal composition size: 1280x720
10 
11const COLOR_BG = '#ffffff';
12const COLOR_TEXT = '#000000';
13const COLOR_HIGHLIGHT = '#A7C7E7';
14const FULL_TEXT = 'This is Remotion.';
15const HIGHLIGHT_WORD = 'Remotion';
16const FONT_SIZE = 72;
17const FONT_WEIGHT = 700;
18const HIGHLIGHT_START_FRAME = 30;
19const HIGHLIGHT_WIPE_DURATION = 18;
20 
21const {fontFamily} = loadFont();
22 
23const Highlight: React.FC<{
24	word: string;
25	color: string;
26	delay: number;
27	durationInFrames: number;
28}> = ({word, color, delay, durationInFrames}) => {
29	const frame = useCurrentFrame();
30	const {fps} = useVideoConfig();
31 
32	const highlightProgress = spring({
33		fps,
34		frame,
35		config: {damping: 200},
36		delay,
37		durationInFrames,
38	});
39	const scaleX = Math.max(0, Math.min(1, highlightProgress));
40 
41	return (
42		<span style={{position: 'relative', display: 'inline-block'}}>
43			<span
44				style={{
45					position: 'absolute',
46					left: 0,
47					right: 0,
48					top: '50%',
49					height: '1.05em',
50					transform: `translateY(-50%) scaleX(${scaleX})`,
51					transformOrigin: 'left center',
52					backgroundColor: color,
53					borderRadius: '0.18em',
54					zIndex: 0,
55				}}
56			/>
57			<span style={{position: 'relative', zIndex: 1}}>{word}</span>
58		</span>
59	);
60};
61 
62export const MyAnimation = () => {
63	const highlightIndex = FULL_TEXT.indexOf(HIGHLIGHT_WORD);
64	const hasHighlight = highlightIndex >= 0;
65	const preText = hasHighlight ? FULL_TEXT.slice(0, highlightIndex) : FULL_TEXT;
66	const postText = hasHighlight
67		? FULL_TEXT.slice(highlightIndex + HIGHLIGHT_WORD.length)
68		: '';
69 
70	return (
71		<AbsoluteFill
72			style={{
73				backgroundColor: COLOR_BG,
74				alignItems: 'center',
75				justifyContent: 'center',
76				fontFamily,
77			}}
78		>
79			<div
80				style={{
81					color: COLOR_TEXT,
82					fontSize: FONT_SIZE,
83					fontWeight: FONT_WEIGHT,
84				}}
85			>
86				{hasHighlight ? (
87					<>
88						<span>{preText}</span>
89						<Highlight
90							word={HIGHLIGHT_WORD}
91							color={COLOR_HIGHLIGHT}
92							delay={HIGHLIGHT_START_FRAME}
93							durationInFrames={HIGHLIGHT_WIPE_DURATION}
94						/>
95						<span>{postText}</span>
96					</>
97				) : (
98					<span>{FULL_TEXT}</span>
99				)}
100			</div>
101		</AbsoluteFill>
102	);
103};
104