---
name: motion-design
description: "Premium motion and interaction design skill. Covers Lottie animation integration, GSAP easing vectors, and visual micro-interactions."
---

# /motion-design — Premium Motion Design & Micro-Interactions

**Motion-Design** implements premium, Awwwards-quality motion layout systems, fluid CSS transitions, Lottie animation files, and dynamic visual micro-interactions.

---

## 🎨 Motion & Easing Principles

### 1. Easing Vectors & Dynamics
- **Standard Easing**: Standard entry animations must utilize ease-out vectors (`cubic-bezier(0.25, 1, 0.5, 1)`) for premium, organic transitions.
- **GSAP Timelines**: Coordinate complex multi-element entries using choreographed GSAP timelines.
- **Spring Physics**: Enforce spring animations (`stiffness: 100`, `damping: 15`) for tactile hover and tap card transitions.

### 2. Lottie & Vector Integration
- Integrate lightweight `.lottie` or JSON vectors for key interaction checkpoints (e.g., success checkmarks, loading spinners).
- Bind Lottie animations to viewport scroll events using Locomotive Scroll or GSAP ScrollTrigger.
