---
use_cases: [motion, infographic, web]
required_inputs: 解說內容的分段大綱(場景/步驟清單)、每步驟的核心視覺或圖示概念
pairs_with: Space Grotesk + Inter + Caveat；需要搭配 animated-explainer skill 或 CSS 3D transform 場景
---

# Design System: Explainer Flow 解說流動

> 動畫解說系統 — 為整段動畫解說設計的視覺系統：場景轉場友善、計時揭露(timed-reveal)配色、3D-transform-ready，字幕與標註樣式支援逐步呈現的節奏。搭配 `animated-explainer` skill 用。與 title-card 區隔——那套是影片上的字卡疊層，這套是整段動畫解說的場景視覺系統。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Ideas unfolding, not slides flipping. Every scene should feel like it grew out of the previous one — a shared gradient world where objects rotate into place, steps reveal on a rhythm, and the viewer's eye is always told where to look next. The system is built for CSS 3D transforms first: flat colors that read correctly under perspective, depth cues that survive rotation, and a palette calm enough to sit behind dense explanatory content for minutes at a time.

**Atmosphere Keywords:** Flowing, Guided, Approachable, Rhythmic, Dimensional, Instructive, Calm-energetic, Sequential

**Visual Anchors:**
- 流動漸層底（indigo→violet），場景之間共享同一片漸層世界，轉場不突兀
- 圓角幾何卡片 + 3D transform-ready 表面（`transform-style: preserve-3d` 相容配色）
- 步驟編號徽章（numbered step badge）貫穿全片，永遠標記「現在在第幾步」
- 計時揭露：內容分批浮現，不一次全部丟給觀眾
- 手寫感標註（Caveat 字型）點綴重點，像老師在畫面上圈出重點

**Mood Board References:**
- SaaS 產品解說動畫（onboarding explainer video）
- 教育類 YouTube 頻道的分步驟動畫講解
- 資訊圖表動態化（animated infographic）
- 設計系統文件的互動式 walkthrough

---

## 2. Color Palette & Roles

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟣 | Deep Indigo 深靛藍 | `#2E2A6B` | Primary dark — 場景深色背景、3D 物件暗面 |
| 🟪 | Flow Violet 流動紫羅蘭 | `#6C63FF` | Primary accent — 進行中步驟、連接線、箭頭 |
| 🟢 | Soft Teal 柔和青綠 | `#2DD4BF` | Secondary accent — 完成狀態、揭露高亮、成功回饋 |
| 🟠 | Reveal Coral 揭示珊瑚 | `#FF7A59` | Tertiary accent — 標註重點、警示、對比強調 |
| ⬜ | Cloud White 雲白 | `#F7F8FC` | Canvas — 淺色場景背景、卡片底 |
| ⬛ | Ink Slate 墨石灰 | `#1E2233` | Text — 淺底文字、深色場景邊框 |
| 🔷 | Muted Periwinkle 霧periwinkle | `#C7C9F5` | Muted — 未啟用步驟、分隔線、非焦點物件 |

**Rule:** 每個場景只能有一個「焦點色」（Violet 或 Teal 或 Coral），其餘物件一律降到 Muted Periwinkle 或 40% opacity — 這是「引導視線」的核心手法，用色彩數量控制觀眾看哪裡。

### Scene Background Modes

| Mode | Background | Use |
|------|-----------|-----|
| Light scene | `#F7F8FC` 底 + 淡漸層至 `#EDEEFA` | 資訊密度高的講解畫面 |
| Dark scene | `linear-gradient(135deg, #2E2A6B, #1E2233)` | 開場/轉場/強調畫面，營造縱深感 |
| Gradient bridge | `#2E2A6B → #6C63FF → #2DD4BF` 45° 對角漸層 | 場景轉場過渡層，連接明暗兩種場景 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Space Grotesk', 'Noto Sans TC', sans-serif | 場景標題、步驟標籤 — 幾何感字型呼應 3D 物件語言 |
| `--font-body` | 'Inter', 'Noto Sans TC', sans-serif | 說明文字、字幕、UI 標籤 |
| `--font-annotation` | 'Caveat', cursive | 手寫感標註、圈點強調、旁白備註 |
| `--font-mono` | 'JetBrains Mono', monospace | 步驟編號、時間軸標記、程式碼示意 |

**Pairing logic:** Space Grotesk 的幾何比例在 3D 旋轉下依然保持字形清晰，適合當場景標題；Inter 撐住長篇說明文字的可讀性；Caveat 只用於「手寫標註」這個明確角色（如老師手寫圈出重點），不用於正文，避免與 doodle-notebook 系統混淆定位。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| Scene Title 場景標題 | clamp(2rem, 5vw, 3.2rem) | display | 700 | 每個場景開場的錨點文字 |
| Step Label 步驟標籤 | 1.1rem | display | 600 | 搭配編號徽章，uppercase letter-spacing 0.04em |
| Body 說明文字 | 1.15rem | body | 400–500 | line-height 1.6，深色場景用 Cloud White，淺色場景用 Ink Slate |
| Subtitle/Caption 字幕 | 1.3rem | body | 700 | 底部字幕條，需可讀性同影片字卡標準 |
| Annotation 手寫標註 | 1.4–1.8rem | annotation | 500–700 | 永遠搭配 Reveal Coral 或 Flow Violet 色 |
| Step Number 步驟編號 | 1.5rem | mono | 700 | 圓形徽章內文字 |

### Readability Note

深色場景文字對比須 ≥ 4.5:1（Cloud White on Deep Indigo 實測合格）；淺色場景同理（Ink Slate on Cloud White）。手寫標註字級不得低於 1.4rem — 手寫字型筆畫細，太小會犧牲可讀性。

---

## 4. Component Stylings

### Step Badge（步驟編號徽章 — 系統核心 token）

```css
--badge-size: 48px;
--badge-bg-active: var(--flow-violet);
--badge-bg-done: var(--soft-teal);
--badge-bg-pending: var(--muted-periwinkle);
--badge-radius: 50%;
```

圓形徽章，內含 mono 字型編號。三態：進行中（Violet 實色+外圈脈動光暈）、已完成（Teal 實色+勾勾圖示）、待進行（Periwinkle 30% opacity 空心圈）。徽章之間用 2px 連接線串成時間軸，貫穿整段解說。

### 3D Card（3D 卡片 — transform-ready 表面）

- 卡片本體：`border-radius: 16px`，`background: #F7F8FC`，`box-shadow: 0 20px 40px rgba(46,42,107,0.15)`
- 3D 旋轉時卡片背面（`backface-visibility`）用 Deep Indigo 純色，避免穿透露出後方場景造成穿幫
- 卡片邊緣加 1px `rgba(108,99,255,0.2)` 描邊，在任何旋轉角度都維持「這是一個實體物件」的錯覺

### Timed-Reveal Content（計時揭露內容區）

- 內容分段包在獨立 `.reveal-unit`，初始 `opacity:0, transform: translateY(16px)`
- 依 timeline 順序逐一揭露，前一段完全定格後才開始下一段（見第 6 章 choreography）
- 已揭露內容降低視覺權重（`opacity: 0.55`）讓當前焦點內容更突出 — 這是「計時揭露配色」的核心：焦點永遠用滿彩，其餘降透明度

### Caption Bar（字幕條）

- 底部固定條，`rgba(30,34,51,0.85)` 底（呼應 title-card 系統的字板邏輯但改用系統主色調）
- 字幕文字 Cloud White，字級與 title-card 系統一致（不低於畫面高度 4%）

### Annotation Callout（手寫標註）

- Caveat 字型 + 手繪風箭頭（SVG path，非幾何直線箭頭 — 與 title-card 的幾何箭頭區隔）
- 顏色只用 Reveal Coral（提問/疑問）或 Flow Violet（重點/答案）
- 常搭配一個小圓點錨定指向的畫面元素

### Connector / Arrow（場景內連接線）

- 步驟間連接線：2px 實線，`stroke-dasharray` 動畫呈現「畫出來」的效果（配合揭露節奏）
- 已完成路徑：Soft Teal 實色；未走到路徑：Muted Periwinkle 30% opacity

---

## 5. Layout Principles

### Scene Composition

- **單場景安全框**：核心內容置於畫面中央 80% 區域（左右各留 10% 呼吸空間），避免 3D 旋轉時邊緣物件被裁切
- **步驟時間軸位置**：固定於畫面頂部或左側，貫穿整段解說作為「進度地圖」，不隨場景切換而重置位置
- **景深分層**：背景（漸層，z:0）→ 中景卡片（z:1，主要內容）→ 前景標註（z:2，Caveat 手寫層）— 三層 z 軸語意固定，方便 3D transform 統一調度

### Video Ratio Guidance

| 比例 | Composition |
|------|------------|
| 16:9（橫式解說影片） | 步驟時間軸置頂橫向排列，主內容區佔中央 70% 高度 |
| 9:16（直式短影音解說） | 步驟時間軸改直向置左側，主內容區堆疊式單欄呈現，字級放大 15% |

### Scene Transition Zones

轉場區（scene bridge）使用 Gradient Bridge 背景模式，前一場景物件淡出＋縮小的同時，下一場景物件從對角浮現 — 兩場景短暫共存 200ms 建立連續感，不使用硬切黑屏。

---

## 6. Motion & Timing

**Motion Philosophy:** Reveal, don't dump. 觀眾需要時間消化每一個步驟，動畫節奏服務「理解速度」而非「炫技速度」。3D transform 一律使用 perspective 900-1200px 範圍，避免過度誇張的透視畸變；每個場景轉場都要讓觀眾感覺「這是同一段旅程的下一步」，而非切換到不相關畫面。

### Easing Tokens

```css
--ef-ease-reveal:   cubic-bezier(0.22, 1, 0.36, 1);   /* 內容揭露：慢入快穩，溫和抵達 */
--ef-ease-rotate3d: cubic-bezier(0.65, 0, 0.35, 1);    /* 3D 卡片旋轉：對稱加減速 */
--ef-ease-connect:  cubic-bezier(0.4, 0, 0.2, 1);      /* 連接線畫出動畫：標準 ease-in-out */
--ef-ease-bridge:   cubic-bezier(0.83, 0, 0.17, 1);    /* 場景轉場橋接：強力對稱曲線 */
--ef-duration-reveal:  500ms;
--ef-duration-rotate3d: 700ms;
--ef-duration-bridge:  800ms;
```

### Choreography（單一場景內，總長依內容步驟數延伸）

| Phase | Timing | Motion |
|-------|--------|--------|
| Scene enter | 0–800ms | 場景背景漸層淡入，3D 卡片從 `rotateY(-15deg) translateZ(-100px)` 轉正歸位，`--ef-ease-rotate3d` |
| Step badge activate | 600–900ms | 當前步驟徽章由 pending → active，外圈光暈脈動，前一徽章轉為 done |
| Content reveal | 900–1400ms | `.reveal-unit` 逐段 stagger 150ms 浮現（opacity 0→1, translateY 16px→0），`--ef-ease-reveal` |
| Annotation pop | 1400–1700ms | 手寫標註以縮放彈入（scale 0.8→1, opacity 0→1），輕微 overshoot |
| Hold | 1700ms–(依內容長度) | 靜止，等待旁白/字幕讀完 |
| Scene bridge out | 最後 800ms | 當前場景物件縮小淡出＋下一場景對角浮入，`--ef-ease-bridge` |

### 3D Rotation Guidance

- 卡片旋轉角度上限 ±20deg（超過會造成文字判讀困難）
- `perspective` 固定在容器層（900-1200px），不對單一物件疊加多重 perspective
- 旋轉動畫永遠搭配 `transform-origin: center` 除非刻意做「翻頁」效果（此時用 `left center` 或 `right center`）

**應用原則:** Staging（步驟徽章先定錨，內容才出現）、Slow In/Out（揭露用慢入曲線）、Anticipation（3D 卡片轉正前有極輕微反向蓄力，60ms 內完成，不可過度）。深色場景與淺色場景交替時，轉場橋接時間加長至 800ms 給觀眾眼睛適應對比切換。

---

## 7. Do's and Don'ts

### Do's ✅

- 每個場景只設定一個焦點色，其餘物件降 opacity 或用 Muted Periwinkle
- 步驟徽章與時間軸貫穿全片，位置固定，是觀眾的進度錨點
- 內容分批揭露，前段完成才進下段
- 3D 旋轉角度控制在 ±20deg 內，perspective 統一設在容器層
- 場景轉場用 Gradient Bridge 過渡，避免硬切黑屏

### Don'ts ❌

- ❌ 一個場景同時出現兩個以上焦點色，觀眾不知道看哪裡
- ❌ 內容一次性全部揭露（失去「解說」節奏，變成單純唸稿）
- ❌ 3D 旋轉角度超過 20deg 或疊加多重 perspective 造成畸變
- ❌ Caveat 手寫字型用於正文長段落 — 只用於標註
- ❌ 場景轉場用純黑硬切 — 破壞「同一段旅程」的連續感
- ❌ 步驟時間軸位置隨場景切換而跳動或重排

---

## 8. Responsive Behavior

| 影片比例 | Behavior |
|---------|----------|
| 16:9（標準解說影片） | 步驟時間軸頂部橫排，3D 卡片置中，字級用 clamp 基準值 |
| 9:16（直式短影音） | 時間軸移至左側直排或收合為進度條，3D 卡片縮小旋轉幅度至 ±12deg（避免直式畫面裁切） |
| 1:1（方形，社群解說輪播） | 單場景改為多張靜態卡片，動畫節奏改為輪播間隔提示（無 3D，僅 2D fade+scale） |
| Reduced motion | 尊重 `prefers-reduced-motion`：3D 旋轉降為純 opacity 切換，揭露動畫改為瞬間顯示但保留 stagger 的時間間隔（不動畫，只錯開出現時機） |

---

## 9. Agent Prompt Guide

給 AI agent 重現此風格的最小提示：

```
Create an animated explainer scene in the "Explainer Flow" style:

- Background: gradient world shared across scenes — dark scenes use
  linear-gradient(135deg, #2E2A6B, #1E2233), light scenes use #F7F8FC
  with a subtle gradient to #EDEEFA
- One focus color per scene only: violet #6C63FF (in-progress), teal
  #2DD4BF (complete), or coral #FF7A59 (annotation/warning) — everything
  else drops to #C7C9F5 or 40% opacity to guide the eye
- Fonts: 'Space Grotesk' for scene titles/step labels, 'Inter' for body
  text, 'Caveat' ONLY for hand-drawn annotations/callouts (never for
  paragraphs), 'JetBrains Mono' for step numbers
- Step badges: 48px circles on a persistent timeline (top or side),
  three states — active (violet, pulsing glow), done (teal, checkmark),
  pending (periwinkle, 30% opacity outline)
- 3D cards: border-radius 16px, backface-visibility set to Deep Indigo
  solid (never transparent), rotation capped at ±20deg, perspective
  900-1200px set on the container not individual elements
- Motion: content reveals in staggered 150ms waves using
  cubic-bezier(0.22,1,0.36,1) — never dump all content at once; scene
  transitions bridge through the gradient (800ms) instead of hard cuts
- Reveal already-shown content at 55% opacity so the current focus
  stands out
```

---

*Original design system authored 2026-07-14 for the Designs Hub — motion/video graphics gap-fill, pairs with `animated-explainer` skill and CSS 3D transform explainer builds.*