remotion-maps

Name: remotion-maps
Author: guanyang

github.com/guanyangクリエイティブ・メディア984159 回インストール2 日前に更新

リポジトリ

remotion-maps について

Remotion の映像制作で地図の手法を選び、実装するためのスキルです。静的地図、Mapbox、MapLibre、MapTiler、CesiumJS を用途別に紹介します。

主な機能

015種類の地図手法
02静的地図へのアニメーション重ね合わせ
03Mapbox のスタイルと地球表示
04API キー不要の MapLibre
05MapTiler の注釈と CesiumJS の飛行映像

活用シーン

01ショットに合う地図手法の選択
02Mapbox による地球や 3D 建物のシーン制作
03MapTiler による地理情報の注釈
04CesiumJS による地形のフライスルー制作

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/guanyang/open-agent-hub --skill remotion-maps

インストール後、Claude Code で/remotion-mapsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/

openai.yaml

assets/

remotion-icon.svg

techniques/cesium/

TECHNIQUE.md

techniques/cesium/assets/

cesium-path.json

CesiumFlythrough.tsx

city-path.json

example-Root.tsx

flight-path.ts

sample-river.geojson

techniques/cesium/references/

3d-data-sources.md

3d-flyover-architecture.md

3d-troubleshooting.md

techniques/cesium/scripts/

prep-cesium-path.mjs

techniques/mapbox/

TECHNIQUE.md

techniques/mapbox/references/

render-stability.md

techniques/maplibre/

TECHNIQUE.md

techniques/maplibre/references/

render-stability.md

techniques/maptiler/

TECHNIQUE.md

techniques/maptiler/assets/

CountryLabel.tsx

example-Root.tsx

MapTilerVectorElement.ts

RiverReveal.tsx

tokens.ts

techniques/maptiler/assets/sample-data/

country-meta.json

yarlung-flow.json

techniques/maptiler/references/

map-data-sources.md

map-explainer-architecture.md

map-geo-prep.md

render-stability.md

techniques/maptiler/scripts/

prep-geo.mjs

詳細

Remotion Maps

意図するショットに合った手法を1つだけ選び、その手法のTECHNIQUE.mdだけを読み込んでください。各手法のディレクトリはそれぞれ独立しているため、ほかの手法に影響を与えずに削除できます。

静的マップ

衛星画像を取得して<Img>タグに配置し、その上にアニメーションを重ねる必要があります

Mapbox

Mapboxのキーが必要です
デフォルトでより洗練されたスタイルを利用できます
ズームアウトすると、マップを丸い地球儀として表示できます
エッフェル塔などの魅力的な3D建物が含まれます

MapTiler

MapTilerを使用します
地理的な地物（境界、河川、ラベル）の上に注釈を描画できます

CesiumJS

地形や山岳地帯を飛行して巡る映像を作成できます
「フライトシミュレーター」の視点

Markdown 対応

ログインしてコメント

基本情報

作者: guanyang
リポジトリ: guanyang/open-agent-hub
カテゴリ: クリエイティブ・メディア
インストール数: 159
GitHub スター: 984

問題を報告

おすすめの Skills

すべての Skills

ai-video-generation

github.com/inference-sh

1.7M

inference.sh CLI で Google Veo、Seedance 2.0、HappyHorse、Wan、Grok など 40 以上のモデルを使って AI 動画を生成する。モデル：Veo 3.1、Seedance 2.0、HappyHorse 1.0、Wan 2.5、Grok Imagine Video、OmniHuman、Fabric、HunyuanVideo。機能：テキストから動画、画像から動画、参照から動画、動画編集、リップシンク、アバターアニメーション、動画アップスケーリング、フォーリー音。用途：ソーシャルメディア動画、マーケティングコンテンツ、解説動画、製品デモ、AI アバター。トリガー：video generation、ai video、text to video、image to video、veo、animate image、video from image、ai animation、video generator、generate video、t2v、i2v、ai video maker、create video with ai、runway alternative、pika alternative、sora alternative、kling alternative、seedance、happyhorse

ai-image-generation

github.com/inference-sh

1.7M

inference.sh CLI で GPT-Image-2.5、FLUX、Gemini、Grok、Seedream、Reve など 50 以上のモデルを使って AI 画像を生成する。モデル：GPT-Image-2.5 Flare、GPT-Image-2.5 Sunburst、GPT-Image-2、FLUX Dev LoRA、FLUX.2 Klein LoRA、Gemini 3 Pro Image、Grok Imagine、Seedream 4.5、Reve、ImagineArt。機能：テキストから画像、画像から画像、インペインティング、LoRA、画像編集、アップスケーリング、テキストレンダリング。用途：AI アート、製品モックアップ、コンセプトアート、ソーシャルメディア用グラフィック、マーケティングビジュアル、イラスト。トリガー：flux、image generation、ai image、text to image、stable diffusion、generate image、ai art、midjourney alternative、dall-e alternative、text2img、t2i、image generator、ai picture、create image with ai、generative ai、ai illustration、grok image、gemini image、gpt image、openai image、chatgpt image

ai-avatar-video

github.com/inference-sh

1.7M

inference.sh CLI で AI アバターやトーキングヘッド動画を作成します。おすすめ：P-Video-Avatar（最速、最安、TTS 内蔵）。その他：OmniHuman、Fabric、PixVerse。音声：Inworld TTS-2（100以上の言語に対応し、キャラクターの感情を調整可能）、ElevenLabs、Kokoro。機能：音声駆動アバター、テキストからアバター、リップシンク動画、トーキングヘッド生成、バーチャルプレゼンター、UGC コンテンツ。用途：AI プレゼンター、解説動画、バーチャルインフルエンサー、吹き替え、マーケティング動画、UGC 広告、ゲームアバター、NPC の会話。トリガー：ai avatar、talking head、lipsync、avatar video、virtual presenter、ai spokesperson、audio driven video、heygen alternative、synthesia alternative、talking avatar、lip sync、video avatar、ai presenter、digital human、ugc、ugc video、ugc ad、avatar ugc

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video