動態字體設計（Kinetic Type） 是做什麼的？
當影片中出現文字時，腦中浮現的常見動畫是淡入、滑入與彈出。這些效果本身沒問題，但只是預設而非真正選擇。本技能將約80種技術（分屬18個家族）擺在面前，讓選擇成為真正的決定。
它負責提醒，而非主導。它不會為你原本的工作增加任何步驟、頁面或審核程序。
創意自由優先
此處所有內容皆為預設或建議，絕非規則。當某個時刻需要其他效果時，請打破預設，並用一句話說明原因（在計畫、程式碼註解或回覆中說明）。不在選單中的技術同樣歡迎使用。選單的存在是為了拓寬選擇，而非限制創意。
根據當下情境與意義選擇
在決定文字如何移動之前，先閱讀文字本身。問問這行文字在「做什麼」，然後選擇意義相符的技術：
| 文字行為... | 選擇 |
|---|---|
| 分割、打斷或分離某物 | slice, shatter |
| 找出答案或揭露祕密 | scramble |
| 重擊落地或倒數 | stomp |
| 首次定義或書寫某個詞語 | stroke-write-on, marker-highlight |
| 顯示數字變化 | odometer |
| 描述某物消失 | disintegrate, smoke-dissolve |
| 追隨圖表或方程式 | text-on-a-path, sine-wave-type |
選單中的「適用情境」欄位正是為此問題而設。
變化程度
- 教學模式（課程與解說影片的預設模式，以及使用者在請求中未明確指定時）：為每一行普通文字使用一套統一風格，從標記為平靜的技術中挑選；再為關鍵時刻（關鍵詞、答案、警告）保留少數強調效果。標記為教學的技術適合做強調效果。少數強調效果比大量使用更有效。
- 自由發揮（當使用者要求「要有創意」、「盡情發揮」、「給我驚喜」時）：選單內的所有技術皆可使用，但仍需根據意義選擇。自由不代表要用很多種。一個大膽且精心挑選的效果勝過十種平庸的效果。
- 如果影片明顯不是教學類型（如音樂錄影帶、預告片），且未指定模式，請選擇適合的風格並說明你的選擇。
收尾與檢查
- 快速移動時加上動態模糊。 電腦動畫過於銳利，因此快速移動的文字可能顯得跳動。在移動方向上加一點模糊，可營造實景拍攝的效果。Remotion 提供動態模糊工具（
@remotion/motion-blur），請以與專案 Remotion 完全相同的版本安裝，方式與「在 Remotion 中建構」部分的套件相同（npm i -E @remotion/motion-blur@<版本>）。作為收尾步驟使用於快速移動；慢速飄移時使用只會顯得失焦。 - 連寫文字會破壞逐字效果。 在阿拉伯語、波斯語等字母形狀會隨鄰近字母改變的語言中，將單字拆解為字母（如 cascade、scramble、anagram、random-order pop-on、3D flip-in）會破壞字形。請改為對整個單字或整行進行動畫。
- 確認字型包含所需的音調符號。 對於南非荷蘭語等帶有音調符號的拉丁文字，請在動畫前確認字型包含所需字母（ê、ë、ô、ï...）。
使用選單
在選擇之前，請先開啟 references/menu.md（位於本技能資料夾內）。選單列出所有技術，按家族分組，包含：
- 名稱與 id（
KT_COMPONENTS中的鍵） - 一行外觀描述與適用情境提示
- 標籤：平靜（適合統一風格）、教學（適合教學強調效果）、退出（結尾時文字消失，適合行尾或場景結束）、✚ 新增
- 建構方式：
component（現成組件）或example（附註解的可調整場景，路徑已標示）
瀏覽家族標題，然後閱讀符合當下情境的家族中的行項目。
references/catalogue.md 為背景資料：選單背後的研究、來源、歷史及各技術的實作難度。僅在需要深入了解時開啟。
在 Remotion 中建構
- 將此技能資料夾中的
remotion/目錄複製到專案中，命名為src/kinetic-type/。 - 確保專案中已安裝
remotion、@remotion/google-fonts和@remotion/layout-utils，且版本與專案的 Remotion 版本完全一致（Remotion 要求所有套件使用同一版本）。例如，若版本為 4.0.536：npm i -E @remotion/[email protected]（-E會儲存確切版本，而非^4.0.536）。 - 根據選單中的 id 查詢組件，並在
<Sequence>中渲染：
import { Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
const House = KT_COMPONENTS["tracking-in"];
const Accent = KT_COMPONENTS["slice"];
export const Intro: React.FC = () => (
<>
<Sequence durationInFrames={75}>
<House text="Every whole can be shared" />
</Sequence>
<Sequence from={75} durationInFrames={60}>
<Accent text="Split it in half" keyWord="half" />
</Sequence>
</>
);
- 屬性（
KTProps）：text（必要）、keyWord（獲得強調效果）、fontFamily（預設 Poppins）、color、accent、fontSize（預設為符合畫面寬度）。 - 每個組件在其
<Sequence>的第 0 影格開始，並在大約一秒內完成動畫，因此 Sequence 的長度決定了文字停留的時間。有兩種情況行為不同：退出技巧在 Sequence 的最後一影格時文字會消失；而聲音節奏類（家族 15）則將文字分散在整個 Sequence 中，因此其長度決定了文字出現的節奏。 - 對於
example類型的技術，請開啟選單中指定的檔案並調整場景。 - 其他影片工具：選單與選擇方式仍然適用，但現成組件僅限於 Remotion。
觀看效果，或導演整部影片
- **畫廊：**所有技術的即時預覽，網址為 https://dricosnyman.github.io/kinetic-type-skills/
- **整部影片或逐行導演：**當任務是根據腳本製作一整部動態字體影片，或使用者希望在動工之前規劃、審查與核准每行的字體設計時，請使用
kinetic-type-director技能。該技能會執行完整流程，並以此技能為基礎：它會草擬字體腳本、顯示在可編輯的頁面上，然後使用這些組件建構核准的版本。