Tokens

1// Example tokens only. Replace every visual value with production-local tokens.
2export const COLORS = {
3	bg: '#101315',
4	// Electric water — a near-white icy core with a blue glow and a white-hot draw-head (the "electricity"
5	// travels along the river as it draws on). No dark casing.
6	river: '#E8F7FF', // bright icy core
7	riverGlow: 'rgba(73,198,255,0.5)', // electric-blue glow
8	riverHead: '#FFFFFF', // white-hot leading head
9	riverHeadGlow: 'rgba(120,225,255,0.95)',
10	border: '#f5f2ed', // neutral cream country borders/labels over the colored fills
11	cream: '#f5f0eb',
12} as const;
13
14// Example progressive fill tokens. Rename these keys and replace values for each production.
15export const COUNTRY = {
16	china: '#D4A853',
17	india: '#5B8A8A',
18	bangladesh: '#C07B57',
19} as const;
20// Darker shade of each country colour — the settled border line (the bright COUNTRY colour is the
21// glowing draw-head that leads the animation).
22export const COUNTRY_DARK = {
23	china: '#9A7530',
24	india: '#3C5C5C',
25	bangladesh: '#855239',
26} as const;
27export const FILL_OPACITY = 0.5;
28
29export const VIDEO = {width: 1920, height: 1080, fps: 30} as const;
30
31// Beat durations (seconds → frames at VIDEO.fps)
32export const DUR = {
33	mapExplainer: 12 * VIDEO.fps,
34} as const;