Communitygithub.com

isometric (等角透視風格)

以冷靜、精準的產品線稿風格渲染影片,採用 2:1 雙軸等角透視,並搭配固定 2px 的極細線條。

isometric (等角透視風格) 是什麼?

這個技能提供了一個名為「isometric」的動態解說風格,專門用於生成冷靜、精準的產品線稿風格動畫。它嚴格遵循 2:1 雙軸等角透視,使用恆定的 2.0px 極細線條(在 1080 寬度基準下),並以白色填充面來實現近物遮蓋遠線的效果。主要特色包含圓角厚板、堆疊圖層、以及按鍵、散熱孔、柱體和連接埠等重複零件的網格排列。每個影格僅允許一個微小的深色強調色,動態則以「一拍一」搭配彈簧緩動為主。此風格支援 Remotion 與 fframes 兩種渲染引擎,並提供如 `<IsometricGrid>`、`<IsometricBlock>`、`<IsometricBanner>` 等專用元件,適合用於技術插圖、爆炸圖、或需要乾淨、文檔級圖示的場景。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/boytegar/motion-skills/tree/HEAD/style/isometric

在你喜歡的 AI 中提問

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

說明文件

冷靜、精準的產品線稿,採用 2:1 雙軸等角透視、固定極細線條與彈簧緩動效果。

這是動態解說函式庫中的一種風格。它與其他風格一樣,包含三個基本組件:一個 style.json 清單、一個 Remotion 引擎,以及一個 fframes 引擎。所有流程技能(motion-explainer、motion-script、motion-storyboard、motion-build、motion-qa)皆透過 $MOTION_STYLE 環境變數來指定風格名稱,因此選擇此風格時,工作流程中的其他部分無需變動。

使用時機

當案件需求符合下列風格 DNA 時,請選用此風格。請務必優先閱讀 docs/style-guide.md:該文件為權威指南,本文件僅為索引。

風格 DNA

  1. 僅限 2:1 雙軸等角透視,不使用其他透視法。
  2. 在 1080 寬度下,固定使用 2.0px 極細線條,並依據當前縮放比例調整,確保線條永不變粗。
  3. 面以白色填充,使較近的物體能遮蓋較遠物體的線條。
  4. 使用具有可見厚度的圓角厚板與平板,並包含堆疊圖層及按鍵、散熱孔、柱體、連接埠等重複零件的網格。
  5. 每個影格僅有一個微小的深色強調色,不得更多。動態部分採用「一拍一」搭配彈簧緩動,其餘保持靜止。

色板:底色 #ffffff,輪廓與邊緣 #a4a4ac,內部及後退線條 #e0e0e4,面為白色,一個深色強調色 #2a2b36

套件元件

Remotion,可從 ../lib/<file> 匯入(套件會同步到每個專案的 src/lib/ 目錄):

元件說明
<IsometricGrid>淡出的等角輔助網格
<IsometricBlock x y w h d color>一個具有頂面、左面與右面,且角度正確 (2:1) 的厚板
<IsometricBanner text>極細線條的標題板
<IsometricCaptions text>深色字幕條

沒有東西在真空中沸騰

docs/style-guide.md 包含了經過測量的參考線條粗細與強調色規則。線條粗細是不可妥協的;繪製前請務必閱讀該文件。

引擎

引擎路徑入口
remotionremotion/template/、kit/、sync_kit.sh、CATALOG.md、AGENT_BRIEF.md
fframesfframes/Cargo.toml、src/ (lib, tokens, kit, look, video, main)、tools/ff.sh

已註冊引擎:remotion、fframes。

建立新段落

# 從函式庫根目錄執行,並確保 MOTION_LIB 已設定
./core/new_episode.sh <系列目錄> 01-slug Episode 輸出名稱 --style isometric --engine remotion
./core/new_episode.sh <系列目錄> 01-slug Episode 輸出名稱 --style isometric --engine fframes

或者,在系列的 SERIES.md / episode.json 中將風格名稱設為 "style": "isometric",讓 motion_style_of 自動選用。

此風格的品質確認

在認定場景完成前,請針對每張連絡表檢查以下項目;motion-qa 中的其他檢查項目仍適用。

  • 每個形體皆位於 2:1 等角軸線上;無透視或 3/4 視角。
  • 線條粗細恆定約為 2px;較近的面能隱藏較遠的線條。
  • 面為白色;底色為白色或指定的深色底色。
  • 每個影格僅有一個微小的深色強調色。
  • 動態為「一拍一」搭配彈簧緩動,而非「一拍二」。

檔案

  • docs/style-guide.md
  • docs/style-prompt.md
  • remotion/CATALOG.md
  • remotion/AGENT_BRIEF.md
  • style.json:清單(畫布、引擎列表、文件路徑、音訊根目錄)
  • sample.png:一個代表性影格

Individual skills in this repo

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

相關技能