motion

name	motion
description	Implement high-performance, physics-based animations that feel intentional and responsive.

Motion

Elevate UI interactions from "bouncy" to "bespoke" by applying physics-based motion principles and performance-first CSS techniques.

---

What This Skill Does

This skill eliminates "cheap" animations (wrong easing, too slow, bouncy by default) and ensures every movement has a clear purpose. It prioritizes GPU-accelerated properties and interruptible interactions.

---

Rules

1. The Frequency Filter: Keyboard shortcuts and high-frequency actions have ZERO animation. Occasional actions (modals, toasts) get standard animation.
2. GPU-Only: Animate exclusively via transform and opacity. Never animate layout properties like height, width, or margin.
3. Response Over Bounce: Prioritize ease-out for entrances to feel immediate. Use ease-in-out for on-screen morphing. Never use ease-in for UI — it feels sluggish.
4. UI Speed Limit: Standard UI animations must be between 150ms and 250ms. Anything over 300ms must be a deliberate marketing or storytelling choice.
5. Physics-First: Use springs for gestures and interruptible states. Springs maintain momentum when reversed; CSS keyframes do not.
6. Entrance Stagger: When multiple items appear, stagger them with 30ms to 60ms delays.

---

What to Always Do

• Use custom beziers: Built-in CSS easings are weak. Use punchy curves like cubic-bezier(0.23, 1, 0.32, 1).
• Implement @starting-style: Use modern CSS for entry animations to keep the main thread clear.
• Scale on press: Apply transform: scale(0.97) to :active states for haptic-like feedback.
• Support Reduced Motion: Always wrap movement in @media (prefers-reduced-motion: no-preference).

---

What to Never Do

• Never animate from scale(0): Elements appearing from nothing look artificial. Start from scale(0.95) and opacity: 0.
• Never use transition: all: Explicitly name the properties to be animated to avoid accidental layout shifts.
• Never animate on main thread: Avoid window.scroll listeners. Use IntersectionObserver or CSS scroll-driven animations.

---

Settings

Adjust these dials (1-10) for motion feel:

• MOTION_RESPONSIVENESS (Default: 8): 1 = Slow/Cinematic, 10 = Instant/Snappy.
• PHYSICS_BOUNCE (Default: 2): 1 = Rigid/Damped, 10 = Playful/Springy.

---

Examples

Before (Common Slop)

.card {
  transition: all 0.5s ease-in-out;
}
.card:hover {
  transform: scale(1.1);
}

After (Motion Applied)

.card {
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
}
.card:active {
  transform: scale(0.98);
}