Communitygithub.com

VYBE 圖片轉動態

將靜態圖片動畫化為影片。分析圖片、規劃動態,並選擇合適的技術——程式化 2.5D(攝影機移動、深度圖視差、主體/背景圖層分離、粒子、霧、光線)或 AI 圖片轉影片(Runway Gen-4.5 / Veo 3.1 / Kling 3.0、Luma Ray 3.2、Gemini Omni Flash),以產生有機動態(如走路、臉部、水流或頭髮),最後在 HyperFrames 中結合音樂、音效和文字完成作品。

VYBE 圖片轉動態 是什麼?

VYBE Image-to-Motion 是一個智慧型工具,用於將靜態圖片轉化為動態影片,並根據圖片內容和用戶需求自動選擇最合適的動畫方法。它的核心價值在於透明度與誠實:當請求無法透過程式化方式實現「像素級」運動(例如人物行走、微笑或水流)時,系統會明確告知,並提供能實現的攝影機動態版本,避免誤導用戶。此技能支援三種主要方法:程式化 2.5D(層次分離與深度圖視差)、純 AI 生成(使用多個頂級提供者)以及混合模式(AI 片段加上程式化疊加與攝影機運動)。它可以在 Claude Code、Cursor、Codex 等代理中作為獨立腳本執行,或作為 VYBE 專案的第 4 至第 5 階段。工作流程包括五個步驟:分析圖片、規劃動態並選擇方法(根據動作類型對照決策表)、產生素材(程式化或透過 Runway、Luma、Gemini 等提供者)、最終在 HyperFrames 中合成。一個重要特色是「誠實規則」:系統絕不將程式化輸出描述成「人物走路」或「真實動態」,而 AI 片段會附帶 `.provenance.json` 檔案並標示為 AI 生成。這對於任何需要可靠、可預測且高品質圖片轉動態工作流程的開發者或內容創作者來說,都是一個寶貴的資產,尤其在視覺特效、動態設計和 AI 輔助影片製作等領域。

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

VYBE 圖片轉動態 是做什麼的?

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 提供者已設定(僅檢查是否存在)
請求涉及方法
縮放、推近、拉遠、平移、環繞感、視差、深度programmatic
粒子、灰塵、雪、雨、霧、光線掃掠、發光、光暈programmatic
背景飄移,主體保持穩定programmatic (圖層)
分離物體的輕微浮動/搖擺programmatic (圖層, 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-config JSON 調整(攝影機:push · pull · pan-left · pan-right · rise · orbit;強度 0.5–1.5;特效:particles · snow · rain · fog · light-sweep;subjectSway)。
  • 若無法裁切(移除功能不可用),則降級為單圖層運動——請回報此情況。

3b · AI 圖片轉影片

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_standard一個金鑰即可使用 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 動態。除非獲得允許,否則不要對失敗的付費產生請求重試超過一次。錯誤(認證、配額、審核、超時)應如實回報。

詳細資訊、來源與注意事項:references/providers.md。

4 · 交付

合成內容會接受標準的 VYBE 處理流程:vybe audio(音樂/音效/語音;標記已存在)、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.

相關技能