SYNCROBOTIC

FOUNDATIONS > Motion

Motion

動效是 SyncAI 系統的空間語言，透過物理感的位移與流暢的移動，定義了組件間的因果關係與層次流動，藉由一致的轉場節奏，在確保操作俐落感的同時，也賦予介面如同精密機械般連貫且穩定的運作質感。

DURATION 持續時間

Timing Tokens

為了確保操作體驗的一致性，系統內所有互動轉場必須嚴格對應至這四組基礎持續時間，以此構建出層次分明且具備邏輯律動感的介面語言。

TokenValueRecommended Usage
ms-100
100ms極微小的回饋：如按鈕點擊後的微幅顏色變化。
ms-200
200ms標準互動：如 Tooltip 出現、開關 (Switch) 切換。
ms-300
300ms系統標配：選單展開、小型組件的位移或縮放。
ms-500
500ms大型動作：如 Modal 對話框彈出、側邊抽屜展開。

EASING 緩動曲線

Standard

Easing-Standard

cubic-bezier(0.4, 0, 0.2, 1)

系統預設：最自然的加速與減速，模擬物理慣性。

Decelerate

Easing-Decelerate

cubic-bezier(0, 0, 0.2, 1)

進場專用：快速進入並緩慢停下，給人一種精準著陸感。

Accelerate

Easing-Accelerate

cubic-bezier(0.4, 0, 1, 1)

退場專用：緩慢啟動並快速離開，減少使用者等待感。

Implementation Guide
CSS VariablesTailwind Config
/* 進場範例 */
.modal-enter {
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--easing-decelerate);
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 退場範例 */
.modal-exit {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--easing-accelerate);
  transform: scale(0.95);
  opacity: 0;
}
v2.4.0 • Easing Tokens
Copy Code

ENTER 進場

進場邏輯

Slide Up + Fade In

頁面內容的標準進場方式，元件向上移動 24px，同時透明度由 0% 轉變為 100%，搭配Easing-Standard，營造出具備引導性的落位安定感。

Scale + Fade In

用於對話框與彈出視窗，縮放比例從 95% 起始，平滑沉降至 100%，透過比例變化創造深度感與視覺焦點，模擬物件從空間背景中浮現的效果。

Cascade Entry Preview

Exit 退場

退場邏輯

Scale Down + Fade Out

預設的退場模式，元件縮小至 90%，同時伴隨透明度淡出，透過視覺縮小模擬物件向背景層深處退去的物理現象，強化 Z 軸的空間連貫性，暗示該資訊已被收納或暫時隱藏。

Slide Down + Fade Out

用於臨時通知或底部面板，元件沿 Y 軸向下移動並淡出，向下的軌跡傳達出任務的完成或捨棄信號，代表資訊已被放下，讓使用者能無負擔地回到主線操作。