Communitygithub.com

VYBE 画像モーション化

静止画像を分析し、カメラワークや深度マップパララックスを用いたプログラム的2.5Dモーション、またはRunway Gen-4.5 / Veo 3.1 / Kling 3.0 / Luma Ray 3.2 / Gemini Omni FlashなどのAI画像-to-ビデオ技術を適切に選択して動画化します。HyperFramesで音楽・効果音・テキストを合成します。

VYBE 画像モーション化 とは?

VYBE Image-to-Motionは、静止画像を動画に変換する高度なエージェントスキルです。まず画像を分析し、被写体・背景・奥行き・光源などを詳細に記録します。次に、ユーザーのリクエストに基づいて最適な手法を選択します。プログラム的手法では、被写体と背景をレイヤー分離し、深度マップによるパララックス、パーティクルやフォグ、ライトスイープなどの2.5Dカメラワークを実現します。AI手法では、Runway Gen-4.5、Google Veo 3.1、Kling 3.0、Luma Ray 3.2、Gemini Omni Flashなどのプロバイダーを介して、人物の歩行・表情・水の流れ・布の揺れなど有機的なモーションを生成します。ハイブリッド(AIクリップ+プログラム的オーバーレイ)も可能です。最終的にHyperFramesで音楽・効果音・テキストを加え、VYBEのオーディオ・レンダリング・QC・ファイナライズパイプラインで出力します。Claude Code / Cursor / Codexなどのエージェント環境で動作し、 ```bash I analyze <image> I classify "<motion request>" [--method programmatic|ai] I scaffold --image <img> --prompt "<request>" --composition <dir> I generate --provider <p> --image <img> --prompt "<prompt>" --out sources/clip.mp4 I compose --clip sources/clip.mp4 --composition <dir> ``` などのコマンドで操作します。特に重要なのは「正直ルール」で、プログラム的モーションは元のピクセルを動かすだけであり、「人が歩く」「水流れる」などと誤った説明をしてはいけません。AIクリップには`.provenance.json`が付与され、AI生成であることが明示されます。

対応~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/SJbuilds04/VYBE/tree/HEAD/skills/vybe-image-to-motion

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

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

ドキュメント

VYBE Image-to-Motion

I = node <this skill>/scripts/i2m.mjs。単体で動作するか、/vybeのステージ4~5として動作します(その場合、作曲ディレクトリはVYBEプロジェクトのcomposition/です)。

正直ルール

プログラム的モーションは、カメラ、レイヤー、ライト、パーティクルを元のピクセルの周りで動かします。人を歩かせたり、笑わせたり、顔を向けさせたり、水を流したり、製品の裏側を見せたりすることはできません。プログラム的出力を「人が歩いている」とか「リアルな動き」と説明してはいけません。リクエストにピクセルレベルの動きが必要で、AIプロバイダーが実行されなかった場合は、そのことを率直に伝え、カメラモーションバージョンをそのまま提供してください。AIクリップには.provenance.jsonが付与され、常にAI生成とラベル付けされます。

1 · 分析

I analyze <image>            # サイズ、アスペクト → 推奨フォーマット、トーンキー、パレット

次に画像を(視覚的に)見て、sources/image-analysis.mdを作成します:主要被写体と境界、前景/中景/背景、遠近法と地平線、光源の方向、動く可能性のある領域、顔(同一性を維持する必要あり)。

2 · 計画と手法の選択

I classify "<ユーザーのモーションリクエスト>" [--method programmatic|ai]
I providers                  # 設定されているAIプロバイダー(存在確認のみ)
リクエストの内容手法
ズーム、押し込み、引き出し、パン、オービット感、パララックス、深度プログラム的
パーティクル、ダスト、雪、雨、フォグ、ライトスイープ、グロー、フレアプログラム的
被写体が安定したまま背景が漂うプログラム的(レイヤー)
分離されたオブジェクトの優雅な浮遊/揺れプログラム的(レイヤー、subjectSway)
人/動物の動き、表情、手の動きAI
髪/布/葉/炎の動き、水/煙の流れAI
変形(溶ける、咲く、爆発する)、360°回転AI

ユーザーの明示的な--methodが常に優先されます。ハイブリッド(AIクリップ+プログラム的オーバーレイとカメラ)が最適な場合が多いです:有機的なモーションを生成し、HyperFramesでVYBEのカメラ、ライト、タイポグラフィ、サウンドを追加します。

sources/motion-plan.mdを作成します:カメラの動き、オブジェクト/背景の動き、ライト、パーティクル、持続時間、強度、手法とその理由、そして動かないもの。

3a · プログラム的

I scaffold --image <img> --prompt "<リクエスト>" --composition <dir> [--mode layers|depth] [--format f] [--duration s]
cd <dir> && npx hyperframes check && npx hyperframes snapshot --frames 5 -o ../previews/i2m
  • layers(デフォルト):npx hyperframes remove-backgroundで被写体と背景プレートを切り抜きます。被写体の穴はぼかしたコピーで埋められます。プレート、フォグ、被写体、パーティクル、ライトが深度スケーリングされたパララックスで動きます。明確な被写体がある場合に最適です。
  • depth:Three.jsシェーダーが深度マップ(被写体マスク+地面グラデーション)で画像を変位させ、仮想カメラの動きに応じて真の2.5Dパララックスをフレーム全体に提供します。風景、室内、単一被写体のないシーンに最適です。顔にはintensity ≤ 1を推奨(強すぎるオフセットは顔を歪めます)。
  • index.html内の#i2m-configJSONで調整します(カメラ:プッシュ・プル・パンレフト・パンライト・ライズ・オービット、強度0.5~1.5、エフェクト:パーティクル・スノー・レイン・フォグ・ライトスイープ、subjectSway)。
  • カットアウトが利用できない場合は単一レイヤーモーションに劣化します——その旨を報告してください。

3b · AI 画像-to-ビデオ

I generate --provider <p> --image <img> --prompt "<モーションプロンプト>" --out sources/clip.mp4 --duration 5 --aspect 16:9 --dry-run   # リクエストを検査(キーは秘匿)
I generate --provider <p> --image <img> --prompt "<モーションプロンプト>" --out sources/clip.mp4 --duration 5 --aspect 16:9
I compose --clip sources/clip.mp4 --composition <dir> [--title "…"]
プロバイダーモデル備考
runwaygen4.5(デフォルト)、gen4_turbo、veo3.1、veo3.1_fast、kling3.0_pro、kling3.0_standard1つのキーでRunway、Google Veo 3.1、Kling 3.0にアクセス可能;持続時間2~10秒(Veo 4/6/8、Kling 3~15)
lumaray-3.25秒、開始フレーム付き;公開--image-urlを優先、小ファイルはインラインデータも可
geminigemini-omni-1.1-flashInteractions API、16:9または9:16;Veo 3.1 プレビューモデルは2026-10-22に廃止
klingkling-v2-1(直接)実験的アダプター(セカンダリドキュメントのエンドポイント);runway + kling3.0_proを推奨

モーションプロンプトはショットの説明のように記述します:被写体+アクション+カメラ+ムード+「被写体の同一性と構図を維持」。生成にはコストがかかります:エージェントが開始した有料通話の前に、ユーザーがAIモーションを明示的に要求していない限り、ユーザーに確認してください。失敗した有料生成は、許可なく1回以上再試行しないでください。エラー(認証、クォータ、モデレーション、タイムアウト)はそのまま報告されます。

詳細、ソース、注意点:references/providers.md。

4 · 納品

作曲は通常のVYBE処理を受けます:vybe audio(音楽/SFX/ボイス;マーカーあり)、vybe render、vybe qc、vybe finalize。単体の場合は作曲ディレクトリでnpx hyperframes render --output out.mp4を実行します。ソース画像、レイヤー、深度マップ、i2m-plan.json、および該当する.provenance.jsonを保持してください。

Individual skills in this repo

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

SJbuilds04/vybe-audio-design

Sound design and music direction for VYBE / HyperFrames videos — choosing music by mood and arc, spotting sound effects to picture, voiceover direction and provider choice (HeyGen, ElevenLabs, Kokoro, Gemini), ducking, loudness targets, beat-synced editing and caption sync. Use when planning or fixing the audio of a video, when a video feels silent, cheap, cluttered or out of sync, or when choosing a voice or music provider.

SJbuilds04/vybe-cinematic-3d

Deterministic Three.js / WebGL for HyperFrames videos — 3D scenes, particle systems, procedural geometry, product turntables, scientific models (molecules, planets, black holes), lighting rigs, camera paths and camera cuts, rendered frame-exactly from HyperFrames time. Use when a VYBE storyboard calls for 3D, depth, particles, space, a rotating product, a data sculpture, or when a Three.js layer renders black, flickers or differs between renders.

SJbuilds04/vybe-motion-design

Motion design craft for VYBE / HyperFrames videos — animation principles, easing and timing, choreography and staggering, scene transitions, camera movement, and visual effects (blur, glow, masks, grain, light leaks), written as seek-safe GSAP recipes. Use when designing or fixing how things move in a video — entrances, exits, transitions between scenes, camera moves, rhythm, or when motion feels generic, floaty, stiff or repetitive.

SJbuilds04/vybe-typography

Typography for motion — type systems, font pairing with bundled OFL fonts, scale and readability rules for video, kinetic typography techniques, per-letter/word animation, captions design and safe zones, in HyperFrames compositions. Use when choosing fonts, sizing or animating text in a VYBE video, building kinetic type or lyric videos, styling captions, or when text overlaps, clips, is unreadable or looks generic.

関連スキル