Example Root

1// Minimal Remotion scaffold for the map explainer. In a Remotion project (`bunx create-video@latest`,
2// blank template), this is `src/Root.tsx`; `src/index.ts` is just `registerRoot(RemotionRoot)`.
3//
4// The Composition sets DURATION (the beat) and dimensions. The component reads durationInFrames / width /
5// height from useVideoConfig(). The beat must be long enough for the last country's full sequence after
6// the river reaches it. See references/map-explainer-architecture.md §2.
7// Render with: bunx remotion render src/index.ts MapExplainer out.mp4 --gl=angle --concurrency=1 --timeout=120000
8
9import React from 'react';
10import {Composition} from 'remotion';
11import {RiverReveal} from './RiverReveal'; // → src/components/RiverReveal.tsx in your project
12
13export const RemotionRoot: React.FC = () => (
14	<Composition
15		id="MapExplainer"
16		component={RiverReveal}
17		durationInFrames={12 * 30} // 12 s @ 30 fps — raise if a later country needs more room after the river arrives
18		fps={30}
19		width={1920}
20		height={1080}
21	/>
22);