Communitygithub.com

Guilhermeslvg/video-portfolio

Remotion を使用した動的な地図アニメーションのスキル

video-portfolio とは?

このスキルは、Remotion を使って動画ポートフォリオ向けの地図アニメーションを生成するためのテクニック集です。5 つの独立したテクニック(静的マップ、Mapbox、MapLibre、MapTiler、CesiumJS)が用意されており、それぞれが自己完結型なので、必要なものだけを選んで利用できます。Mapbox では3D 建物や地球儀表示、CesiumJS では地形のフライスルーなど、異なるスタイルと機能を提供します。開発者は各テクニックの TECHNIQUE.md を読み込んで実装することで、簡単に高品質な地図アニメーションを動画に組み込めます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Guilhermeslvg/video-portfolio/tree/HEAD/.agents/skills/remotion-maps

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Remotion マップ

意図したショットに最適なテクニックを 1 つ選択し、そのテクニックの TECHNIQUE.md のみを読み込んでください。 各テクニックディレクトリは自己完結しており、他のテクニックに影響を与えずに削除できます。

静的マップ

  • 衛星画像を取得し、<Img> タグでマウントして、その上にアニメーションを追加する必要があります

Mapbox

  • Mapbox キーが必要です
  • デフォルトで美しいスタイルが適用されます
  • ズームアウト時に地球を球体として表示できます
  • エッフェル塔などの 3D 建物を美しく表示できます

MapLibre

  • API キー不要、完全無料
  • 3D 建物は含まれません

MapTiler

  • MapTiler を使用します
  • 国境、河川、ラベルなどの地理的特徴の上に注釈を描画できます

CesiumJS

  • 地形や山岳地帯のフライスルーが可能
  • 「フライトシミュレーター」のような視点

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

関連スキル