技能展示

技能展示 是做什麼的？

渲染一部按類別逐一展示的動畫技能展示影片（1080x1080，30fps，約 48 秒），並產生一篇 7 則貼文的 X 貼文串，將技能集群對應到具體價值。

快速開始

cd skills-showcase
npm install
npx remotion studio          # 在瀏覽器中預覽
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3

輸出成品

• out/skills-showcase.mp4 — 主要 X 上傳檔案（H.264，約 4.7 MB）
• out/skills-showcase.gif — 備用/預覽用（約 7 MB）
• thread.md — 7 則貼文的 X 貼文稿

架構

src/
├── index.ts                  # registerRoot 入口
├── Root.tsx                  # 合成註冊（1080x1080，30fps，1440 幀）
├── SkillsShowcase.tsx        # 主時間軸，使用 <Series>
├── data/skills.ts            # 型別資料集：類別、技能、衍生聚合
├── scenes/
│   ├── Intro.tsx             # 標題 + 副標題 + 統計數字膠囊（4 秒）
│   ├── CategorySection.tsx   # 類別標籤 + 交錯出現的技能晶片（每個 2.67 秒）
│   └── Outro.tsx             # 摘要指標 + 標語 + 行動呼籲（4 秒）
└── components/
    └── SkillChip.tsx         # 可重複使用的動畫徽章，帶有彈簧入場效果

資料模型

編輯 src/data/skills.ts 以新增或移除技能。影片會根據此資料集可重現地重新渲染。

• 類別（Category）：{ id, label, color, order }
• 技能（Skill）：{ slug, categoryId, shortDescription }
• 衍生資料（Derived）：totalSkills、totalCategories、skillsByCategory

動畫慣例

所有動畫僅使用 Remotion 幀驅動模式：

• useCurrentFrame() 搭配 useVideoConfig() 處理幀數/fps
• spring() 處理入場效果（damping: 200 平滑，damping: 20 + stiffness: 200 輕快）
• interpolate() 搭配 clamp 處理透明度與位移
• 零 CSS transition 或 Tailwind 動畫工具類別

時間軸節奏

場景	幀數	持續時間
開頭	120	4.0 秒
15 個類別 × 80	1200	40.0 秒
結尾	120	4.0 秒
總計	1440	48.0 秒

自訂

• 新增類別：在 src/data/skills.ts 的 categories 陣列中新增，並更新 Root.tsx 的持續時間
• 更改顏色：每個類別在資料集中有 color 十六進位色碼
• 調整節奏：修改 SkillsShowcase.tsx 中的 CATEGORY_DURATION
• 貼文稿：直接編輯 thread.md

貼文串策略

詳細的 7 則貼文請參閱 thread.md。結構如下：

1. 鉤子 + 影片附件
2. 為什麼技能勝過一次性提示
3. 意識與記憶集群
4. 研究與分析集群
5. 全端實作涵蓋範圍
6. 小眾高訊號專業技能
7. 行動呼籲與討論提問