Remotion 動畫範例

使用 Brickverse 設計系統配色的 Remotion 動畫開發指南

動畫配色系統

所有 Remotion 動畫都應使用 Brickverse 設計系統的配色，確保視覺一致性。主要使用藍色（Primary）和黃色（Accent）兩個色系。

主色 - 藍色（Primary）

用於專業、技術相關的動畫場景，如：官網、Dashboard、後台管理系統

primary-DEFAULT

#0184ff

primary-light

#33a1ff

primary-lighter

#66b8ff

primary-dark

#0066cc

primary-darker

#004799

輔色 - 黃色（Accent）

用於吸睛、互動相關的動畫場景，如：互動遊戲、產品上線

accent-DEFAULT

#FAD75A

accent-light

#fbe485

accent-lighter

#fcf1b0

accent-dark

#f8ca2b

accent-darker

#d4a614

配色常數定義

在 constants.ts 中定義配色常數，供所有動畫元件使用。

remotion/constants.ts

// Brickverse Design System Colors
export const COLORS = {
  bg: "transparent",
  // Primary - Blue (品牌主色)
  primary: "#0184ff",
  primaryLight: "#33a1ff",
  primaryLighter: "#66b8ff",
  primaryDark: "#0066cc",
  primaryDarker: "#004799",
  // Accent - Yellow (品牌輔色)
  accent: "#FAD75A",
  accentLight: "#fbe485",
  accentLighter: "#fcf1b0",
  accentDark: "#f8ca2b",
  accentDarker: "#d4a614",
  // Text (文字色)
  textPrimary: "#000000",
  textSecondary: "#666666",
  textTertiary: "#999999",
  // Background (背景色)
  bgPrimary: "#FFFFFF",
  bgSecondary: "#F8F9FA",
  bgTertiary: "#F1F3F4",
  // Border (邊框色)
  border: "#E0E0E0",
  // Status colors (狀態色)
  success: "#10b981",
  successBg: "#d1fae5",
};

即時動畫展示

展示可轉譯為 Remotion 的各種動畫模式——從基礎 CSS 動畫到進階物理與插值效果。

基礎動畫

藍色主題 - 進度追蹤

專業服務

0% 完成

黃色主題 - 吸睛提示

限時活動

數據視覺化

即時數據

卡片翻轉效果

99%

客戶滿意度

1000+

專案經驗

進階動畫

軌道特色系統

API

Auth

CDN

彈簧數字面板

即時數據面板

活躍用戶

轉換率

總營收

光暈邊框卡片

入門課程

快速上手核心概念

進階課程

深入實戰應用場景

時間軸展開效果

合作流程

需求分析

釐清目標與範圍

原型設計

快速建立視覺原型

開發實作

前後端整合開發

上線部署

測試驗證與正式發佈

Web 入門課案例 — Remotion 影片

以五大課程主題為內容，使用 Remotion 製作的 Before → AI 處理 → After 三段式動畫影片（1920×1080 @ 30fps）。

行政數據處理

業務資訊版

社群貼文大師

互動遊戲行銷

貼身會議助理

動畫主題分類

根據動畫內容的特性，選擇合適的配色主題，避免所有動畫看起來都一樣（uniform state）。

藍色主題（Primary）

適用場景：展現專業、效率、技術的動畫

• 行政數據處理（DataCleaningDemo）
• 社群貼文大師（SocialPostDemo）
• 貼身會議助理（MeetingAssistantDemo）
• 專業官網與活動網站（WebsiteDemo）
• 業務數據 Dashboard（DashboardDemo）
• 後台管理系統（AdminSystemDemo）

黃色主題（Accent）

適用場景：強調吸睛、互動、興奮感的動畫

• 互動遊戲行銷（InteractiveGameDemo）
• 業務資訊版（BusinessInfoDemo）
• 個人商用產品落地（ProductLaunchDemo）

最佳實踐

✅ 應該做的

• 所有顏色都從 COLORS 常數引用，不要寫死顏色值
• 根據動畫內容選擇合適的配色主題（藍色 vs 黃色）
• 保留狀態色（success、error）用於特定的視覺提示
• 使用 textPrimary、textSecondary 等語意化命名

❌ 不應該做的

• 不要直接寫 #0184ff，應該用 COLORS.primary
• 不要所有動畫都用同一種配色（避免 uniform state）
• 不要混用設計系統外的顏色
• 不要忽略文字顏色的層級（primary、secondary、tertiary）