@openvidstudio/mcp-server 0.1.0 → 1.4.0

package/templates/default/.claude/skills/remotion-interactivity/SKILL.md

@@ -0,0 +1,247 @@
+---
+name: remotion-interactivity
+description: Structure Remotion markup for interactivity
+version: 4.0.521
+---
+
+By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:
+
+- Allowing items to be selected by clicking on them
+- Allowing drag+drop, resizing and rotation
+- Editing the CSS styles
+- Making keyframes and easing values editable
+
+If the markup is too complex for the Studio to make it interactive, then the values become grayed out.
+
+## Make an HTML element interactive using `Interactive`
+
+Every HTML and SVG element (except `<Img>`, it already is interactive) such as `<div>` can be turned interactive using `Interactive`:
+
+```tsx title="Interactive elements"
+<Interactive.Div
+  name="Greeting card"
+  style={{fontSize: 80, padding: 24}}
+>
+  Hello
+</Interactive.Div>
+```
+
+This allows styles and keyframes to be set in the Studio. Be sensible, if a component has many elements, the timeline might get messy.
+
+## Prefer inline text
+
+If text is fixed and only used once, write it directly inside the interactive element instead of extracting it into a constant.
+
+```tsx title="Inline text"
+// 👍 Fixed copy stays editable
+<Interactive.Div name="Title">
+  Remotion Best Practices
+</Interactive.Div>
+```
+
+Use a prop or variable only when the text is dynamic or reused.
+
+## Give interactive elements a descriptive name
+
+Add a `name` prop to elements to make them easily identifyable.
+Avoid computed names, hardcode them.
+
+```tsx title="Interactive names"
+<>
+  <Interactive.Div name="Hero title" style={{fontSize: 80}}>
+    Launch day
+  </Interactive.Div>
+  <Img name="Avatar" src="https://remotion.media/image.jpeg" />
+  <Video name="Background" src="https://remotion.media/video.mp4" />
+  <Sequence name="Title">
+    Launch day
+  </Sequence>
+</>
+```
+
+## Keep all CSS styles inline
+
+The best way is to just pass a plain object to `style` - no referring to constants, no object spreading, no math.
+
+```tsx title="Interactive example"
+<Interactive.Div
+  style={{
+    fontSize: 80,
+    color: 'red',
+  }}
+>
+  Hello World!
+</Interactive.Div>
+```
+
+```tsx title="❌ Bad for interactivity"
+const baseStyle = useMemo(() => {
+  return {
+    fontSize: 12 // ❌ Non-inline styles are not supported
+  }
+}, []);
+
+<Interactive.Div
+  style={{
+    ...baseStyle, // ❌ Spreading is not supported
+    color: RED, // ❌ Referring to constants is not supported
+    scale: frame * 10 // ❌ Math is not supported
+  }}
+>
+  Hello World!
+</Interactive.Div>
+```
+
+## Animate using `interpolate()`
+
+Write animations as inline `interpolate()` calls on the property that changes.  
+The output range, easing, extrapolation and `output` property should use hardcoded values.
+
+The input range may additionally use `durationInFrames`, `fps`, `width` and `height` destructured directly from `useVideoConfig()`. Bare identifiers such as `durationInFrames`, multiplication with a number such as `2 * fps` or `fps * 2`, and subtraction of a number such as `durationInFrames - 1` are supported.
+
+```tsx title="Inline values"
+const {fps, durationInFrames} = useVideoConfig();
+
+// 👍 Inline values can be standardized and keyframed
+<Interactive.Div
+  name="Product card"
+  style={{
+    color: 'white',
+    fontSize: 80,
+    scale: interpolate(frame, [0, fps], [0, 1], {
+      easing: Easing.spring({damping: 200}),
+      output: 'perceptual-scale',
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp'
+    }),
+    rotate: interpolate(frame, [0, 1 * fps], ['0deg', '20deg'], {
+      easing: Easing.spring({damping: 200}),
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp'
+    }),
+    translate: interpolate(
+      frame,
+      [durationInFrames - 30, durationInFrames],
+      ['0px 0px', '0px 120px'],
+      {
+        easing: Easing.spring({damping: 200}),
+        output: 'perceptual-scale',
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp'
+      }
+    ),
+  }}
+/>
+```
+
+```tsx title="❌ Bad interactivity"
+const translateY = interpolate(frame, [0, 30], [0, 120]); // ❌ Math should be directly in the markup
+
+<Interactive.Div
+  name="Product card"
+  style={{
+    translate: translateY, // ❌ Only inline interpolate() calls are supported,
+    rotate: interpolate(frame, [start, start + 10], [0, Math.PI]), // ❌ Cannot use math with arbitrary variables, cannot use constants
+    scale: interpolate(anyVariable, [0, 30], [0, 1]) // ❌ Can only interpret the `frame` variable.
+  }}
+/>
+```
+
+## Use `scale`, `translate`, `rotate` CSS properties
+
+Avoid the `transform` CSS property.  
+If possible, use `scale`, `rotate` and `translate` instead because only they are interactively editable.
+
+## Keep composition metadata inline
+
+When scaffolding a composition, keep `width`, `height`, `fps`, `durationInFrames` and `defaultProps` inline and make no type assertions.
+
+The Props editor can save visual edits back to your code when `defaultProps` is an inline object literal on `<Composition>` or `<Still>`.
+
+```tsx
+// 👍 Static values are in <Composition>, dynamic values are in calculateMetadata()
+const calculateMetadata = useMemo(async () => {
+  const dimensions = await getDimensions(); // just an example
+  return {width: dimensions.width, height: dimensions.height};
+});
+
+<Composition
+  id="my-video"
+  component={MyComponent}
+  durationInFrames={150}
+  fps={30}
+  calculateMetadata={calculateMetadata}
+  defaultProps={{title: 'Hello', color: '#0b84ff'}}
+/>
+```
+
+```tsx title="Negative examples"
+const defaultProps = {title: 'Hello', color: '#0b84ff'}; // ❌ Don't extract defaultProps, must be inline
+const calculateMetadata = useMemo(() => {
+  // ❌ Unnecessary because no calculation is being done,
+  return {durationInFrames: 150, fps: 30, width: 1920, height: 1080};
+});
+
+<Composition
+  id="my-video"
+  component={MyComponent}
+  calculateMetadata={calculateMetadata}
+  defaultProps={{
+    title: 'Hello',
+  } as Props} // ❌ Don't have type assertions, instead type MyComponent correctly
+/>
+```
+
+Use only `calculateMetadata()` for the part of the metadata that is dynamic.
+
+## Effects should be inline too
+
+The effects array should not be computed.  
+The same rules for setting keyframes as `interpolate()` apply too here: All values should also be hardcoded: Input range, output range, easing, extrapolation, `output` property.
+
+```tsx title="Effects"
+// 👍 Parameters are inline and the array shape is stable
+<CanvasImage
+  src={src}
+  width={1280}
+  height={720}
+  effects={[
+    radialProgressiveBlur({
+      center: [0.5, 0.5],
+      width: 1.2,
+      height: 0.8,
+      start: 0.2,
+      disabled: true,
+      rotation: interpolate(frame, [0, 120], [0, 180]),
+    }),
+  ]}
+/>
+
+const center = [0.5, 0.5] as const;
+const rotation = frame * 1.5;
+
+<CanvasImage
+  src={src}
+  width={1280}
+  height={720}
+  // ❌ Conditional effect is not animateable
+  effects={enabled ? [
+    radialProgressiveBlur({
+      // ❌ Not inline
+      center,
+      rotation,
+    }),
+  ] : []}
+/>
+```
+
+Render separate elements if one version should have effects and another should not.
+
+## Making your own component interactive
+
+To make a custom userland component interactive, use:
+[Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)
+
+## Video editing
+
+If a Remotion component mainly consists of video and audio clips, see Video editing for best practices on how to structure Remotion markup so the clips are interactively editable in the timeline.

package/templates/default/.claude/skills/remotion-interactivity/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-interactivity'
+  short_description: 'Make compositions editable in Remotion Studio'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-interactivity: Make the markup in MyComp.tsx interactive'

package/templates/default/.claude/skills/remotion-maps/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: remotion-maps
+description: Remotion Map animation knowledge
+version: 4.0.521
+---
+
+# Remotion Maps
+
+Choose exactly one technique from the intended shot, then load only that technique's `TECHNIQUE.md`.
+Every technique directory is self-contained and may be removed without breaking the others.
+
+## [Static map](techniques/static-map/TECHNIQUE.md)
+
+- Requires you grab a satellite image and mount it in a `<Img>` tag, and animate on top
+
+## [Mapbox](techniques/mapbox/TECHNIQUE.md)
+
+- Requires a Mapbox key
+- Nicer styles by default
+- Map can display a round globe when zoomed out
+- Includes nice 3D buildings such as the Eiffel tower
+
+## [MapLibre](techniques/maplibre/TECHNIQUE.md)
+
+- Requires no API key, fully free
+- Does not include 3D building
+
+## [MapTiler](techniques/maptiler/TECHNIQUE.md)
+
+- Uses MapTiler
+- Annotations can be drawn on top of geographic features: borders, rivers, labels
+
+## [CesiumJS](techniques/cesium/TECHNIQUE.md)
+
+- Flythroughs through terrain and mountains
+- "Flight simulator" perspective

package/templates/default/.claude/skills/remotion-maps/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-maps'
+  short_description: 'Create animated maps in Remotion videos'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-maps: Animate a dot from Zurich to New York.'

package/templates/default/.claude/skills/remotion-maps/techniques/cesium/TECHNIQUE.md

@@ -0,0 +1,89 @@
+# CesiumJS — 3D flyovers in Remotion
+
+Instructions for achieving map animations with "flight-simulator" perspective in Remotion.
+
+## Modes
+
+| Mode        | Data                                                  | Use for                                                |
+| ----------- | ----------------------------------------------------- | ------------------------------------------------------ |
+| `landscape` | MapTiler `terrain-quantized-mesh-v2` + `satellite-v2` | Mountains, gorges, rivers, coastlines and rural routes |
+| `city`      | Google Photorealistic 3D Tiles                        | Cities, architecture and recognizable landmarks        |
+
+Do not use footprint extrusions for city flyovers. They produce crude building blocks rather than
+textured architecture.
+
+## Credentials
+
+For `landscape`, set:
+
+```text
+REMOTION_MAPTILER_KEY=...
+```
+
+Create a MapTiler key at https://cloud.maptiler.com/account/keys/.
+
+For `city`, set:
+
+```text
+REMOTION_GOOGLE_MAPS_API_KEY=...
+```
+
+Create a billing-enabled Google Map Tiles API key by following
+https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and
+restrict the key to that API. Ensure its application restriction permits local headless Remotion
+requests.
+
+## Build the flight
+
+1. Copy `assets/CesiumFlythrough.tsx`, a path JSON and `assets/example-Root.tsx` into the Remotion
+   project, or import the component directly.
+2. Supply the camera route as `[longitude, latitude][]`. Use only meaningful control points; do not hand-author dozens of tiny corrections.
+3. Leave `pathSmoothingPasses={3}` initially. The component applies repeated Chaikin corner cutting, turning straight-then-corner input into a continuous swerve. Increase to `4` for a softer route or reduce to `2` when the camera must follow a tight corridor.
+4. Set absolute camera altitudes for the location. City cameras normally fly lower than landscape
+   cameras.
+5. Render a middle-frame still before rendering the full video.
+
+```tsx
+<CesiumFlythrough
+  mode="city"
+  path={cameraPath}
+  pathSmoothingPasses={3}
+  altitudeStart={700}
+  altitudeEnd={500}
+  lookAheadKm={0.7}
+  travelKm={4.5}
+/>
+```
+
+## Camera behavior
+
+Walk the smoothed curve by arc length for constant ground speed. Aim at a real point farther along
+the curve rather than its next vertex. Derive roll from the change in look-ahead bearing so the
+camera banks into a turn instead of twitching left and right.
+
+For landscape routes, `scripts/prep-cesium-path.mjs` also clips, resamples, smooths and dampens a
+GeoJSON centerline before the component applies its final curve smoothing.
+
+
+## Mechanics
+
+- Set `viewer.useDefaultRenderLoop = false`.
+- Call `viewer.render()`, never `scene.render()`, while settling.
+- Use `preserveDrawingBuffer: true`.
+- Gate initialization and every frame with `delayRender`.
+- Drive camera animation from `useCurrentFrame()`; do not use CSS transitions or browser-timed animation.
+- Settle landscapes on `globe.tilesLoaded` and cities on `tileset.tilesLoaded`.
+- Keep all provider attribution visible.
+- Record the source and effective date of custom or disputed geography.
+- Inspect rendered pixels, not only Studio playback, at every required aspect ratio.
+- Read `references/3d-flyover-architecture.md` for camera math, `references/3d-data-sources.md` for provider details, and `references/3d-troubleshooting.md` for blank, coarse, unauthorized or timed-out renders.
+
+## Files
+
+- `assets/CesiumFlythrough.tsx` — reusable two-mode component.
+- `assets/flight-path.ts` — dependency-free Chaikin route smoothing.
+- `assets/example-Root.tsx` — landscape and city compositions.
+- `assets/cesium-path.json` — sample landscape route.
+- `assets/city-path.json` — sample city route.
+- `assets/sample-river.geojson` — sample path-preparation input.
+- `scripts/prep-cesium-path.mjs` — dependency-free landscape route preparation.

package/templates/default/.claude/skills/remotion-maps/techniques/cesium/assets/CesiumFlythrough.tsx

@@ -0,0 +1,284 @@
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {
+	AbsoluteFill,
+	cancelRender,
+	continueRender,
+	delayRender,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+import terrainPath from './cesium-path.json';
+import {smoothFlightPath, type LngLat} from './flight-path';
+
+export type FlyoverMode = 'landscape' | 'city';
+export type {LngLat} from './flight-path';
+
+export type CesiumFlythroughProps = {
+	mode?: FlyoverMode;
+	path?: LngLat[];
+	pathSmoothingPasses?: number;
+	altitudeStart?: number;
+	altitudeEnd?: number;
+	lookAheadKm?: number;
+	travelKm?: number;
+	pitchFromNadir?: number;
+	verticalExaggeration?: number;
+	maximumScreenSpaceError?: number;
+};
+
+const MAPTILER_KEY = process.env.REMOTION_MAPTILER_KEY;
+const GOOGLE_MAPS_API_KEY = process.env.REMOTION_GOOGLE_MAPS_API_KEY;
+const CESIUM_VER = '1.143';
+const CDN = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VER}/Build/Cesium/`;
+const R = 6371;
+const MAX_BANK = 0.13;
+const BANK_GAIN = 0.6;
+
+const havKm = (a: number[], b: number[]) => {
+	const r = Math.PI / 180;
+	const dLat = (b[1] - a[1]) * r;
+	const dLng = (b[0] - a[0]) * r;
+	const h =
+		Math.sin(dLat / 2) ** 2 +
+		Math.cos(a[1] * r) * Math.cos(b[1] * r) * Math.sin(dLng / 2) ** 2;
+	return 2 * R * Math.asin(Math.sqrt(h));
+};
+
+const makePathWalker = (path: LngLat[]) => {
+	if (path.length < 2)
+		throw new Error('Flyover path needs at least two points');
+	const cumulative = [0];
+	for (let i = 1; i < path.length; i++) {
+		cumulative.push(cumulative[i - 1] + havKm(path[i - 1], path[i]));
+	}
+	const lengthKm = cumulative[cumulative.length - 1];
+	const along = (km: number): LngLat => {
+		const d = Math.max(0, Math.min(lengthKm, km));
+		let i = 1;
+		while (i < cumulative.length && cumulative[i] < d) i++;
+		if (i >= cumulative.length) return path[path.length - 1];
+		const segmentLength = cumulative[i] - cumulative[i - 1] || 1;
+		const t = (d - cumulative[i - 1]) / segmentLength;
+		return [
+			path[i - 1][0] + (path[i][0] - path[i - 1][0]) * t,
+			path[i - 1][1] + (path[i][1] - path[i - 1][1]) * t,
+		];
+	};
+	return {along, lengthKm};
+};
+
+const bearing = (a: number[], b: number[]) => {
+	const r = Math.PI / 180;
+	const y = Math.sin((b[0] - a[0]) * r) * Math.cos(b[1] * r);
+	const x =
+		Math.cos(a[1] * r) * Math.sin(b[1] * r) -
+		Math.sin(a[1] * r) * Math.cos(b[1] * r) * Math.cos((b[0] - a[0]) * r);
+	return Math.atan2(y, x);
+};
+
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+const clamp = (v: number, lo: number, hi: number) =>
+	Math.max(lo, Math.min(hi, v));
+
+const loadCesium = () =>
+	new Promise<any>((resolve, reject) => {
+		if ((window as any).Cesium) return resolve((window as any).Cesium);
+		(window as any).CESIUM_BASE_URL = CDN;
+		const css = document.createElement('link');
+		css.rel = 'stylesheet';
+		css.href = `${CDN}Widgets/widgets.css`;
+		document.head.appendChild(css);
+		const script = document.createElement('script');
+		script.src = `${CDN}Cesium.js`;
+		script.onload = () => resolve((window as any).Cesium);
+		script.onerror = () =>
+			reject(new Error(`Failed to load CesiumJS ${CESIUM_VER}`));
+		document.head.appendChild(script);
+	});
+
+export const CesiumFlythrough: React.FC<CesiumFlythroughProps> = ({
+	mode = 'landscape',
+	path = terrainPath as LngLat[],
+	pathSmoothingPasses = 3,
+	altitudeStart = 4600,
+	altitudeEnd = 4300,
+	lookAheadKm = 1.5,
+	travelKm = 13,
+	pitchFromNadir = 76,
+	verticalExaggeration = 1.1,
+	maximumScreenSpaceError = 8,
+}) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const started = useRef(false);
+	const viewerRef = useRef<any>(null);
+	const tilesetRef = useRef<any>(null);
+	const frame = useCurrentFrame();
+	const {durationInFrames, fps, width, height} = useVideoConfig();
+	const [ready, setReady] = useState(false);
+	const [handle] = useState(() =>
+		delayRender(`cesium init: ${mode}`, {timeoutInMilliseconds: 120000}),
+	);
+	const walker = useMemo(
+		() => makePathWalker(smoothFlightPath(path, pathSmoothingPasses)),
+		[path, pathSmoothingPasses],
+	);
+
+	const setCamera = (C: any, viewer: any, progress: number) => {
+		const maxTravel = Math.max(0, walker.lengthKm - lookAheadKm * 2);
+		const cameraDistance = Math.min(travelKm, maxTravel) * progress;
+		const camera = walker.along(cameraDistance);
+		const aim = walker.along(cameraDistance + lookAheadKm);
+		const aim2 = walker.along(cameraDistance + lookAheadKm * 2);
+		const heading = bearing(camera, aim);
+		let headingDelta = bearing(aim, aim2) - heading;
+		while (headingDelta > Math.PI) headingDelta -= 2 * Math.PI;
+		while (headingDelta < -Math.PI) headingDelta += 2 * Math.PI;
+		viewer.camera.setView({
+			destination: C.Cartesian3.fromDegrees(
+				camera[0],
+				camera[1],
+				lerp(altitudeStart, altitudeEnd, progress),
+			),
+			orientation: {
+				heading,
+				pitch: C.Math.toRadians(-(90 - pitchFromNadir)),
+				roll: clamp(headingDelta * BANK_GAIN, -MAX_BANK, MAX_BANK),
+			},
+		});
+	};
+
+	const tilesAreLoaded = (viewer: any) => {
+		if (mode === 'landscape') return viewer.scene.globe.tilesLoaded;
+		return Boolean(tilesetRef.current?.tilesLoaded);
+	};
+
+	const settle = (viewer: any) =>
+		new Promise<void>((resolve) => {
+			let stable = 0;
+			let ticks = 0;
+			const tick = () => {
+				viewer.render();
+				ticks++;
+				stable = tilesAreLoaded(viewer) ? stable + 1 : 0;
+				if (stable > 8 || ticks > 600) {
+					viewer.render();
+					resolve();
+				} else {
+					setTimeout(tick, 8);
+				}
+			};
+			tick();
+		});
+
+	useEffect(() => {
+		if (started.current) return;
+		started.current = true;
+		(async () => {
+			if (mode === 'landscape' && !MAPTILER_KEY) {
+				throw new Error(
+					'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/',
+				);
+			}
+			if (mode === 'city' && !GOOGLE_MAPS_API_KEY) {
+				throw new Error(
+					'Set REMOTION_GOOGLE_MAPS_API_KEY. Create a Map Tiles API key at https://developers.google.com/maps/documentation/tile/get-api-key',
+				);
+			}
+			if (mode === 'city' && durationInFrames / fps > 30) {
+				throw new Error(
+					'Google Photorealistic 3D Tiles compositions must not exceed 30 seconds',
+				);
+			}
+
+			const C = await loadCesium();
+			const viewer = new C.Viewer(containerRef.current, {
+				baseLayer: false,
+				baseLayerPicker: false,
+				geocoder: false,
+				homeButton: false,
+				sceneModePicker: false,
+				navigationHelpButton: false,
+				animation: false,
+				timeline: false,
+				fullscreenButton: false,
+				infoBox: false,
+				selectionIndicator: false,
+				contextOptions: {webgl: {preserveDrawingBuffer: true}},
+			});
+			if (mode === 'landscape') {
+				viewer.imageryLayers.addImageryProvider(
+					new C.UrlTemplateImageryProvider({
+						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`,
+						maximumLevel: 20,
+					}),
+				);
+				viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl(
+					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`,
+					{requestVertexNormals: true},
+				);
+				viewer.creditDisplay.addStaticCredit(
+					new C.Credit(
+						'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',
+						true,
+					),
+				);
+			}
+			if (mode === 'city') {
+				viewer.scene.globe.show = false;
+				const tileset = await C.Cesium3DTileset.fromUrl(
+					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`,
+					{
+						showCreditsOnScreen: true,
+						maximumScreenSpaceError,
+					},
+				);
+				viewer.scene.primitives.add(tileset);
+				tilesetRef.current = tileset;
+			}
+
+			viewer.useDefaultRenderLoop = false;
+			viewer.scene.skyAtmosphere.show = true;
+			viewer.scene.fog.enabled = true;
+			viewer.scene.globe.enableLighting = false;
+			viewer.scene.verticalExaggeration = verticalExaggeration;
+			(window as any).__CESIUM_FLYOVER__ = {C, mode};
+			viewerRef.current = viewer;
+			setCamera(C, viewer, 0);
+			await settle(viewer);
+			setReady(true);
+			continueRender(handle);
+		})().catch((error) => cancelRender(error));
+	}, [durationInFrames, fps, handle, mode]);
+
+	useEffect(() => {
+		if (!ready) return;
+		const frameHandle = delayRender(`cesium ${mode} frame ${frame}`, {
+			timeoutInMilliseconds: 60000,
+		});
+		const C = (window as any).__CESIUM_FLYOVER__.C;
+		const viewer = viewerRef.current;
+		const progress = durationInFrames <= 1 ? 0 : frame / (durationInFrames - 1);
+		setCamera(C, viewer, progress);
+		settle(viewer).then(() => continueRender(frameHandle));
+	}, [ready, frame, durationInFrames, mode]);
+
+	return (
+		<AbsoluteFill style={{backgroundColor: '#000'}}>
+			<div ref={containerRef} style={{width, height, position: 'absolute'}} />
+			{mode === 'city' ? (
+				<div
+					style={{
+						position: 'absolute',
+						top: 20,
+						right: 24,
+						color: 'white',
+						font: '500 18px/1.2 sans-serif',
+						textShadow: '0 1px 4px black',
+					}}
+				>
+					For promotional purposes only
+				</div>
+			) : null}
+		</AbsoluteFill>
+	);
+};