motion-design

Guide creation of subtle, purposeful motion using React and Tailwind. Focus on animations that enhance usability without distraction.

## Motion Philosophy

- **Purposeful**: Every animation should communicate something
- **Subtle**: Motion should feel natural, not theatrical
- **Fast**: Most transitions under 200ms; complex sequences under 500ms
- **Consistent**: Same timing functions throughout the interface

## Tailwind Transitions

Use built-in transition utilities for simple effects:

```tsx
// Hover states
<button className="transition-colors duration-150 hover:bg-slate-100">
  Hover me
</button>

// Scale on hover
<div className="transition-transform duration-200 hover:scale-[1.02]">
  Card content
</div>

// Opacity fade
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
  Revealed content
</div>
```

## Timing & Easing

Match timing to the action:

```tsx
// Quick feedback (buttons, toggles)
className="duration-150 ease-out"

// Smooth transitions (modals, panels)
className="duration-300 ease-in-out"

// Entrance animations
className="duration-500 ease-out"
```

## Entrance Animations

Stagger elements for polished page loads:

```tsx
// Staggered list with Tailwind
{items.map((item, i) => (
  <div
    key={item.id}
    className="animate-in fade-in slide-in-from-bottom-2"
    style={{ animationDelay: `${i * 50}ms` }}
  >
    {item.content}
  </div>
))}

// Using Framer Motion
<motion.div
  initial={{ opacity: 0, y: 10 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3, delay: index * 0.05 }}
>
  {content}
</motion.div>
```

## Loading States

Provide visual feedback during async operations:

```tsx
// Skeleton loading
<div className="h-4 w-3/4 animate-pulse rounded bg-slate-200" />

// Spinner
<svg className="h-5 w-5 animate-spin text-primary">
  <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" opacity="0.25" />
  <path fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z