motion-dev-animations

Files (1)

• SKILL.md

SKILL.md (first lines)

# Motion Dev Animations

> **Motion.dev** - 10M+ downloads/month, successor to Framer Motion
> 120fps GPU-accelerated animations for React, Next.js, Svelte, Astro, Vue

## Purpose

Generate production-grade animations using Motion.dev following Apple/Jon Ive principles:
**Purposeful** (serves function) | **Smooth** (120fps) | **Accessible** (reduced-motion) | **Performant** (GPU-only) | **Elegant** (subtle) | **Consistent** (unified timing)

## When to Use

✅ **Use for**:

- React 19+/Next.js 15+/Svelte 5+/Astro 4+ animation implementation
- Scroll effects (parallax, reveal), gestures (hover, drag, tap), layout animations
- Hero sections, cards, micro-interactions requiring 60fps+ performance
- Projects needing spring physics, natural motion, accessibility

❌ **Don't use for**:

- CSS-only transitions (use native `transition` property)
- Static sites without JavaScript frameworks
- Vue projects (use `motion-v` package - different API)
- SVG/Canvas complex animations (GSAP better suited)
- Form-only CRUD apps (overkill)

## Workflow: Clarify → Plan → Implement → Verify

### Step 1: Clarify Requirements

Determine project context and animation goals:

- Framework (React 19+, Next.js 15+, Svelte 5+, Astro 4+)
- Animation type (entrance, gesture, scroll, layout)
- Design goal (subtle, prominent, playful, professional)
- Performance constraints (target device, bundle limits, accessibility requirements)
- Trigger mechanism (mount, viewport, user interaction)

### Step 2: Plan Animation Strategy

Define implementation approach:

- Components to animate (headers, cards, buttons, sections)
- Motion patterns (fade, slide, scale, spring, parallax)
- Timing specifications (duration, delay, stagger intervals)
- Physics parameters (stiffness: 300-400, damping: 20, mass: 1)
- Accessibility fallbacks (prefers-reduced-motion alternatives)

### Step 3: Implement in Phases

Build animations incrementally:

- **Setup**: Install Motion.dev, configure imports, prepare component structure
- **Core Animation**: Apply motion properties (initial, animate, transition)
- **Refinement**: Tune timing, easing curves, spring physics for natural feel
- **Accessibility**: Add reduced-motion detection, keyboard navigation support
- **Optimization**: Verify GPU-acceleration, minimize bundle size, test performance

### Step 4: Verify Quality Standards

Check against requirements:

- **Performance**: ≥60fps (Chrome DevTools → Performance tab)
- **Layout Stability**: CLS = 0 (Lighthouse audit)
- **Accessibility**: Honors prefers-reduced-motion (system settings test)
- **Keyboard Navigation**: All interactive elements keyboard-accessible
- **Mobile Responsive**: Touch-friendly gestures, tested on iOS/Android

## Animation Pattern Decision Tree

```
INPUT: What should animate?

├─ ENTRANCE (page load, mount)
│   → Pattern: initial={{opacity: 0, y: 20}} animate={{opacity: 1, y: 0}}
│   → Timing: 0.6-0.8s, ease: [0.22, 1, 0.36, 1]
│   → Stagger: 0.1-0.2s between elements
│   → Example: ./examples/hero-fade-up.md
│
├─ GESTURE (hover, tap, drag)
│   → Pattern: whileHover={{scale: 1.05}}, whileTap={{scale: 0.95}}
│   → Physics: Spring (stiffness: 300-400, damping: 20)
│   → Timing: Instant response (no duration)
│   → Examples: ./examples/card-hover.md, ./examples/magnetic-button.md
│
├─ SCROLL (reveal, parallax)
│   → Pattern: whileInView + viewport OR useScroll + useTransform
│   → Trigger: viewport={{once: true, amount: 0.3}}
│   → Performance: Transform/opacity only
│   → Examples: ./examples/scroll-reveal.md, ./examples/parallax-layers.md
│
└─ LAYOUT (reorder, expand)
    → Pattern: layout prop (auto FLIP)
    → Shared: layoutId="id" for morphing
    → Caveat: Only animates transforms
```

## API Quick Reference

| Component/Hook   | Usage                             | When                    |
| ---------------- | --------------------------------- | ----------------------- |
| **motion.div**   | `<motion.div animate={{x: 100}}>` | Basic animations        |
| **whileHover**   | `whileHover={{scale: 1.05}}`      | Hover states (0.2-0.3s) |
| **whileTap**     | `whileTap={{scale: 0.95}}`        | Click feedback          |
| **whileInView**  | `whileInView={{opacity: 1}}`      | Scroll reveal           |
| **drag**         | `drag="x"` dragConstraints        | Draggable elements      |
| **layout**       | `<motion.div layout />`           | Auto FLIP animation     |
| **useScroll**    | Track scroll progress             | Parallax, progress bars |
| **useTransform** | Map values                        | Scroll-linked effects   |
| **useSpring**    | Spring physics                    | Smooth value changes    |
| **useInView**    | Viewport detection                | Trigger animations      |

**Full API**: See [Complete API Reference](./reference/api-reference.md)

## Framework Integration

| Framework         | Import           | Components     | Exit Animations     |
| ----------------- | ---------------- | -------------- | ------------------- |

From whimzyLive/nightshift-ai, MIT.

More from whimzyLive/nightshift-ai