framer-motionlisted

# Framer Motion Skill Production-ready animations for React applications. ## Quick Start ### Installation ```bash npm install framer-motion # or pnpm add framer-motion ``` ### Basic Usage ```tsx import { motion } from "framer-motion"; // Simple animation <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }} > Content </motion.div> ``` ## Core Concepts | Concept | Guide | |---------|-------| | **Motion Component** | [reference/motion-component.md](reference/motion-component.md) | | **Variants** | [reference/variants.md](reference/variants.md) | | **Gestures** | [reference/gestures.md](reference/gestures.md) | | **Hooks** | [reference/hooks.md](reference/hooks.md) | ## Examples | Pattern | Guide | |---------|-------| | **Page Transitions** | [examples/page-transitions.md](examples/page-transitions.md) | | **List Animations** | [examples/list-animations.md](examples/list-animations.md) | | **Scroll Animations** | [examples/scroll-animations.md](examples/scroll-animations.md) | | **Micro-interactions** | [examples/micro-interactions.md](examples/micro-interactions.md) | ## Templates | Template | Purpose | |----------|---------| | [templates/page-transition.tsx](templates/page-transition.tsx) | Page transition wrapper | | [templates/animated-list.tsx](templates/animated-list.tsx) | Animated list component | ## Quick Reference ### Basic Animation ```tsx <motion.