Remotion + MapLibre 讓 AI 地圖動畫變成可程式化內容產線，下一個瓶頸是算力與儲存

這則 Threads 的重點是：最近越來越多影片裡的地理解說動畫、飛行路線、鏡頭追蹤與酷炫資料視覺化，背後正在被 AI + Remotion 這類程式化影片框架推動。作者也點出一個很務實的終局：當生成變容易，瓶頸會轉向儲存與算力。

原文附圖是一則 X 貼文截圖，內容提到 Remotion Maps 功能已更新，現在由 MapLibre 支援，不再需要 API Token，就能生成電影級地圖動畫：飛行路徑、鏡頭追蹤、縮放與動態路線。圖中展示的是舊金山灣區地圖動畫畫面。

我另外核對了 Remotion 官方 Maps 文件、remotion-dev/maplibre-example 與 Remotion skills 的 maplibre 規則，整理如下。

Remotion Maps + MapLibre 是什麼

Remotion 是用 React / TypeScript 生成影片的框架。它讓影片不是在剪輯軟體裡手拉時間軸，而是像寫前端元件一樣，用程式控制畫面、動畫、資料與時間。

Remotion 官方文件現在提供 Map animations in Remotion，使用 MapLibre GL JS 與 Turf.js 製作地圖動畫。

官方範例 repo： https://github.com/remotion-dev/maplibre-example

這個範例是從原本 Mapbox example 改成 MapLibre，不需要 Mapbox access token，使用 public OpenFreeMap MapLibre style。它展示：

• 在 Remotion composition 裡渲染 MapLibre map
• 沿路線移動 camera
• 隨時間揭露 GeoJSON route line
• 用 Turf 讓 point 沿路線移動
• 用 angle OpenGL renderer 渲染 WebGL output

為什麼 MapLibre 重要

過去做地圖動畫常常會卡在 Mapbox token、費用、授權、樣式與 API 限制。MapLibre 是開源地圖渲染方案，搭配 OpenFreeMap 或其他 style JSON，可以降低地圖動畫的進入門檻。

這不代表完全沒有成本：tiles、style、地理資料來源、渲染時間、影片輸出仍然有成本。但「不用先處理 Mapbox access token」會讓 AI agent 或開發者更容易直接產生可跑的 demo。

技術關鍵：地圖動畫要 deterministic

Remotion 做影片渲染的核心要求是 deterministic：同一個 frame 必須能穩定渲染出同一個畫面。這跟一般互動式 web map 不一樣。

官方與 skill 規則裡有幾個重要做法：

1. 安裝 maplibre-gl 與 @turf/turf。

npm i --save-exact maplibre-gl @turf/turf

2. 匯入 MapLibre CSS。

import 'maplibre-gl/dist/maplibre-gl.css';

3. MapLibre map 要關掉互動與內建動畫。

interactive: false
fadeDuration: 0

4. 用 useDelayRender() / continueRender() 等地圖載入與每 frame 更新完成，不要讓 Remotion 在地圖還沒 ready 時截圖。