Remotion Dev Skills

The remotion-maps skill provides several distinct techniques for creating map animations in Remotion. You should choose exactly one technique based on your requirements for styling, cost, and features. Each technique is self-contained within its own directory.

Available Techniques:

• Static map: Best for simple animations where you use a pre-captured satellite image mounted in an <Img> tag and animate elements on top of it.
• Mapbox: Provides high-quality styles by default, supports a round globe view when zoomed out, and includes 3D buildings (e.g., the Eiffel Tower). Requires a Mapbox API key.
• MapLibre: A fully free option that requires no API key. It does not support 3D buildings.
• MapTiler: Uses the MapTiler service. It allows for annotations to be drawn on top of geographic features like borders, rivers, and labels.
• CesiumJS: Best for cinematic flythroughs through terrain and mountains, offering a "flight simulator" perspective.

To place labels in the most interior part of a country, use the 'pole of inaccessibility' rather than a centroid (which can be pulled to edges).

1. Clip to BBox: Clip the country polygon to a specific ANCHOR_BBOX (the story region) so large countries center in the relevant area.
2. Grid Sampling: Perform a grid sample inside the polygon and select the point with the maximum distance to the boundary (the edge).
3. Nudge: Apply a manual NUDGE (longitude/latitude offset) to fine-tune label placement.

const pole = (poly) => {
  const bb = turf.bbox(poly), edge = turf.polygonToLine(poly), N = 46;
  let best = null, bestD = -1;
  for (let i = 0; i <= N; i++) for (let j = 0; j <= N; j++) {
    const p = turf.point([bb[0]+(bb[2]-bb[0])*i/N, bb[1]+(bb[3]-bb[1])*j/N]);
    if (!turf.booleanPointInPolygon(p, poly)) continue;
    const d = turf.pointToLineDistance(p, edge);
    if (d > bestD) { bestD = d; best = p.geometry.coordinates; }
  }
  return best;
};

// Example configuration for story regions and manual nudges
const ANCHOR_BBOX = { china:[82,27,96,32], india:[76,14,99,31], bangladesh:[86,20,93,27] };
const NUDGE = { china:[0,0.6], india:[-1.0,0], bangladesh:[0,-0.6] };

Use ProRes when you need to import transparent videos into video editing software. You can achieve this via the CLI, by configuring global defaults in remotion.config.ts, or by setting composition-specific defaults using calculateMetadata.

### CLI
```bash
npx remotion render --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444 MyComp out.mov

Global Config (remotion.config.ts)

import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva444p10le");
Config.setCodec("prores");
Config.setProResProfile("4444");

Composition Metadata

import { CalculateMetadataFunction } from "remotion";

const calculateMetadata: CalculateMetadataFunction<Props> = async ({ props }) => {
  return {
    defaultCodec: "prores",
    defaultVideoImageFormat: "png",
    defaultPixelFormat: "yuva444p10le",
    defaultProResProfile: "4444",
  };
};

<Composition
  id="my-video"
  component={MyVideo}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
  calculateMetadata={calculateMetadata}
/>;

To make animations editable in the Studio, write interpolate() calls directly inside the style object.

Requirements for Interactivity:

• Inline Calls: The interpolate() call must be inside the markup, not assigned to a variable beforehand.
• Hardcoded Values: The output range, easing, extrapolation, and output property must use hardcoded values.
• Supported Variables: You can use frame and values destructured from useVideoConfig() (like fps, durationInFrames, width, and height).
• Supported Math: You can use bare identifiers, multiplication with numbers (e.g., 2 * fps), or subtraction (e.g., durationInFrames - 1).
• CSS Properties: Use scale, rotate, and translate instead of the transform property, as only the individual properties are interactively editable.

const {fps, durationInFrames} = useVideoConfig();

<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'
    }),
  }}
/>