115 OJT 創新專案

Claude Code 部門導入動畫簡報專案

閱讀時間約 14 分鐘

Claude Code 部門導入動畫簡報專案

目標：用 animated-deck（React + Framer Motion）製作 3/4 部門導入提案的動畫簡報，同時製作 Remotion 課程介紹範本作為 live demo 素材。簡報本身就是 AI 能力的 meta-demo。 為什麼現在做：3/4 會議用（deadline: 3/3 部署完成） 專案路徑：~/Documents/animated-deck/（簡報）、~/Documents/remotion-tutorial/（Remotion 範本） 部署目標：animated-deck.pages.dev（Cloudflare Pages） 上層專案：Claude Code 部門導入提案會議

背景知識

animated-deck 框架

既有的動畫簡報框架，React 19 + Framer Motion 12 + Vite 7 + TypeScript。

核心機制——Step-based Navigation：

  • 每頁 slide 是一個 React Component，包在 <Deck> 容器裡
  • 每頁可以宣告 sub-steps（透過 useStep(n) hook）
  • 按右鍵/Space：先走完當前 slide 的所有 steps，再進下一頁
  • 按左鍵：退回上一步/上一頁

可複用元件（都在 src/components/）：

元件用途Step 控制
AnimatedList逐條出現的列表useStep(items.length + 1)
AnimatedDiagram線性架構圖（A→B→C）useStep(boxes*2-1 + 1)
CompareTable兩欄比較表useStep(rows.length + 1)
Counter數字動態計數無（viewport 觸發）
Quote引用語無（自動 fade in）
CodeBlock語法高亮程式碼useStep(lines + 1)

動畫 Presets（src/components/presets.ts）：

  • fadeUp：下→上 fade in（0.5s）
  • fadeLeft / fadeRight：左/右 slide in（0.4s）
  • scaleIn：縮放 0.85→1（0.45s）
  • fade：純透明度（0.5s）
  • stagger(delay)：子元素交錯出現

基礎架構：ProgressBar、Timer、PresenterView（BroadcastChannel 同步）、SlideOverview（按 O 看縮圖）、ThemeToggle（深色/淺色）。

寫新 slide 的模式：

import { motion } from "framer-motion";
import Slide from "../components/Slide";
import { useStep } from "../components/DeckContext";
import { fadeUp } from "../components/presets";
 
export default function MySlide() {
  const step = useStep(3); // 宣告 3 個 sub-steps
  return (
    <Slide>
      <motion.h2 {...fadeUp}>標題</motion.h2>
      {step >= 1 && <motion.p {...fadeUp}>第一點</motion.p>}
      {step >= 2 && <motion.p {...fadeUp}>第二點</motion.p>}
    </Slide>
  );
}

整合到 App.tsx：

<Deck notes={notes}>
  <MySlide />
  ...
</Deck>

notes 是 Record<number, string>，key 是 slide index（0-based），value 是 presenter notes。

Remotion 課程範本

Remotion 4.0.429 + React 19 + Tailwind CSS v4。已有 GreetingCard 作為 props-driven composition 的參考模式：

Props Schema 模式（zod 4.3.6 已安裝）：

export const schema = z.object({
  name: z.string(),
  color: z.string().default("#38bdf8"),
});
type Props = z.infer<typeof schema>;
export const Component: React.FC<Props> = ({ name, color }) => { ... };

多場景模式（參考 WhatIsZettelkasten）：

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <Scene1 />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={fade()}
    timing={linearTiming({ durationInFrames: 15 })}
  />
  <TransitionSeries.Sequence durationInFrames={60}>
    <Scene2 />
  </TransitionSeries.Sequence>
</TransitionSeries>

部署

animated-deck：非 git repo，無 wrangler.toml。部署方式為 wrangler pages deploy dist/ --project-name=animated-deck。

Remotion：不需部署，本機 npm run dev 開 Remotion Studio 即可 live demo。

龍騰品牌色

無官方品牌色規範。Remotion 範本使用教育產業紅色系 #C41E3A 作為主色，props 中 accentColor 可覆蓋。

功能規格

A. 動畫簡報（13 頁）

#Slide核心訊息演講時間
1TitleClaude Code 部門導入提案30s
2Pain Points4 個部門痛點2 min
3Solution”已驗證可行” + 4 能力卡片2 min
4Slack Bot4 功能 + “不離開 Slack”3 min
5Slack ProCanvas/List/Workflow → 取代 Jira3 min
6Remotion影片自動生成 + JSON-driven2 min
7Live Listen即時轉錄 + 硬體限制2 min
8Automation自動蒐集/DM/晚安報告2 min
9ArchitectureHub-spoke 本機架構3 min
10Cost成本比較 NT$0 → NT$2,500-6,5002 min
11RolloutPhase A/B/C2 min
12Meta Demo”這簡報就是 AI 做的”1 min
13End下一步 + Q&A30s

總 steps 估算：~55 次按鍵（45 分鐘演講 + 15 分鐘 Q&A）

B. Remotion 課程介紹範本

Props-driven 課程介紹影片，4 場景，~10 秒（300 frames @30fps）。

Props Schema：

欄位類型說明
courseNamestring課程名稱
instructorstring講師名
categorystring分類標籤（如「前端開發」）
durationstring時長（如「6 小時 30 分」）
outlinestring[]課程大綱（3-5 項）
accentColorstring主色調（default: C41E3A）

技術架構

新增元件（2 個）

1. src/components/FeatureGrid.tsx

2×2 卡片格線，每張卡片逐步出現。用於 S03（Solution）、S04（Slack Bot）。

interface FeatureItem { icon: string; title: string; desc?: string }
interface FeatureGridProps { items: FeatureItem[]; columns?: 2 | 3 }
// useStep(items.length + 1)：step 0 = title only，1-N = 每張卡片

動畫：scaleIn style（opacity 0→1, scale 0.85→1），stagger 感但由 step 控制。 佈局：CSS Grid grid-template-columns: repeat(columns, 1fr)，gap 1.5rem，max-width 800px。 卡片樣式：圓角、surface 背景色、accent 左邊框。

2. src/components/HubSpokeDiagram.tsx

中心 hub + 放射狀 spokes，SVG 連線。用於 S09（Architecture）。

interface HubSpokeProps {
  hub: { label: string; color: string; sub?: string }
  spokes: { label: string; color: string; sub?: string }[]
}
// useStep(spokes.length + 2)：step 1 = hub，2-N+1 = 每個 spoke + 連線

佈局：固定 600×400 容器，hub 置中，spokes 用三角函數均勻分佈（Math.cos/sin）。 連線：SVG <line> 從 hub 中心到 spoke 中心，stroke 動畫（scaleX 0→1）。 Box 樣式：復用 AnimatedDiagram 的圓角 box 樣式。

檔案變更清單

新增：

  • src/components/FeatureGrid.tsx
  • src/components/HubSpokeDiagram.tsx
  • src/slides/S01_Title.tsx
  • src/slides/S02_PainPoints.tsx
  • src/slides/S03_Solution.tsx
  • src/slides/S04_SlackBot.tsx
  • src/slides/S05_SlackPro.tsx
  • src/slides/S06_Remotion.tsx
  • src/slides/S07_LiveListen.tsx
  • src/slides/S08_Automation.tsx
  • src/slides/S09_Architecture.tsx
  • src/slides/S10_Cost.tsx
  • src/slides/S11_Rollout.tsx
  • src/slides/S12_MetaDemo.tsx
  • src/slides/S13_End.tsx

修改：

  • src/App.tsx（替換 imports + notes）
  • index.html（加 Google Fonts + 改 title）

刪除：

  • src/slides/TitleSlide.tsx
  • src/slides/ConceptSlide.tsx
  • src/slides/DiagramSlide.tsx
  • src/slides/CodeSlide.tsx
  • src/slides/StatsSlide.tsx
  • src/slides/CompareSlide.tsx
  • src/slides/QuoteSlide.tsx
  • src/slides/EndSlide.tsx

Remotion（新增）：

  • ~/Documents/remotion-tutorial/src/CourseIntro.tsx
  • ~/Documents/remotion-tutorial/src/Root.tsx（修改，加 Composition 註冊）

環境變數

無需額外環境變數。Cloudflare 部署用 wrangler pages deploy。

Phase 1：新增元件

目標：FeatureGrid 和 HubSpokeDiagram 可用

  • 1.1 建立 src/components/FeatureGrid.tsx
    • 檔案：~/Documents/animated-deck/src/components/FeatureGrid.tsx
    • 做法：CSS Grid 卡片格線 + useStep 逐步顯示 + scaleIn 動畫
    • 驗證：在任意 slide 中 import，npm run dev 看卡片逐步出現
  • 1.2 建立 src/components/HubSpokeDiagram.tsx
    • 檔案：~/Documents/animated-deck/src/components/HubSpokeDiagram.tsx
    • 做法：相對定位容器 + SVG 連線 + 三角函數佈局 spokes + useStep
    • 驗證：在任意 slide 中 import，看 hub 和 spokes 依序出現

Phase 驗證：兩個元件都能在 dev server 中正常渲染和 step 切換。

Phase 2：建立 13 頁投影片

目標：所有 slide 內容完成，可在 dev server 中完整瀏覽

  • 2.1 建立 S01_Title.tsx — 標題頁
    • 內容：「Claude Code 部門導入提案」+ 龍騰文化技術部 + 2026/3/4
    • 動畫：fadeUp（標題）→ fadeUp delay（副標）→ fade delay（日期）
    • Steps：0（純自動動畫）
  • 2.2 建立 S02_PainPoints.tsx — 痛點頁
    • 內容：Sprint 人工追蹤 / Story 拆解靠經驗 / 知識散落 / 重複工作
    • 元件：AnimatedList（4 items）
    • Steps：5
  • 2.3 建立 S03_Solution.tsx — 解決方案頁
    • 內容：Quote「已驗證可行」+ FeatureGrid 4 張能力卡
    • 卡片：Slack Bot / 影片生成 / 會議紀錄 / 自動化
    • Steps：5（0=quote, 1-4=卡片）
  • 2.4 建立 S04_SlackBot.tsx — Slack Bot 頁
    • 內容：4 功能卡片 + 底部 key message
    • 卡片：@mention / Thread 摘要 / 知識庫 / DM 對話
    • Key message：「不離開 Slack 就能跟 AI 對話」
    • Steps：6（0=title, 1-4=卡片, 5=key message）
  • 2.5 建立 S05_SlackPro.tsx — Slack Pro 願景頁
    • 內容：Canvas + List + Workflow + Template / API 需 Pro / prompt 生成管理系統 / 取代 Jira / 其他主題
    • 做法：useStep 直接控制異質內容
    • Steps：5
  • 2.6 建立 S06_Remotion.tsx — 影片生成頁
    • 內容：課程介紹自動生成 / JSON-driven / 100門課改JSON / 3D 能力
    • 元件：AnimatedList
    • Steps：5
  • 2.7 建立 S07_LiveListen.tsx — Live Listen 頁
    • 內容：即時語音轉錄 / 單人：筆電麥克風 / 多人：全局收音器材（警告樣式）/ 產出
    • 做法：useStep 直接控制，警告用 amber accent 樣式
    • Steps：5
  • 2.8 建立 S08_Automation.tsx — 自動化頁
    • 內容：FB 社團掃描 / PTT+Pro360 / 自動評估+DM / 每日晚安報告
    • 底部 Quote：「睡覺時 AI 在工作」
    • 元件：AnimatedList + Quote 組合
    • Steps：5
  • 2.9 建立 S09_Architecture.tsx — 架構頁
    • 內容：Hub=Matt’s Laptop / Spokes=Slack Bot, Remotion, Knowledge Base, Jira API
    • 底部註解：非 GCP（Anthropic TOS），擴展用 API Key
    • 元件：HubSpokeDiagram + useStep 控制註解
    • Steps：7（1=hub, 2-5=spokes, 6=註解）
  • 2.10 建立 S10_Cost.tsx — 成本頁
    • 內容：先導期 NT$0 / 擴展期 NT$2,500-6,500 / 對比兼職助理 NT$15,000+
    • 底部：24/7、可擴展、不忘 context
    • 元件：CompareTable + Counter
    • Steps：4
  • 2.11 建立 S11_Rollout.tsx — 落地計畫頁
    • 內容：Phase A 先導期 2-4 週 / Phase B 部門推廣 / Phase C 深度整合
    • 元件：AnimatedList
    • Steps：4
  • 2.12 建立 S12_MetaDemo.tsx — Meta Demo 頁
    • 內容：「這份簡報就是用 Claude Code + Framer Motion 做的」/ 從構想到部署全程 AI / React Component = 投影片 / Git 版控 + Web 部署
    • 元件：AnimatedList
    • Steps：4
  • 2.13 建立 S13_End.tsx — 結尾頁
    • 內容：下一步 + 書面提案已準備 + 按 → 或 Space 開始 Q&A
    • 動畫：scaleIn + fadeUp
    • Steps：0

Phase 驗證：每頁 slide 的動畫和 step 控制都正確。

Phase 3：整合與清理

目標：App.tsx 整合完畢，舊檔刪除，Google Fonts 加入

  • 3.1 更新 src/App.tsx
    • 替換所有 import → 13 個新 slide
    • 更新 notes Record（0-12，每頁有 presenter notes）
    • 驗證：npm run dev，從頭到尾走一遍所有 slides + steps
  • 3.2 更新 index.html
    • 加 Google Fonts link（Inter + Noto Sans TC）
    • 改 title 為「Claude Code 部門導入提案」
  • 3.3 刪除舊 slide 檔案（8 個）
    • TitleSlide, ConceptSlide, DiagramSlide, CodeSlide, StatsSlide, CompareSlide, QuoteSlide, EndSlide
  • 3.4 TypeScript 編譯檢查
    • 指令：cd ~/Documents/animated-deck && npm run build
    • 驗證：零錯誤

Phase 驗證：

  1. npm run dev → 13 頁全部正確渲染
  2. 按 p → presenter view 顯示每頁 notes
  3. 按 o → slide overview 看到 13 頁縮圖
  4. 從 slide 1 按到 slide 13，所有 steps 和動畫流暢

Phase 4：部署

目標：animated-deck.pages.dev 上線最新簡報

  • 4.1 Build 專案
    • 指令：cd ~/Documents/animated-deck && npm run build
  • 4.2 部署到 Cloudflare Pages
    • 指令：cd ~/Documents/animated-deck && wrangler pages deploy dist/ --project-name=animated-deck
  • 4.3 驗證線上版
    • 開啟 https://animated-deck.pages.dev
    • 確認所有 slides 和動畫正常

Phase 驗證：animated-deck.pages.dev 顯示最新的 13 頁會議簡報。

Phase 5：Remotion 課程介紹範本

目標：Remotion Studio 中可預覽並修改 props 的課程介紹影片

  • 5.1 建立 src/CourseIntro.tsx
    • 檔案：~/Documents/remotion-tutorial/src/CourseIntro.tsx
    • 做法：
      • zod schema（courseName, instructor, category, duration, outline, accentColor）
      • 4 場景：Title（90f）→ Instructor（60f）→ Outline（120f）→ CTA（60f）
      • TransitionSeries + fade 轉場（15f each）
      • Tailwind 樣式 + accentColor inline style
    • 驗證：TypeScript 編譯無錯誤
  • 5.2 更新 src/Root.tsx 註冊 Composition
    • 加入 CourseIntro composition，defaultProps 用龍騰教育場景範例
    • defaultProps：courseName=“React 19 新功能完全攻略”, instructor=“Matt Chang”, category=“前端開發”, duration=“6 小時 30 分”, outline=[4 項], accentColor=“#C41E3A”
  • 5.3 驗證 Remotion Studio
    • 指令：cd ~/Documents/remotion-tutorial && npm run dev
    • 在 Studio 中選 CourseIntro composition
    • 修改 props（換課程名稱、講師、色彩）→ 即時預覽更新

Phase 驗證：在 Remotion Studio 中修改任意 prop，影片即時更新。可在會議中 live demo。

Phase 6：更新會議筆記

目標：Claude Code 部門導入提案會議 反映最新內容

  • 6.1 更新會議筆記
    • 替換 GCP 部署 → 本機部署 + API Key 擴展
    • Demo 流程加入 Slack Pro 願景、Live Listen、自動化
    • 加入 animated-deck 作為 meta-demo
    • 更新時間分配表
    • Checklist 加入 animated-deck 和 Remotion 準備項目
    • 更新 Q&A 表

問題與變更紀錄

執行過程中遇到的問題、洞察、計畫調整，都記在這裡。 格式：- [日期] 問題描述 → 解決方案 / 計畫調整

  • [2/27] S06 改版：原本只有 AnimatedList 文字說明，改為嵌入 3 支 Remotion 渲染的 mp4 影片（react19、typescript、python），逐步出現 + 核心概念標語 + 結語。影片 2560×1440 解析度
  • [2/27] 影片渲染解析度迭代：640×360（太糊）→ 1280×720（仍不夠）→ 2560×1440（最終版）

注意事項

  • Google Fonts 載入：CSS 引用 Inter + Noto Sans TC，必須在 index.html 加 Google Fonts link，否則會 fallback 到 system-ui
  • animated-deck 非 git repo：部署用 wrangler pages deploy，不是 git push
  • Step 總數控制：13 頁 × 平均 4 steps ≈ 55 次按鍵。如果彩排覺得太多，可以減少個別 slide 的 steps
  • Remotion zod 版本：已安裝 zod@4.3.6（透過 @remotion/zod-types），直接 import 即可
  • HubSpokeDiagram SVG：SVG 在 Framer Motion 中需要用 motion.line 或 motion.path，注意 pathLength 動畫的寫法
  • Presenter notes 是關鍵：會議當天用投影機展示，presenter view 開在筆電螢幕上看 notes

連結

關係圖譜

反向連結