MBehtemam/montagent-skills

動態圖形和標題

由形狀、靜止圖片和文字構成的片段食譜。它們會嵌入到 montagent 的循環中的建置步驟；如果尚未加載，請先加載 montagent。

在規劃之前，請打開與片段類型對應的參考文件：

片段類型	打開文件
啟動片段、產品或社群廣告、開場、結尾	啟動片段結構
標誌揭示、標誌片頭、任何循環內容	標誌循環
預告片，或任何撞擊、故障、閃爍或 HUD 效果	預告片特效

對於一個新的片段或重新設計，在選擇佈局之前，請先閱讀創意方向。它涵蓋了原生 Montagent 中的視覺概念、構圖和編排。對於特定的編輯，只需閱讀相關食譜並保留現有方向。

在節拍表上規劃

在編寫任何元素之前，請先編寫節拍表：一個表格，包含每個入場、顏色變化、剪輯和出場，每個事件對應 montagent-craft 提供的網格的一個節拍（其速度、強拍、影格捕捉，以及哪些事件落在節拍上）。

使用生成器腳本從節拍表建置專案，以便重新計時只需一行編輯。

食譜

每個食譜提供的都是起始範圍，而非最終答案。每個食譜都以一個查看步驟結束：加載 montagent-craft，然後在繼續之前查看步驟指定的位置。

彈跳

一種帶有微小過衝並最終穩定的入場方式。過衝是曲線：一對帶有貝塞爾曲線的關鍵影格，其 y 值高於 1，而不是三個關鍵影格。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/pop.mp4",
  "tracks": [
    {"name": "badge", "layer": 10, "elements": [
      {"id": "badge", "type": "ellipse", "start": 500, "end": 2000, "x": 960, "y": [{"t": 500, "v": 580}, {"t": 900, "v": 540, "ease": [0.34, 1.56, 0.64, 1]}], "origin": "center", "width": 240, "height": 240, "fill": "#FF5A36", "scale": [{"t": 500, "v": [0.5, 0.5]}, {"t": 900, "v": [1.0, 1.0], "ease": [0.34, 1.56, 0.64, 1]}]}
    ]}
  ]
}

• 長度： 300–450 毫秒。較短者乾脆，較長者飄逸。
• 起始縮放： 文字和卡片為 0.5–0.7；小形狀和徽章為 0。
• 過衝： [0.34, 1.56, 0.64, 1] 峰值約超出 10%。將其第二個數字提高到 1.8 可獲得俏皮感，或降低到 1.3 可獲得更專業的感覺。在一個片段中，為每個彈跳保持一個曲線。
• 上升： 使用相同曲線在 y 上移動 20–60 像素可增加重量感。對於排成一排的彈跳，跳過此項。
• 交錯： 每個項目落在自己的節拍上時為一個節拍；一個節拍內的項目之間為 60–120 毫秒。
• 查看： frame 在開始後加上長度的 40% 處，即過衝達到峰值時，檢查是否有任何內容超出影格邊緣或與相鄰元素重疊。然後使用 preview 預覽從第一個彈跳之前到最後一個彈跳之後的範圍。

保持，然後清除

入場的最後一個關鍵影格已經保持，因此保持不增加成本。出場從一個關鍵影格開始，該關鍵影格的值為保持值，時間點為出場開始的瞬間。validate 會將該關鍵影格報告為 R-EASE-INERT，並且結果指南會解釋這是預期的。

• 出場長度： 200–350 毫秒，ease-in。出場比入場更快。
• 出場移動： 淡出加上 20–40 像素的移動，或縮小到 0.9。對於硬剪輯，使用單個 step 關鍵影格到新值（請參閱入門專案的標題）。
• 保持長度： montagent-craft 提供的閱讀時間。
• 群組出場： 整個群組一起離開，或按閱讀順序交錯 30–60 毫秒。
• 查看： frame 在出場前的最後一個繪製影格處，並檢查整個群組是否完全進入並處於靜止狀態。

單詞上的顏色變化

使用 highlight 在其行的某個單詞的運行上重新著色，從節拍開始。這保持了單個元素：沒有第二個副本用於交叉淡入淡出，並且元素本身的顏色保持為該行的顏色。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 3000, "output": "out/accent.mp4",
  "fonts": {"title": [{"file": "fonts/Inter-Bold.ttf"}]},
  "fontVendor": {"fonts/Inter-Bold.ttf": {"licence": "OFL-1.1", "source": "https://github.com/rsms/inter", "sha256": "288316099b1e0a47a4716d159098005eef7c0066921f34e3200393dbdb01947f"}},
  "tracks": [
    {"name": "line", "layer": 20, "elements": [
      {"id": "line", "type": "text", "start": 0, "end": 3000, "x": 960, "y": 540, "origin": "center", "width": 1600, "height": 140, "font": "title", "size": 110, "color": "#F5F0E6", "align": "center", "runs": [{"text": "Video your agent can "}, {"text": "read.", "highlight": {"start": 2000, "end": 3000, "color": "#FF5A36"}}], "caption": false}
    ]}
  ]
}

• 時機： 變化發生在節拍上，而不是單詞的入場時。給眼睛至少半個節拍的時間先閱讀該單詞。
• 強調： 當單詞是其自己的元素時，在同一節拍上的縮放凸起（1.0 到 1.06–1.1，然後在 200–300 毫秒內恢復）可以使變化更加突出。
• 查看： frame 在變化前後各一影格，並檢查只有該單詞發生了變化。

動態和打字文字

當每個字母、單詞或行在常規步長（every 毫秒）上共享一個運動曲線時，保留一個 text 元素並使用 units 對其進行交錯（by：letter、word 或 line；order：forward、reverse、center_out 或 edges_in）。以下是一個標題從中心向外聚焦顯現的例子：

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/evaporate.mp4",
  "fonts": {"title": [{"file": "fonts/Inter-Bold.ttf"}]},
  "fontVendor": {"fonts/Inter-Bold.ttf": {"licence": "OFL-1.1", "source": "https://github.com/rsms/inter", "sha256": "288316099b1e0a47a4716d159098005eef7c0066921f34e3200393dbdb01947f"}},
  "tracks": [
    {"name": "title", "layer": 20, "elements": [
      {"id": "evaporate", "type": "text", "start": 0, "end": 2000, "x": 960, "y": 540, "origin": "center", "width": 1400, "height": 160, "font": "title", "size": 108, "color": "#F5F0E6", "align": "center", "runs": [{"text": "SHARP FOCUS"}], "units": {"by": "letter", "order": "center_out", "every": 45, "y": [{"t": 0, "v": 20}, {"t": 360, "v": 0, "ease": "ease-out"}], "opacity": [{"t": 0, "v": 0}, {"t": 360, "v": 1, "ease": "ease-out"}], "blur": [{"t": 0, "v": 24}, {"t": 360, "v": 0, "ease": "ease-out"}]}, "caption": false}
    ]}
  ]
}

• 蒸發 / 光學對焦（blur）： 在 units 內部將 blur 從 16–32 像素關鍵影格到 0，持續 300–450 毫秒（ease-out），並與 opacity（0 -> 1）和一個小的 y 上升（16–28 像素 -> 0）或 scale（[1.08, 1.08] -> [1.0, 1.0]）配對。一旦 blur 達到 0 且 opacity 達到 1，渲染器將採用快速路徑，沒有額外的圖層成本。
• 對稱順序（center_out、edges_in）： center_out 從中間單元（或計數為偶數時的中間對）開始，並逐步向兩端移動；edges_in 從第一個和最後一個單元同時開始，並向中間匯聚。
• 行進波（A -> peak -> A）： 取代 After Effects 範圍選擇器（triangle、round 或 smooth），在 units 中編寫一個三關鍵影格的返回曲線——例如 "y": [{"t": 0, "v": 0}, {"t": 180, "v": -28, "ease": "ease-out"}, {"t": 360, "v": 0, "ease": "ease-in-out"}]（或一個 scale / blur 脈衝）——並讓 every 將峰值波紋傳播到整行。要單獨處理一個具有自訂時機的單詞或字母，請使用 unit 將其拆分到自己的運行中。
• 將字形保留為 text（切勿將字形轉換為 path）： path 元素只有一個輪廓（沒有 holes 的 points），因此將多輪廓字形（O、A、B、8、i、?、%）轉換為 path 會填充內部計數器或丟失孤島（ADR-0224）。將文字保留為 text，並使用 stroke、units、path 和 effects 對其進行樣式設定或動畫處理。
• 不規則的節拍時間或打字游標（scripts/type_on.py）： 當單詞落在不規則的節拍時間戳上，或字母需要步進式 cursor 時，運行 python3 scripts/type_on.py <project> <spec>（--help 查看規範）。它使用 measure 測量該行，並為每個單元發射一個 text 元素（"by": "word" 搭配 "enter": "pop" 和 times / highlights，或 "by": "letter" 在 60–150 毫秒的間隔內帶有閃爍的 cursor），將每個標記為 caption: false。
• 追蹤標題： 不要將標題拆分為字母。編寫一個帶有 letter_spacing 的 text 元素，單位為千分之一 em（每個字母後像素為 size × letter_spacing / 1000；負值會收緊）。對其進行關鍵影格設定以使標題分開："letter_spacing": [{"t": 0, "v": 0}, {"t": 800, "v": 120, "ease": [0.65, 0, 0.35, 1]}]。任何非零值都會關閉可選連字，並且連字腳本（例如阿拉伯語）不會進行間距調整。
• 垂直列和側向脊線： Montagent 沒有 writing_mode 屬性（ADR-0224）。對於垂直堆疊列（CJK 垂直文字或堆疊跑馬燈），在一個狹窄的 text 框中用 \n 連接字素（"text": "東\n京\n都"），並使用 "align": "center" 和 "line_height": 1.0 或 1.1；將 2-3 個水平數字或拉丁字母縮寫保留在一行上（"text": "第\n25\n回"，Tate-chu-yoko），並使用 "by": "line" 進行交錯，以便水平數字作為一個單元移動。對於側向拉丁脊線，設定一個水平的 text 元素並使用 "rotation": -90（從下往上讀）或 "rotation": 90（從上往下讀）對其進行旋轉。
• 查看： preview 該行出現的範圍。然後在靜止時 frame 它，並檢查間距是否讀起來像一行，且在單詞或字母邊界處沒有更寬的間隙。

透過擦除揭示

擦除透過在其上滑動一個邊緣來揭示某些東西。在該東西之上放置一個遮蓋物：一個填充了該東西背後精確內容的矩形。然後圍繞遮蓋物的遠邊收縮它，使其近邊掃過該東西。一個騎在該邊緣上的強調條使擦除看起來是有意為之。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/wipe.mp4",
  "tracks": [
    {"name": "mark", "layer": 10, "elements": [
      {"id": "mark", "type": "image", "start": 0, "end": 2000, "source": "media/still.png", "x": 960, "y": 540, "origin": "center", "width": 360, "height": 360, "fit": "contain"}
    ]},
    {"name": "occluder", "layer": 11, "elements": [
      {"id": "occluder", "type": "rect", "start": 0, "end": 1000, "x": 1160, "y": 540, "origin": "center-right", "width": 400, "height": 400, "fill": "#101418", "scale": [{"t": 400, "v": [1.0, 1.0]}, {"t": 900, "v": [0.0, 1.0], "ease": [0.65, 0, 0.35, 1]}]}
    ]},
    {"name": "edge", "layer": 12, "elements": [
      {"id": "edge", "type": "rect", "start": 400, "end": 1000, "x": [{"t": 400, "v": 760}, {"t": 900, "v": 1160, "ease": [0.65, 0, 0.35, 1]}], "y": 540, "origin": "center", "width": 16, "height": 420, "fill": "#FF5A36", "opacity": [{"t": 900, "v": 1.0}, {"t": 1000, "v": 0.0, "ease": "ease-in"}]}
    ]}
  ]
}

• 長度： 400–600 毫秒，[0.65, 0, 0.35, 1]：一個開始和結束都平穩的掃動。
• 遮蓋物： 在每一邊都比該東西大 20–40 像素，並且與其後的地面填充相同。起始關鍵影格位於擦除開始的位置，因此該東西到那時為止一直被遮蓋。
• 邊緣條： 寬 8–24 像素，比遮蓋物高 5–10%，在相同的曲線和時間上移動。它在掃動完成後用 100–200 毫秒離開。
• 方向： 沿閱讀方向擦除；要擦除消失，從近邊開始重新擴大遮蓋物。
• 繁忙的背景： 遮蓋物僅在純色背景上有效。在照片、漸層或影片片段上，改為對元素自己的 mask 進行關鍵影格設定：{"name": "mask", "shape": "rect", "x": 0, "y": 0, "width": [{"t": 400, "v": 0}, {"t": 900, "v": 400, "ease": [0.65, 0, 0.35, 1]}], "height": 400} 從其左邊緣揭示一個 400 × 400 的元素，無需遮蓋物。矩形是相對於元素自身的，從元素的左上角開始；零 width 的遮罩會隱藏該元素，因此揭示從被遮蓋開始。添加 feather 以獲得軟邊緣。
• 查看： frame 在掃動中途，檢查邊緣條是否正好覆蓋遮蓋物的邊緣；然後 frame 在掃動剛結束後，檢查遮蓋物是否完全消失。

透過推、滑動或擦除進行交接

要以動態方式從一個卡片、靜止圖片或場景移動到下一個，使用類型為 push、slide 或 wipe 的 transition 橋接兩者。對兩個元素進行 x 的關鍵影格設定會在連接處產生漂移；過渡使兩半保持像素級對齊，validate 會檢查這一點。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 3000, "output": "out/handover.mp4",
  "tracks": [
    {"name": "first", "layer": 10, "elements": [
      {"id": "card-1", "type": "rect", "start": 0, "end": 1700, "x": 0, "y": 0, "origin": "top-left", "width": 1920, "height": 1080, "fill": "#FF5A36"}
    ]},
    {"name": "second", "layer": 11, "elements": [
      {"id": "card-2", "type": "rect", "start": 1200, "end": 3000, "x": 0, "y": 0, "origin": "top-left", "width": 1920, "height": 1080, "fill": "#2E86FF"}
    ]},
    {"name": "handover", "layer": 12, "elements": [
      {"id": "handover", "type": "transition", "start": 1200, "end": 1700, "kind": "push", "from": "card-1", "to": "card-2", "direction": "left", "ease": [0.65, 0, 0.35, 1]}
    ]}
  ]
}

• 類型： 當兩者屬於同一條帶時使用 push（頁面、步驟、輪播）；當新的落在一個靜止的上方時使用 slide；當舊的應保持原位並被切掉時使用 wipe。
• 方向： 運動行進的方向。left 從右側帶來新的，這遵循閱讀方向。
• 長度： 400–600 毫秒，[0.65, 0, 0.35, 1]。過渡的 start 和 end 正是兩者重疊的時間。
• 滑動堆疊： 在 slide 中，傳入的元素必須位於更高的 layer 上。
• 查看： frame 在過渡的中間位置

...

[因翻譯原因截斷]