# Handler: Motion Principles

## Purpose
Spring animations, easing strategy, duration guidelines, and perceived performance. Core motion theory from Emil Kowalski's design engineering philosophy.

## Spring Animations

Springs feel more natural than duration-based animations because they simulate physics. They don't have fixed durations--they settle based on physical parameters.

### When to use springs

- Drag interactions with momentum
- Elements that should feel "alive" (like Apple's Dynamic Island)
- Gestures that can be interrupted mid-animation
- Decorative mouse-tracking interactions

### Spring-based mouse interactions

Tying visual changes directly to mouse position feels artificial because it lacks motion. Use `useSpring` from Motion (formerly Framer Motion) to interpolate value changes with spring-like behavior instead of instant updates.

```jsx
import { useSpring } from 'framer-motion';

// Without spring: feels artificial, instant
const rotation = mouseX * 0.1;

// With spring: feels natural, has momentum
const springRotation = useSpring(mouseX * 0.1, {
  stiffness: 100,
  damping: 10,
});
```

This works because animation is **decorative**--it doesn't serve function. If this were a functional banking graph, no animation would be better. Know when decoration helps and when it hinders.

### Spring configuration

**Apple's approach (recommended -- easier to reason about):**

```js
{ type: "spring", duration: 0.5, bounce: 0.2 }
```

**Traditional physics (more control):**

```js
{ type: "spring", mass: 1, stiffness: 100, damping: 10 }
```

Keep bounce subtle (0.1-0.3) when used. Avoid bounce in most UI contexts. Use it for drag-to-dismiss and playful interactions.

### Interruptibility advantage

Springs maintain velocity when interrupted--CSS animations and keyframes restart from zero. This makes springs ideal for gestures users might change mid-motion. When you click an expanded item and quickly press Escape, spring-based animation smoothly reverses from its current position.

## Asymmetric Enter/Exit Timing

Pressing should be slow when deliberate (hold-to-delete: 2s linear), but release should always be snappy (200ms ease-out). This pattern applies broadly: slow where user is deciding, fast where system is responding.

```css
/* Release: fast */
.overlay {
  transition: clip-path 200ms ease-out;
}

/* Press: slow and deliberate */
.button:active .overlay {
  transition: clip-path 2s linear;
}
```

## Review Your Work the Next Day

Review animations with fresh eyes. You notice imperfections the next day that you missed during development. Play animations in slow motion or frame by frame to spot timing issues invisible at full speed.

## Core Design Philosophy

### Taste is trained, not innate
Good taste isn't personal preference--it's a trained instinct: recognizing what elevates beyond the obvious. Develop it by studying great work, reverse-engineering why things feel good, and practicing relentlessly.

When building UI, don't just make it functional. Study the best interfaces. Reverse engineer animations. Inspect interactions. Maintain curiosity.

### Unseen details compound
Most details users never consciously notice. That's intentional. When features work exactly as expected, users proceed without thought. That's the goal.

> "All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune." - Paul Graham

Every decision exists because invisible correctness aggregates into interfaces people love without understanding why.

### Beauty is leverage
People choose tools based on overall experience, not just functionality. Good defaults and animations differentiate. Beauty remains underutilized in software. Deploy it strategically.
