dsh-remotion 0.2.0 → 0.3.0

package/skills/remotion-best-practices/remotion-interactivity/SKILL.md

@@ -0,0 +1,247 @@
+---
+name: remotion-interactivity
+description: Structure Remotion markup for interactivity
+version: 4.0.519
+---
+
+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](../remotion-markup/video-editing.md) for best practices on how to structure Remotion markup so the clips are interactively editable in the timeline.

package/skills/remotion-best-practices/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/skills/remotion-best-practices/remotion-maps/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: remotion-maps
+description: Remotion Map animation knowledge
+version: 4.0.519
+---
+
+# 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/skills/remotion-best-practices/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/skills/remotion-best-practices/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/skills/remotion-best-practices/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>
+	);
+};