1import {loadFont} from '@remotion/google-fonts/Inter';
2import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
3 
4const {fontFamily} = loadFont();
5 
6const COLOR_BAR = '#D4AF37';
7const COLOR_TEXT = '#ffffff';
8const COLOR_MUTED = '#888888';
9const COLOR_BG = '#0a0a0a';
10const COLOR_AXIS = '#333333';
11 
12// Ideal composition size: 1280x720
13 
14const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
15	<div style={{textAlign: 'center', marginBottom: 40}}>
16		<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
17			{children}
18		</div>
19	</div>
20);
21 
22const YAxis: React.FC<{steps: number[]; height: number}> = ({
23	steps,
24	height,
25}) => (
26	<div
27		style={{
28			display: 'flex',
29			flexDirection: 'column',
30			justifyContent: 'space-between',
31			height,
32			paddingRight: 16,
33		}}
34	>
35		{steps
36			.slice()
37			.reverse()
38			.map((step) => (
39				<div
40					key={step}
41					style={{
42						color: COLOR_MUTED,
43						fontSize: 20,
44						textAlign: 'right',
45					}}
46				>
47					{step.toLocaleString()}
48				</div>
49			))}
50	</div>
51);
52 
53const Bar: React.FC<{
54	height: number;
55	progress: number;
56}> = ({height, progress}) => (
57	<div
58		style={{
59			flex: 1,
60			display: 'flex',
61			flexDirection: 'column',
62			justifyContent: 'flex-end',
63		}}
64	>
65		<div
66			style={{
67				width: '100%',
68				height,
69				backgroundColor: COLOR_BAR,
70				borderRadius: '8px 8px 0 0',
71				opacity: progress,
72			}}
73		/>
74	</div>
75);
76 
77const XAxis: React.FC<{
78	children: React.ReactNode;
79	labels: string[];
80	height: number;
81}> = ({children, labels, height}) => (
82	<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
83		<div
84			style={{
85				display: 'flex',
86				alignItems: 'flex-end',
87				gap: 16,
88				height,
89				borderLeft: `2px solid ${COLOR_AXIS}`,
90				borderBottom: `2px solid ${COLOR_AXIS}`,
91				paddingLeft: 16,
92			}}
93		>
94			{children}
95		</div>
96		<div
97			style={{
98				display: 'flex',
99				gap: 16,
100				paddingLeft: 16,
101				marginTop: 12,
102			}}
103		>
104			{labels.map((label) => (
105				<div
106					key={label}
107					style={{
108						flex: 1,
109						textAlign: 'center',
110						color: COLOR_MUTED,
111						fontSize: 20,
112					}}
113				>
114					{label}
115				</div>
116			))}
117		</div>
118	</div>
119);
120 
121export const MyAnimation = () => {
122	const frame = useCurrentFrame();
123	const {fps, height} = useVideoConfig();
124 
125	const data = [
126		{month: 'Jan', price: 2039},
127		{month: 'Mar', price: 2160},
128		{month: 'May', price: 2327},
129		{month: 'Jul', price: 2426},
130		{month: 'Sep', price: 2634},
131		{month: 'Nov', price: 2672},
132	];
133 
134	const minPrice = 2000;
135	const maxPrice = 2800;
136	const priceRange = maxPrice - minPrice;
137	const chartHeight = height - 280;
138	const yAxisSteps = [2000, 2400, 2800];
139 
140	return (
141		<AbsoluteFill
142			style={{
143				backgroundColor: COLOR_BG,
144				padding: 60,
145				display: 'flex',
146				flexDirection: 'column',
147				fontFamily,
148			}}
149		>
150			<Title>Gold Price 2024</Title>
151 
152			<div style={{display: 'flex', flex: 1}}>
153				<YAxis steps={yAxisSteps} height={chartHeight} />
154				<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
155					{data.map((item, i) => {
156						const progress = spring({
157							frame: frame - i * 5 - 10,
158							fps,
159							config: {damping: 18, stiffness: 80},
160						});
161 
162						const barHeight =
163							((item.price - minPrice) / priceRange) * chartHeight * progress;
164 
165						return (
166							<Bar key={item.month} height={barHeight} progress={progress} />
167						);
168					})}
169				</XAxis>
170			</div>
171		</AbsoluteFill>
172	);
173};
174