1仕組みと動作原理
スタイルの特徴は定量化可能な時間的規約にあります。24fpsの完成映像において、グラフィックオーバーレイ層は12fps刻み（2フレームごとに同一値を保持）で動作し、背景地図素材と音声は24fpsのスムーズさを維持します。つまり、ベースは滑らかに保ちつつオーバーレイのみをコマ落としします。
skills/map-animation/SKILL.md
The single most recognizable trait of this style is **animating the map graphics at 12fps inside a 24fps edit**.
「Voxのようなスタイル」をフレームレート比として捉え直すことが、このスキルにおける最も再利用性の高い抽象化です。
コマ落ちの実装は「フレーム番号を先に量子化し、その量子化後の値を使ってすべてのグラフィック数値を計算する」手法を採り、ステップ幅は2固定のハードコードではなくfpsから導出（Math.round(fps/12)）するため、フレームレートを変更してもスタイルが崩れません。
skills/map-animation/SKILL.md
const f = Math.floor(frame / STEP) * STEP; // use `f`, not `frame`, for graphic motion
レンダリング層ではなく利用側（アニメーション値の計算前）に量子化処理を記述することで、Remotion内でフレーム単位の再現性を保証しています。
要件に応じて2つの制作パスに振り分けます。写実的な地形／リアルな3D建築／映画的なカメラワークが必要な場合はGoogle Earth Studioから画像シーケンス＋カメラ.jsxを出力してAfter Effectsでカメラを再構築し、オーバーレイをtrack nullに紐づけます。スケッチ・編集スタイル、完全な制御、データ駆動が必要な場合はGeoJSON/SVGを用いた投影後のコードレンダリングを行います。
skills/map-animation/SKILL.md
| Photoreal terrain, real satellite/3D buildings, cinematic camera | **Google Earth Studio → After Effects** | Image sequence + camera `.jsx`, composited in AE |
ツールチェーン選定の前に「どのような映像を求めているか」をまず問うことで、「すべてをコードで無理に実装する」または「すべてをAEに任せる」という極端な設計を回避しています。
ベクターパスの固定は共通の投影法によって実現されます。背景地図、ピン、ルート、ラベルのすべてが同一のprojection([lng,lat])を経由し、カメラはそのグループ全体に対してscale/translateを適用するだけであるため、カメラ移動に伴う要素のズレが発生しません。
skills/map-animation/SKILL.md
The same `projection([lng,lat])` converts every pin coordinate to a screen position, so pins, routes, and labels all share one coordinate space
マップアニメーションで最も頻発する「ピンのズレ」を、目視修正ではなく「同一座標空間」という仕組みによって根本的に解消しています。
4つのオーバーレイ要素それぞれに専用のメカニズムがあります。ピンドロップ（スプリングによるオーバーシュートからの静止＋オプションのパルス）、ルート描画（pathLength=1正規化＋dashoffset）、エリアハイライト（focus + context：対象を明るくし他を暗転）、ラベル引き出し線（投影点への固定と水平維持）。
skills/map-animation/SKILL.md
`pathLength="1"` normalizes any route length so one progress value (0→1) draws it.
大圏航路をまたぐルートはgeoInterpolateで細分化補間し、メルカトル図法の直線による飛行経路の歪みを防ぎます。
データ駆動型のオーケストレーションを採用しています。単一のbeats配列がカメラ目標、ピンの順序、ルート区間、ラベルを同時に決定し、総尺はcalculateMetadataがholdsを加算して算出するため、データを差し替えるだけでキーフレームの再調整なしに映像を更新できます。
skills/map-animation/SKILL.md
One array → camera targets, pin order, route segments, and labels stay in sync.
「地図ナラティブ」を配列としてパラメータ化することで、初めて一括生成や再利用が可能になります。
地理的忠実性を重視した検証を行います。各ピンが正確な緯度経度に配置されているか、ルートが正しい都市を結んでいるか、ハイライトが対象エリアと一致しているか、ラベルの綴りが正しいかを確認します。さらに「隣接する2フレーム」をサンプリングし、背景カメラが進みつつオーバーレイが2フレーム維持されているかを検証します。
skills/map-animation/SKILL.md
Two adjacent overlay frames are identical (12fps step holds) while the base camera advanced
「隣接フレームが同一であること」は、美的特徴を検証可能な条件へと変換した、機械判定が可能なスタイルのアサーションです。
Earth Studioパスの重要操作は、エクスポート時に「3D Camera Export」をチェックすることです。これを有効にして初めて画像シーケンスとともにカメラ.jsxとトラックポイントデータが出力されます。忘れると素材のみとなり、AEでのカメラ再構築やオーバーレイの固定ができなくなります。
skills/map-animation/references/earth-studio-to-ae.md
**CRITICAL — enable the After Effects / 3D Camera Export option**
最も頻繁に起こる失敗（チェック漏れによる.jsx欠落）を明示的な警告とし、「再エクスポート」のリカバリー手順を提供しています。
2コア機能
0112fpsコマ落ち量子化（コード側でのフレーム番号量子化、AE側でのPosterize Time(12)または12fpsネストプリコンポ）
02ベクター投影：d3-geo（Mercator / EqualEarth / Orthographic）＋ fitSizeによる自動画角調整、GeoJSON feature → SVG path
03ベクターカメラ：目標緯度経度へのtransform移動＋拡大縮小、ラベルは1/scaleで逆スケーリングして可読性を維持
04ピンドロップ（スプリングオーバーシュート後の静止、12fpsステップへのスタッガー量子化）＋オプションのパルスリング
05ルート描画：ポイントごとのSVGパス投影＋pathLength正規化＋dashoffset。大圏航路はgeoInterpolateで細分化、移動インジケーターの追加も可能
06エリアハイライト：focus + context（対象フィーチャーの発光・ストローク＋背景の減光）、またはclip-pathワイプ／ストロークパルス
07ラベルと引き出し線：px([lng,lat])へのアンカー、ピン着地後の出現、地図回転に追従しない水平維持、必要に応じた逆スケーリング
08Earth Studio → AEカメラインポートワークフロー（3D Camera Exportを有効化してエクスポート → .jsx実行で3Dカメラとtrack nullを再構築 → オーバーレイをtrack nullに親付け → オーバーレイプリコンポにのみ12fpsを適用）
09データ駆動型beatsオーケストレーション：zodスキーマ ＋ calculateMetadataによるholds加算での総尺算出、データ差し替えによる映像生成
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx remotion still / render（矢量路径的帧验证与编码） |
| package | d3-geo（geoMercator / geoPath / geoInterpolate 等投影与球面插值） |
| network | 底图数据源：Natural Earth（国家/州界 GeoJSON）或 world-atlas TopoJSON（用 topojson.feature 转换） |
| api | Google Earth Studio（浏览器工具，需 Google 账号；产出图像序列 + 相机 .jsx + track 数据） |
| package | zod（beats schema 校验） |
| cli | ffmpeg / ffprobe（contact-sheet.sh 拼图与 probe-mp4.sh 规格断言） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: npx remotion still / render（SKILL.md Verify loop）：必要に応じてnpmからRemotion CLIを取得・実行
- 网络端点: 外部ネットワークアクセスの宣言: Google Earth Studio（earth.google.com/studio）：Path Aのカメラキーフレーム設定およびUI操作をブラウザ上で実行
- 本地工作目录: ファイル読み書きと成果物出力: out/*.mp4、out/demo.gif、out/f-*.png（完成動画およびフレーム静止画）、sheet.png（スプライトシート）
監査ノート： 判定対象はスキル自身のディレクトリ（skills/map-animation/：SKILL.md + references/内の2ファイル + 0バイトのREADME.md。ディレクトリ内にスクリプト、認証情報読み取り、ディスク書き込みはなし）です。Amber判定の要因は実行チェーンと外部サービス接面にあります。① 出力規約として `npx remotion still/render` によるベクター地図レンダリングが要求されており、npx経由でnpmレジストリからRemotion CLIおよび@remotion/*関連パッケージが取得・実行され、ローカルのbundle + headless Chromium環境でプロジェクトコードが実行されます（同一作者のremotion-videoと同様の理由によるAmber判定）。② サードパーティ製パッケージ（d3-geo、zod）および地図データセット（Natural Earth / world-atlas / topojson）に依存しています。③ Path AはGoogleのEarth Studioサービスに依存しています（Googleアカウントが必要。リファレンスにはGoogle映像の利用規約および帰属表示に関する記載あり）。スキル自体は認証情報や環境変数の読み取り、業務APIの呼び出し、スクレイピング、保護回避を行わないためRedには該当しません。トリガー条件：コード実行パスのリモート取得は実際のレンダリング時のみ発生し、Earth Studioパスはユーザーがブラウザ上で手動操作するためエージェントによる代理ログインは行われません。
5二重目の独立検証
- [ok] 外部依赖调用点复核（npx remotion / d3-geo / zod / Earth Studio / 底图数据） — SKILL.md 确有 `npx remotion still MapSeq out/f-start.png ...` 与 `npx remotion render MapSeq out/map.mp4`；SKILL.md 代码块确有 `import { geoMercator, geoPath } from "d3-geo";`；vector-maps 确有 `export const schema = z.object({` 与 Natural Earth/world-atlas 建议；earth-studio-to-ae 确有 earth.google.com/studio 与 3D Camera Export 告警。全部落地。
- [ok] Earth Studio 路径是否引入 agent 侧凭证行为 — 文档措辞是「Keyframe in Earth Studio (browser)」「In After Effects: … Run Script File…」——由人操作；skill 未要求 agent 登录 Google、未涉及任何 cookie/token 读取。故不计入 credential_reads，只作为外部服务依赖记入 external_deps 并在 reason 中标注账号前提。
- [ok] 12fps 量化实现与描述一致性 — SKILL.md 的代码块 `const STEP = Math.round(fps / 12); const f = Math.floor(frame / STEP) * STEP;` 与文字「at 24fps, hold each graphic-layer value for 2 frames (update on even frames only)」一致；vector-maps 用同一写法并额外给出 `Math.max(1, …)` 的 30fps 保护；AE 侧给了 posterizeTime(12) 与 12fps 嵌套 precomp 两种等价做法。三处口径一致。
- [ok] 「共享坐标空间」主张的成立性 — 矢量路径中底图用 `toPath(feat)`、pin/route/label 用 `px([lng,lat])`（同 projection），相机是对同一 group 的 transform；AE 路径则用 track null + `toComp([0,0,0])` 表达式。两条路都确实把「元素锁定」交给共享坐标系，而非逐元素手调关键帧。
- [ok] 坐标序与投影边界的风险是否明示 — vector-maps 的 Gotchas 明示两点：GeoJSON 与 projection() 都是 [lng, lat] 而非 [lat, lng]（写反会把每个 pin 送错位置）；Mercator 在高纬/跨 ±180° 会截断或撕裂，建议世界视图改用 geoEqualEarth/geoNaturalEarth1 或旋转投影。均为操作级警告，非泛泛提醒。
- [discrepancy] 跨目录 / 跨 skill 引用可解析性 — 正文引用的 `scripts/contact-sheet.sh`、`scripts/probe-mp4.sh` 位于仓库根，单装本 skill 目录会悬空（需装整个 repo）；另外 SKILL.md 把矢量路径定位为「Remotion 或 D3」，但 D3 网页变体只给要点（?t 冻结），完整网页交付契约与同 pack 其他 skill 相比更薄——属能力边界，非错误。
- [ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 Earth Studio→AE 相机导入、GeoJSON/SVG 矢量地图动效、pin/route/highlight/label、12fps 顿帧与数据驱动 Remotion 渲染；正文两条路径与两份 reference 逐项兑现。未夸大——AE 侧的产出被明确定义为「AE 工程 + 渲染素材，由人工 scrubbing 验收」，而非声称 agent 能自动完成 AE 合成。
6結論
最適な用途： ドキュメンタリーや解説動画において「場所の感覚を確立する」シークエンスに最適です（地球規模から都市へのズーム、ランドマーク周辺の周回、国境沿いのパンなど）。また、地理的な移動（ルート、サプライチェーン、移住、航空路）の表現や、国・地域をハイライトしてラベル付けする段階的な地理解説にも適しています。フォトリアルな背景が必要な場合はEarth Studio + AEを、スケッチ風・エディトリアル調のデザインやデータ駆動での量産にはGeoJSON/SVG + Remotionを選択してください。
不向きな用途： 正確な測地データや面積比較が求められる用途には不向きです（メルカトル図法による歪みが生じるため、正積投影を使用する必要があります）。インタラクティブな地図アプリケーション（このスキルが生成するのは動画／モーション素材であり、操作可能な地図ではありません）や、手動GUI操作を受け入れられない完全自動化パイプライン（Path Aには必ず手動操作が含まれます）には適していません。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload map-animation.tar.gz
sha256:
Option B · Copy Guide for Agent8f12ba8c5bbce5eb…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 390ca98bbc.