Motion
「即時生成，精準落位」— 高速啟動 → 快速進場 → 急停式煞車收束。起始不提供過多緩衝，末端以急停收束。
Easing Curves
三條核心曲線。快速啟動、精準停止。選擇曲線查看 SVG 圖形和即時動畫預覽。
cubic-bezier(0.16, 0, 0.12, 1)Duration Scale
五段速度。選擇合適的持續時間取決於元素大小和重要性。
| Token | Value |
|---|---|
--duration-instant | 100ms — Micro: hover, focus |
--duration-fast | 200ms — Small: button, toggle |
--duration-normal | 350ms — Standard: modal, drawer |
--duration-slow | 500ms — Large: page section reveal |
--duration-slower | 800ms — Dramatic: hero animation, brand moment |
Dynamic Systems
品牌定義兩套動態系統，對應不同場景。
Rounded Dynamics
彈性、流動、生命力
- Scroll reveal
- Hover effect
- Loading animation
Rectangular Dynamics
理性、模組化、積木感
- Layout transition
- Grid animation
- Text reveal
CSS Animation
常用動畫範例，可直接複製使用。
css
/* Slide up reveal — Rectangular Dynamics */
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal-up {
animation: slide-up var(--duration-slow) var(--ease-fpa) both;
}
/* Width expansion — Rectangular Dynamics */
@keyframes expand-width {
from { transform: scaleX(0); transform-origin: left; }
to { transform: scaleX(1); transform-origin: left; }
}
/* Scale in — Rounded Dynamics */
@keyframes scale-in {
from { transform: scale(0); }
to { transform: scale(1); }
}Motion Misuse
以下效果絕對不可使用於任何 FPA 品牌動態中。
✕Squash & stretch
✕Circle ↔ Square morphing
✕Motion blur
✕Cutting circles
✕Curved motion paths — use straight / orthogonal only
✕Boolean / subtraction effects
✕Layer blending / overlay effects
✕Bouncy / spring dynamics
✕Rotation during stretch
✕Collision, dissolve, explosion, evaporation