Country Label

1import React from 'react';
2import {Easing, interpolate} from 'remotion';
3
4// Reusable country label. Supply typography and final values from the consuming project; the CSS custom
5// properties below provide neutral fallbacks. Positioned by its centre (x,y in screen px).
6export const CountryLabel: React.FC<{
7	name: string;
8	color: string;
9	reveal: number;
10	x: number;
11	y: number;
12}> = ({name, color, reveal, x, y}) => {
13	const e = interpolate(reveal, [0, 1], [0, 1], {
14		extrapolateLeft: 'clamp',
15		extrapolateRight: 'clamp',
16		easing: Easing.bezier(0.3333333333333333, 1, 0.6666666666666666, 1),
17	});
18	return (
19		<div
20			style={{
21				position: 'absolute',
22				left: x,
23				top: y,
24				transform: 'translate(-50%, -50%)',
25				pointerEvents: 'none',
26				display: 'flex',
27				flexDirection: 'column',
28				alignItems: 'center',
29				opacity: e,
30			}}
31		>
32			<div
33				style={{
34					transform: `translateY(${(1 - e) * 16}px)`,
35					display: 'flex',
36					flexDirection: 'column',
37					alignItems: 'center',
38				}}
39			>
40				{/* accent rule — draws out from the centre in the country's colour */}
41				<div
42					style={{
43						width: 64,
44						height: 3,
45						borderRadius: 2,
46						background: color,
47						transform: `scaleX(${e})`,
48						boxShadow: `0 0 10px ${color}`,
49					}}
50				/>
51				<div
52					style={{
53						fontFamily: 'var(--map-label-font, system-ui, sans-serif)',
54						fontWeight: 'var(--map-label-weight, 600)',
55						fontSize: 'var(--map-label-size, 34px)',
56						letterSpacing: 'var(--map-label-tracking, 0.16em)',
57						textTransform: 'uppercase',
58						color: 'var(--map-label-color, #ffffff)',
59						textShadow: 'var(--map-label-shadow, 0 2px 18px rgba(0,0,0,0.9))',
60						marginTop: 13,
61						paddingLeft: 'var(--map-label-tracking, 0.16em)',
62						whiteSpace: 'nowrap',
63					}}
64				>
65					{name}
66				</div>
67			</div>
68		</div>
69	);
70};