Framefields：用 TypeScript 程式碼製作影片

Framefields 是以 TypeScript 程式碼製作影片的開源引擎，面向開發者與使用 AI 程式代理的創作者。它將動態圖形、影像合成、三維場景與音訊放進同一個專案，讓使用者能修改來源、檢查影格，再輸出成片。

白話說明：這個網站是做什麼的？

網站提供引擎入口、安裝資訊、文件和示範作品。假設你要做一段產品介紹：標題移入畫面，圖表逐漸長出來，再展示旋轉的三維物件。程式碼描述每個元素的位置、出現時間和動作，Framefields 負責將它們算成影格與影片。

你可以自行撰寫 TypeScript，也可以安裝官方技能，請 AI 程式代理協助。使用時仍需建立專案和執行環境，因此評估重點包含原始碼管理、素材準備與畫面檢查，不能只把首頁當成現成的線上剪輯器。

把文字、圖像、三維與音訊放進同一個構圖

向量文字、逐字動畫、關鍵影格和彈性排版適合製作片頭、功能說明與動態標題。圖片和影片圖層能加入調色、模糊、顆粒、LUT、遮罩與轉場。相機、燈光、材質及匯入的三維模型，則能與二維元素共同構成場景。

圖表和 Lottie 動畫可用於資料解說或產品展示；音軌、程序化音效及音訊反應訊號能配合視覺運動。這些能力提供可重用的組件，但素材選擇、敘事節奏與成片品質仍需要實際檢查。

從需求到第一支 MP4 的實際流程

1. 按官方入門文件準備 Node.js 22 以上、ES 模組專案和相容的圖形後端，先完成文件要求的原生相依套件安裝腳本授權。
2. 若使用 AI 代理，安裝官方技能後，明確交代畫面文字、長度、長寬比、已有素材及輸出目標。可以先完成短標題卡，再加入更多場景。
3. 將主題設定、場景與算圖腳本分開。註冊真正的字型檔，確認圖片、影片和音樂能被讀取；Git LFS 素材要下載完整內容，不能只有指標檔。
4. 依序檢查型別、關鍵時間的 PNG 和影格網格，再用本機預覽確認動作與聲音。預覽支援拖曳時間、逐格查看及在畫面上留下修改註記。
5. 啟用 QA 匯出 MP4，閱讀檢查結果，並播放最後檔案確認文字、轉場與音畫關係。

本機視覺模型的用途與檢查限制

ONNX 模型可進行物件偵測、實例分割、姿態估計與人物遮罩，例如讓標籤跟隨主體或把人物分離出來。模型第一次使用時下載，之後儲存在本機快取。

算圖期間的 withVision 讀取前一個已完成影格的分析，第 0 格沒有結果。檢查這種效果時，要看連續影格或匯出影片，不能只使用時間相隔很遠的網格截圖。官方另有按需分析來源素材的方式，使用時應分清楚時序；詳見視覺處理文件。

硬體、部署與 beta 階段

原生 WebGPU 算圖省去無頭 Chromium 截圖流程，但仍依賴相容的圖形環境。部分支援環境可用軟體算圖，速度會較慢。產品目前仍是 beta，適合先固定套件版本並以真實素材測試；單一電腦的示範成績無法代表所有場景。

另外可自行部署算圖 worker，讀取 Git 專案與指定版本，再把結果送往設定的儲存位置。這需要額外基礎設施，並不等同於免費託管服務。願意使用開發工具、需要重複修改版型的團隊較容易採用這套流程。

開源授權、成本與資料處理

2026 年 10 月 21 日核實：專案使用 Apache-2.0 授權。AI 代理訂閱、硬體、雲端運算、儲存和素材權利都應另外評估。未查證到統一的託管算圖價格或每月免費額度，因此不作保證。開源引擎的授權也不涵蓋你另外加入的字型、音樂、影像與模型。

官方技能是說明文件，本身不主動傳送資料；這不能代表外部 AI 代理或你部署的伺服器也採用相同政策。若有機密素材，應確認實際使用的代理、算圖主機與儲存服務各自會接收哪些檔案。

常見問題

可以讓 AI 代理協助，不自己寫完全部程式嗎？

可以。官方技能說明如何編寫與修正 TypeScript 場景，但執行環境、素材與畫面驗收仍然必要。

能匯出與檢查哪些結果？

文件中的流程支援 PNG 單格、影格網格和 MP4。普通動畫可搭配本機預覽檢查聲音；視覺追蹤效果則應看連續影格或成片。

開源是否等於影片製作完全免費？

不等於。AI 服務、主機、素材授權與儲存可能各有費用。先用短專案驗證自己的流程，再估算持續製作的成本。

官方資源與開發者社群

• 代理技能與工作流程：安裝及編寫、檢查、匯出指引。
• GitHub 原始碼與範例：參考專案和問題回報。
• 官方 Discord：社群討論。
• Gatewai YouTube 頻道：觀看示範影片。