MOTION SYSTEM · 動畫解說視覺系統

EXPLAINER FLOW

解說流動 / SCENE TRANSITIONS · TIMED REVEAL · 3D-READY

場景轉場友善、計時揭露配色、3D-transform-ready 的整段動畫解說系統。Ideas unfolding scene by scene, built for CSS 3D transforms.

2 Color Palette 色彩角色
深靛藍
Deep Indigo
#2E2A6B
流動紫羅蘭
Flow Violet
#6C63FF
柔和青綠
Soft Teal
#2DD4BF
揭示珊瑚
Reveal Coral
#FF7A59
雲白
Cloud White
#F7F8FC
墨石灰
Ink Slate
#1E2233
霧 Periwinkle
Muted Periwinkle
#C7C9F5
3 Typography 字體階層
Display / Space Grotesk
Scene Title 場景標題
Body / Inter
說明文字 Explanatory body copy for scenes.
Annotation / Caveat
重點在這裡！
Mono / JetBrains
STEP 03 / 07
4 解說場景示範 Scene Demo — step timeline / 3D card reveal / annotation
✓
3
4
5

Step 03 · 建立流程

先定錨步驟徽章，內容才逐段浮現。
焦點色只有一個，其餘物件降透明度。
3D 旋轉角度控制在 ±20deg 內。
← 這裡是重點
6 Motion & Timing Tokens Easing + Duration
Scene enter 場景進場
800ms
Content reveal 內容揭露
500ms / stagger 150ms
Annotation pop 標註彈入
300ms
Scene bridge 場景轉場
800ms
ease-reveal
cubic(.22,1,.36,1)
7 Do's and Don'ts

✅ Do

  • 每個場景只設定一個焦點色
  • 步驟徽章與時間軸位置固定貫穿全片
  • 內容分批揭露，前段完成才進下段

❌ Don't

  • 一個場景同時出現兩個以上焦點色
  • 內容一次性全部揭露
  • 3D 旋轉角度超過 20deg 造成畸變
2 Color Reference 色彩總表
SwatchName 名稱HexRole 角色
Deep Indigo深靛藍#2E2A6B場景深色背景
Flow Violet流動紫羅蘭#6C63FF進行中步驟 / 連接線
Soft Teal柔和青綠#2DD4BF完成狀態 / 揭露高亮
Reveal Coral揭示珊瑚#FF7A59標註重點 / 警示
Cloud White雲白#F7F8FC淺色場景底
Ink Slate墨石灰#1E2233淺底文字
Muted Periwinkle霧 Periwinkle#C7C9F5未啟用步驟 / 分隔線