[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M782HJVQ11CDZ13H36MGFN8A":3,"skill-same:01M782HJVQ11CDZ13H36MGFN8A":54},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":31,"commitSha":32,"skillDirectory":33,"forksCount":34,"repositoryHtmlUrl":35,"repositoryHomepageUrl":36,"ownerHtmlUrl":37,"ownerBlogUrl":6,"ownerDescription":38,"updatedAt":39,"install":40,"resources":53},"01M782HJVQ11CDZ13H36MGFN8A","animation-designer",null,"Expert in web animations, transitions, and motion design using Framer Motion and CSS","Lord1Egypt\u002Fawesome-skill-forge","Lord1Egypt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F99746359?v=4","01M7592YDNT0XK9WJ0T2MQVPDN","Mohamed Mounir Ali AL Keshita","01M75GRFNHC8VZNWEB8DKDE433",3,"MIT","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fskills_sh\u002Fs\u002Fskills-sh_daffy0208_ai-dev-standards_animation-designer\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: animation-designer\ndescription: Expert in web animations, transitions, and motion design using Framer Motion and CSS\nversion: 1.0.0\ntags: [animation, framer-motion, css-animations, transitions, motion-design]\n---\n\n# Animation Designer Skill\n\nI help you create smooth, professional animations for web applications using Framer Motion and CSS.\n\n## What I Do\n\n**UI Animations:**\n\n- Page transitions\n- Component enter\u002Fexit animations\n- Hover effects, button interactions\n- Loading animations\n\n**Scroll Animations:**\n\n- Parallax effects\n- Scroll-triggered animations\n- Progress indicators\n\n**Micro-interactions:**\n\n- Button press feedback\n- Form field focus states\n- Success\u002Ferror animations\n- Drag and drop feedback\n\n## Framer Motion Basics\n\n### Installation\n\n```bash\nnpm install framer-motion\n```\n\n### Basic Animation\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function FadeIn({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Cmotion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 0.5 }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n```\n\n---\n\n## Common Animation Patterns\n\n### Pattern 1: Fade In on Mount\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function Card({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Cmotion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.4, ease: 'easeOut' }}\n      className=\"p-6 bg-white rounded-lg shadow\"\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n```\n\n---\n\n### Pattern 2: Staggered List Animation\n\n```typescript\nimport { motion } from 'framer-motion'\n\nconst container = {\n  hidden: { opacity: 0 },\n  show: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.1\n    }\n  }\n}\n\nconst item = {\n  hidden: { opacity: 0, y: 20 },\n  show: { opacity: 1, y: 0 }\n}\n\nexport function List({ items }: { items: string[] }) {\n  return (\n    \u003Cmotion.ul\n      variants={container}\n      initial=\"hidden\"\n      animate=\"show\"\n    >\n      {items.map((text, i) => (\n        \u003Cmotion.li key={i} variants={item}>\n          {text}\n        \u003C\u002Fmotion.li>\n      ))}\n    \u003C\u002Fmotion.ul>\n  )\n}\n```\n\n---\n\n### Pattern 3: Button Hover Animation\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function AnimatedButton({ children, onClick }: {\n  children: React.ReactNode\n  onClick: () => void\n}) {\n  return (\n    \u003Cmotion.button\n      onClick={onClick}\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      transition={{ type: 'spring', stiffness: 400, damping: 17 }}\n      className=\"px-6 py-3 bg-blue-600 text-white rounded-lg\"\n    >\n      {children}\n    \u003C\u002Fmotion.button>\n  )\n}\n```\n\n---\n\n### Pattern 4: Modal \u002F Dialog Animation\n\n```typescript\nimport { motion, AnimatePresence } from 'framer-motion'\n\nexport function Modal({ isOpen, onClose, children }: {\n  isOpen: boolean\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  return (\n    \u003CAnimatePresence>\n      {isOpen && (\n        \u003C>\n          {\u002F* Backdrop *\u002F}\n          \u003Cmotion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={onClose}\n            className=\"fixed inset-0 bg-black\u002F50 z-40\"\n          \u002F>\n\n          {\u002F* Modal *\u002F}\n          \u003Cmotion.div\n            initial={{ opacity: 0, scale: 0.9, y: 20 }}\n            animate={{ opacity: 1, scale: 1, y: 0 }}\n            exit={{ opacity: 0, scale: 0.9, y: 20 }}\n            transition={{ type: 'spring', damping: 25, stiffness: 300 }}\n            className=\"fixed inset-0 flex items-center justify-center z-50 p-4\"\n          >\n            \u003Cdiv className=\"bg-white rounded-lg p-6 max-w-md w-full\">\n              {children}\n            \u003C\u002Fdiv>\n          \u003C\u002Fmotion.div>\n        \u003C\u002F>\n      )}\n    \u003C\u002FAnimatePresence>\n  )\n}\n```\n\n---\n\n### Pattern 5: Page Transition\n\n```typescript\n'use client'\nimport { motion } from 'framer-motion'\nimport { usePathname } from 'next\u002Fnavigation'\n\nexport function PageTransition({ children }: { children: React.ReactNode }) {\n  const pathname = usePathname()\n\n  return (\n    \u003Cmotion.div\n      key={pathname}\n      initial={{ opacity: 0, x: 20 }}\n      animate={{ opacity: 1, x: 0 }}\n      exit={{ opacity: 0, x: -20 }}\n      transition={{ duration: 0.3 }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n\n\u002F\u002F Usage in layout\nexport default function Layout({ children }) {\n  return (\n    \u003CPageTransition>\n      {children}\n    \u003C\u002FPageTransition>\n  )\n}\n```\n\n---\n\n## Scroll Animations\n\n### Scroll-Triggered Animation\n\n```typescript\nimport { motion, useScroll, useTransform } from 'framer-motion'\nimport { useRef } from 'react'\n\nexport function ScrollReveal({ children }: { children: React.ReactNode }) {\n  const ref = useRef(null)\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: ['start end', 'end start']\n  })\n\n  const opacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 1, 1, 0])\n  const y = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [100, 0, 0, -100])\n\n  return (\n    \u003Cmotion.div\n      ref={ref}\n      style={{ opacity, y }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n```\n\n### Parallax Effect\n\n```typescript\nimport { motion, useScroll, useTransform } from 'framer-motion'\n\nexport function ParallaxSection() {\n  const { scrollY } = useScroll()\n  const y = useTransform(scrollY, [0, 500], [0, 150])\n\n  return (\n    \u003Cdiv className=\"relative h-screen overflow-hidden\">\n      \u003Cmotion.div\n        style={{ y }}\n        className=\"absolute inset-0\"\n      >\n        \u003Cimg src=\"\u002Fbackground.jpg\" alt=\"\" className=\"w-full h-full object-cover\" \u002F>\n      \u003C\u002Fmotion.div>\n\n      \u003Cdiv className=\"relative z-10 flex items-center justify-center h-full\">\n        \u003Ch1 className=\"text-6xl font-bold text-white\">\n          Parallax Effect\n        \u003C\u002Fh1>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Scroll Progress Indicator\n\n```typescript\nimport { motion, useScroll } from 'framer-motion'\n\nexport function ScrollProgress() {\n  const { scrollYProgress } = useScroll()\n\n  return (\n    \u003Cmotion.div\n      style={{ scaleX: scrollYProgress }}\n      className=\"fixed top-0 left-0 right-0 h-1 bg-blue-600 origin-left z-50\"\n    \u002F>\n  )\n}\n```\n\n---\n\n## Loading Animations\n\n### Spinner\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function Spinner() {\n  return (\n    \u003Cmotion.div\n      animate={{ rotate: 360 }}\n      transition={{\n        duration: 1,\n        repeat: Infinity,\n        ease: 'linear'\n      }}\n      className=\"w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full\"\n    \u002F>\n  )\n}\n```\n\n### Skeleton Loader\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function SkeletonLoader() {\n  return (\n    \u003Cmotion.div\n      animate={{ opacity: [0.5, 1, 0.5] }}\n      transition={{\n        duration: 1.5,\n        repeat: Infinity,\n        ease: 'easeInOut'\n      }}\n      className=\"bg-gray-200 rounded h-4 w-full\"\n    \u002F>\n  )\n}\n```\n\n### Pulsing Dots\n\n```typescript\nimport { motion } from 'framer-motion'\n\nconst dotVariants = {\n  start: { scale: 0.8, opacity: 0.5 },\n  end: { scale: 1.2, opacity: 1 }\n}\n\nexport function PulsingDots() {\n  return (\n    \u003Cdiv className=\"flex gap-2\">\n      {[0, 1, 2].map((i) => (\n        \u003Cmotion.div\n          key={i}\n          variants={dotVariants}\n          animate=\"end\"\n          initial=\"start\"\n          transition={{\n            duration: 0.6,\n            repeat: Infinity,\n            repeatType: 'reverse',\n            delay: i * 0.2\n          }}\n          className=\"w-3 h-3 bg-blue-600 rounded-full\"\n        \u002F>\n      ))}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n---\n\n## CSS Animations\n\n### Keyframe Animations\n\n```css\n\u002F* Fade in animation *\u002F\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.fade-in {\n  animation: fadeIn 0.5s ease-out;\n}\n\n\u002F* Slide in from right *\u002F\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n.slide-in-right {\n  animation: slideInRight 0.3s ease-out;\n}\n\n\u002F* Bounce *\u002F\n@keyframes bounce {\n  0%,\n  100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n}\n\n.bounce {\n  animation: bounce 0.5s ease-in-out infinite;\n}\n```\n\n### Tailwind Animations\n\n```typescript\n\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      keyframes: {\n        'fade-in': {\n          '0%': { opacity: '0', transform: 'translateY(10px)' },\n          '100%': { opacity: '1', transform: 'translateY(0)' }\n        },\n        'slide-in': {\n          '0%': { transform: 'translateX(-100%)' },\n          '100%': { transform: 'translateX(0)' }\n        }\n      },\n      animation: {\n        'fade-in': 'fade-in 0.5s ease-out',\n        'slide-in': 'slide-in 0.3s ease-out'\n      }\n    }\n  }\n}\n```\n\n**Usage:**\n\n```typescript\n\u003Cdiv className=\"animate-fade-in\">Fades in\u003C\u002Fdiv>\n\u003Cdiv className=\"animate-slide-in\">Slides in\u003C\u002Fdiv>\n```\n\n---\n\n## Micro-Interactions\n\n### Success Checkmark Animation\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function SuccessCheckmark() {\n  return (\n    \u003Cmotion.svg\n      width=\"48\"\n      height=\"48\"\n      viewBox=\"0 0 48 48\"\n      initial={{ scale: 0 }}\n      animate={{ scale: 1 }}\n      transition={{ type: 'spring', stiffness: 300, damping: 20 }}\n    >\n      \u003Cmotion.circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        fill=\"none\"\n        stroke=\"#10B981\"\n        strokeWidth=\"4\"\n        initial={{ pathLength: 0 }}\n        animate={{ pathLength: 1 }}\n        transition={{ duration: 0.5 }}\n      \u002F>\n      \u003Cmotion.path\n        d=\"M12 24 L20 32 L36 16\"\n        fill=\"none\"\n        stroke=\"#10B981\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        initial={{ pathLength: 0 }}\n        animate={{ pathLength: 1 }}\n        transition={{ duration: 0.3, delay: 0.3 }}\n      \u002F>\n    \u003C\u002Fmotion.svg>\n  )\n}\n```\n\n### Notification Badge\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function NotificationBadge({ count }: { count: number }) {\n  return (\n    \u003Cdiv className=\"relative\">\n      \u003Cbutton className=\"p-2\">\n        \u003CBellIcon \u002F>\n      \u003C\u002Fbutton>\n\n      {count > 0 && (\n        \u003Cmotion.div\n          initial={{ scale: 0 }}\n          animate={{ scale: 1 }}\n          transition={{ type: 'spring', stiffness: 500, damping: 15 }}\n          className=\"absolute -top-1 -right-1 bg-red-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center\"\n        >\n          {count}\n        \u003C\u002Fmotion.div>\n      )}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n---\n\n## Animation Best Practices\n\n### 1. Performance\n\n```typescript\n\u002F\u002F ✅ Good: Animate transform and opacity (GPU accelerated)\n\u003Cmotion.div\n  animate={{ x: 100, opacity: 0.5 }}\n\u002F>\n\n\u002F\u002F ❌ Bad: Animate width, height (triggers layout)\n\u003Cmotion.div\n  animate={{ width: '100%', height: '200px' }}\n\u002F>\n```\n\n### 2. Duration\n\n```typescript\n\u002F\u002F Too fast: \u003C 100ms (feels abrupt)\n\u002F\u002F Too slow: > 500ms (feels sluggish)\n\n\u002F\u002F ✅ Sweet spot: 200-400ms for most UI animations\n\u003Cmotion.div\n  animate={{ opacity: 1 }}\n  transition={{ duration: 0.3 }}\n\u002F>\n```\n\n### 3. Easing\n\n```typescript\n\u002F\u002F Natural motion: easeOut (starts fast, ends slow)\n\u003Cmotion.div\n  animate={{ y: 0 }}\n  transition={{ ease: 'easeOut' }}\n\u002F>\n\n\u002F\u002F Bouncy: spring\n\u003Cmotion.button\n  whileTap={{ scale: 0.95 }}\n  transition={{ type: 'spring', stiffness: 400 }}\n\u002F>\n```\n\n### 4. Reduce Motion (Accessibility)\n\n```typescript\nimport { useReducedMotion } from 'framer-motion'\n\nexport function AccessibleAnimation({ children }: { children: React.ReactNode }) {\n  const shouldReduceMotion = useReducedMotion()\n\n  return (\n    \u003Cmotion.div\n      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{\n        duration: shouldReduceMotion ? 0 : 0.4\n      }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n```\n\n---\n\n## Complex Animations\n\n### Drag and Drop\n\n```typescript\nimport { motion } from 'framer-motion'\nimport { useState } from 'react'\n\nexport function Draggable() {\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  return (\n    \u003Cmotion.div\n      drag\n      dragConstraints={{ left: 0, right: 300, top: 0, bottom: 300 }}\n      dragElastic={0.1}\n      onDragEnd={(e, info) => {\n        setPosition({ x: info.point.x, y: info.point.y })\n      }}\n      className=\"w-24 h-24 bg-blue-600 rounded-lg cursor-grab active:cursor-grabbing\"\n    \u002F>\n  )\n}\n```\n\n### Animated Number Counter\n\n```typescript\nimport { motion, useSpring, useTransform } from 'framer-motion'\nimport { useEffect } from 'react'\n\nexport function AnimatedNumber({ value }: { value: number }) {\n  const spring = useSpring(0, { stiffness: 100, damping: 30 })\n  const display = useTransform(spring, (current) =>\n    Math.round(current).toLocaleString()\n  )\n\n  useEffect(() => {\n    spring.set(value)\n  }, [spring, value])\n\n  return \u003Cmotion.span>{display}\u003C\u002Fmotion.span>\n}\n\n\u002F\u002F Usage\n\u003CAnimatedNumber value={1250} \u002F>\n```\n\n---\n\n## When to Use Me\n\n**Perfect for:**\n\n- Creating polished UI animations\n- Building interactive components\n- Adding scroll effects\n- Designing loading states\n- Improving user feedback\n\n**I'll help you:**\n\n- Choose the right animation type\n- Implement smooth transitions\n- Optimize animation performance\n- Ensure accessibility\n- Create delightful micro-interactions\n\n## What I'll Create\n\n```\n✨ Page Transitions\n🎯 Micro-Interactions\n📜 Scroll Animations\n⏳ Loading States\n🎨 Hover Effects\n🎪 Complex Animations\n```\n\nLet's make your interfaces feel alive!\n","# Animation Designer Skill\n\nI help you create smooth, professional animations for web applications using Framer Motion and CSS.\n\n## What I Do\n\n**UI Animations:**\n\n- Page transitions\n- Component enter\u002Fexit animations\n- Hover effects, button interactions\n- Loading animations\n\n**Scroll Animations:**\n\n- Parallax effects\n- Scroll-triggered animations\n- Progress indicators\n\n**Micro-interactions:**\n\n- Button press feedback\n- Form field focus states\n- Success\u002Ferror animations\n- Drag and drop feedback\n\n## Framer Motion Basics\n\n### Installation\n\n```bash\nnpm install framer-motion\n```\n\n### Basic Animation\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function FadeIn({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Cmotion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 0.5 }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n```\n\n---\n\n## Common Animation Patterns\n\n### Pattern 1: Fade In on Mount\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function Card({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Cmotion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.4, ease: 'easeOut' }}\n      className=\"p-6 bg-white rounded-lg shadow\"\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n```\n\n---\n\n### Pattern 2: Staggered List Animation\n\n```typescript\nimport { motion } from 'framer-motion'\n\nconst container = {\n  hidden: { opacity: 0 },\n  show: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.1\n    }\n  }\n}\n\nconst item = {\n  hidden: { opacity: 0, y: 20 },\n  show: { opacity: 1, y: 0 }\n}\n\nexport function List({ items }: { items: string[] }) {\n  return (\n    \u003Cmotion.ul\n      variants={container}\n      initial=\"hidden\"\n      animate=\"show\"\n    >\n      {items.map((text, i) => (\n        \u003Cmotion.li key={i} variants={item}>\n          {text}\n        \u003C\u002Fmotion.li>\n      ))}\n    \u003C\u002Fmotion.ul>\n  )\n}\n```\n\n---\n\n### Pattern 3: Button Hover Animation\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function AnimatedButton({ children, onClick }: {\n  children: React.ReactNode\n  onClick: () => void\n}) {\n  return (\n    \u003Cmotion.button\n      onClick={onClick}\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      transition={{ type: 'spring', stiffness: 400, damping: 17 }}\n      className=\"px-6 py-3 bg-blue-600 text-white rounded-lg\"\n    >\n      {children}\n    \u003C\u002Fmotion.button>\n  )\n}\n```\n\n---\n\n### Pattern 4: Modal \u002F Dialog Animation\n\n```typescript\nimport { motion, AnimatePresence } from 'framer-motion'\n\nexport function Modal({ isOpen, onClose, children }: {\n  isOpen: boolean\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  return (\n    \u003CAnimatePresence>\n      {isOpen && (\n        \u003C>\n          {\u002F* Backdrop *\u002F}\n          \u003Cmotion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={onClose}\n            className=\"fixed inset-0 bg-black\u002F50 z-40\"\n          \u002F>\n\n          {\u002F* Modal *\u002F}\n          \u003Cmotion.div\n            initial={{ opacity: 0, scale: 0.9, y: 20 }}\n            animate={{ opacity: 1, scale: 1, y: 0 }}\n            exit={{ opacity: 0, scale: 0.9, y: 20 }}\n            transition={{ type: 'spring', damping: 25, stiffness: 300 }}\n            className=\"fixed inset-0 flex items-center justify-center z-50 p-4\"\n          >\n            \u003Cdiv className=\"bg-white rounded-lg p-6 max-w-md w-full\">\n              {children}\n            \u003C\u002Fdiv>\n          \u003C\u002Fmotion.div>\n        \u003C\u002F>\n      )}\n    \u003C\u002FAnimatePresence>\n  )\n}\n```\n\n---\n\n### Pattern 5: Page Transition\n\n```typescript\n'use client'\nimport { motion } from 'framer-motion'\nimport { usePathname } from 'next\u002Fnavigation'\n\nexport function PageTransition({ children }: { children: React.ReactNode }) {\n  const pathname = usePathname()\n\n  return (\n    \u003Cmotion.div\n      key={pathname}\n      initial={{ opacity: 0, x: 20 }}\n      animate={{ opacity: 1, x: 0 }}\n      exit={{ opacity: 0, x: -20 }}\n      transition={{ duration: 0.3 }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n\n\u002F\u002F Usage in layout\nexport default function Layout({ children }) {\n  return (\n    \u003CPageTransition>\n      {children}\n    \u003C\u002FPageTransition>\n  )\n}\n```\n\n---\n\n## Scroll Animations\n\n### Scroll-Triggered Animation\n\n```typescript\nimport { motion, useScroll, useTransform } from 'framer-motion'\nimport { useRef } from 'react'\n\nexport function ScrollReveal({ children }: { children: React.ReactNode }) {\n  const ref = useRef(null)\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: ['start end', 'end start']\n  })\n\n  const opacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 1, 1, 0])\n  const y = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [100, 0, 0, -100])\n\n  return (\n    \u003Cmotion.div\n      ref={ref}\n      style={{ opacity, y }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n```\n\n### Parallax Effect\n\n```typescript\nimport { motion, useScroll, useTransform } from 'framer-motion'\n\nexport function ParallaxSection() {\n  const { scrollY } = useScroll()\n  const y = useTransform(scrollY, [0, 500], [0, 150])\n\n  return (\n    \u003Cdiv className=\"relative h-screen overflow-hidden\">\n      \u003Cmotion.div\n        style={{ y }}\n        className=\"absolute inset-0\"\n      >\n        \u003Cimg src=\"\u002Fbackground.jpg\" alt=\"\" className=\"w-full h-full object-cover\" \u002F>\n      \u003C\u002Fmotion.div>\n\n      \u003Cdiv className=\"relative z-10 flex items-center justify-center h-full\">\n        \u003Ch1 className=\"text-6xl font-bold text-white\">\n          Parallax Effect\n        \u003C\u002Fh1>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Scroll Progress Indicator\n\n```typescript\nimport { motion, useScroll } from 'framer-motion'\n\nexport function ScrollProgress() {\n  const { scrollYProgress } = useScroll()\n\n  return (\n    \u003Cmotion.div\n      style={{ scaleX: scrollYProgress }}\n      className=\"fixed top-0 left-0 right-0 h-1 bg-blue-600 origin-left z-50\"\n    \u002F>\n  )\n}\n```\n\n---\n\n## Loading Animations\n\n### Spinner\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function Spinner() {\n  return (\n    \u003Cmotion.div\n      animate={{ rotate: 360 }}\n      transition={{\n        duration: 1,\n        repeat: Infinity,\n        ease: 'linear'\n      }}\n      className=\"w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full\"\n    \u002F>\n  )\n}\n```\n\n### Skeleton Loader\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function SkeletonLoader() {\n  return (\n    \u003Cmotion.div\n      animate={{ opacity: [0.5, 1, 0.5] }}\n      transition={{\n        duration: 1.5,\n        repeat: Infinity,\n        ease: 'easeInOut'\n      }}\n      className=\"bg-gray-200 rounded h-4 w-full\"\n    \u002F>\n  )\n}\n```\n\n### Pulsing Dots\n\n```typescript\nimport { motion } from 'framer-motion'\n\nconst dotVariants = {\n  start: { scale: 0.8, opacity: 0.5 },\n  end: { scale: 1.2, opacity: 1 }\n}\n\nexport function PulsingDots() {\n  return (\n    \u003Cdiv className=\"flex gap-2\">\n      {[0, 1, 2].map((i) => (\n        \u003Cmotion.div\n          key={i}\n          variants={dotVariants}\n          animate=\"end\"\n          initial=\"start\"\n          transition={{\n            duration: 0.6,\n            repeat: Infinity,\n            repeatType: 'reverse',\n            delay: i * 0.2\n          }}\n          className=\"w-3 h-3 bg-blue-600 rounded-full\"\n        \u002F>\n      ))}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n---\n\n## CSS Animations\n\n### Keyframe Animations\n\n```css\n\u002F* Fade in animation *\u002F\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.fade-in {\n  animation: fadeIn 0.5s ease-out;\n}\n\n\u002F* Slide in from right *\u002F\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n.slide-in-right {\n  animation: slideInRight 0.3s ease-out;\n}\n\n\u002F* Bounce *\u002F\n@keyframes bounce {\n  0%,\n  100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n}\n\n.bounce {\n  animation: bounce 0.5s ease-in-out infinite;\n}\n```\n\n### Tailwind Animations\n\n```typescript\n\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      keyframes: {\n        'fade-in': {\n          '0%': { opacity: '0', transform: 'translateY(10px)' },\n          '100%': { opacity: '1', transform: 'translateY(0)' }\n        },\n        'slide-in': {\n          '0%': { transform: 'translateX(-100%)' },\n          '100%': { transform: 'translateX(0)' }\n        }\n      },\n      animation: {\n        'fade-in': 'fade-in 0.5s ease-out',\n        'slide-in': 'slide-in 0.3s ease-out'\n      }\n    }\n  }\n}\n```\n\n**Usage:**\n\n```typescript\n\u003Cdiv className=\"animate-fade-in\">Fades in\u003C\u002Fdiv>\n\u003Cdiv className=\"animate-slide-in\">Slides in\u003C\u002Fdiv>\n```\n\n---\n\n## Micro-Interactions\n\n### Success Checkmark Animation\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function SuccessCheckmark() {\n  return (\n    \u003Cmotion.svg\n      width=\"48\"\n      height=\"48\"\n      viewBox=\"0 0 48 48\"\n      initial={{ scale: 0 }}\n      animate={{ scale: 1 }}\n      transition={{ type: 'spring', stiffness: 300, damping: 20 }}\n    >\n      \u003Cmotion.circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        fill=\"none\"\n        stroke=\"#10B981\"\n        strokeWidth=\"4\"\n        initial={{ pathLength: 0 }}\n        animate={{ pathLength: 1 }}\n        transition={{ duration: 0.5 }}\n      \u002F>\n      \u003Cmotion.path\n        d=\"M12 24 L20 32 L36 16\"\n        fill=\"none\"\n        stroke=\"#10B981\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        initial={{ pathLength: 0 }}\n        animate={{ pathLength: 1 }}\n        transition={{ duration: 0.3, delay: 0.3 }}\n      \u002F>\n    \u003C\u002Fmotion.svg>\n  )\n}\n```\n\n### Notification Badge\n\n```typescript\nimport { motion } from 'framer-motion'\n\nexport function NotificationBadge({ count }: { count: number }) {\n  return (\n    \u003Cdiv className=\"relative\">\n      \u003Cbutton className=\"p-2\">\n        \u003CBellIcon \u002F>\n      \u003C\u002Fbutton>\n\n      {count > 0 && (\n        \u003Cmotion.div\n          initial={{ scale: 0 }}\n          animate={{ scale: 1 }}\n          transition={{ type: 'spring', stiffness: 500, damping: 15 }}\n          className=\"absolute -top-1 -right-1 bg-red-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center\"\n        >\n          {count}\n        \u003C\u002Fmotion.div>\n      )}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n---\n\n## Animation Best Practices\n\n### 1. Performance\n\n```typescript\n\u002F\u002F ✅ Good: Animate transform and opacity (GPU accelerated)\n\u003Cmotion.div\n  animate={{ x: 100, opacity: 0.5 }}\n\u002F>\n\n\u002F\u002F ❌ Bad: Animate width, height (triggers layout)\n\u003Cmotion.div\n  animate={{ width: '100%', height: '200px' }}\n\u002F>\n```\n\n### 2. Duration\n\n```typescript\n\u002F\u002F Too fast: \u003C 100ms (feels abrupt)\n\u002F\u002F Too slow: > 500ms (feels sluggish)\n\n\u002F\u002F ✅ Sweet spot: 200-400ms for most UI animations\n\u003Cmotion.div\n  animate={{ opacity: 1 }}\n  transition={{ duration: 0.3 }}\n\u002F>\n```\n\n### 3. Easing\n\n```typescript\n\u002F\u002F Natural motion: easeOut (starts fast, ends slow)\n\u003Cmotion.div\n  animate={{ y: 0 }}\n  transition={{ ease: 'easeOut' }}\n\u002F>\n\n\u002F\u002F Bouncy: spring\n\u003Cmotion.button\n  whileTap={{ scale: 0.95 }}\n  transition={{ type: 'spring', stiffness: 400 }}\n\u002F>\n```\n\n### 4. Reduce Motion (Accessibility)\n\n```typescript\nimport { useReducedMotion } from 'framer-motion'\n\nexport function AccessibleAnimation({ children }: { children: React.ReactNode }) {\n  const shouldReduceMotion = useReducedMotion()\n\n  return (\n    \u003Cmotion.div\n      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{\n        duration: shouldReduceMotion ? 0 : 0.4\n      }}\n    >\n      {children}\n    \u003C\u002Fmotion.div>\n  )\n}\n```\n\n---\n\n## Complex Animations\n\n### Drag and Drop\n\n```typescript\nimport { motion } from 'framer-motion'\nimport { useState } from 'react'\n\nexport function Draggable() {\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  return (\n    \u003Cmotion.div\n      drag\n      dragConstraints={{ left: 0, right: 300, top: 0, bottom: 300 }}\n      dragElastic={0.1}\n      onDragEnd={(e, info) => {\n        setPosition({ x: info.point.x, y: info.point.y })\n      }}\n      className=\"w-24 h-24 bg-blue-600 rounded-lg cursor-grab active:cursor-grabbing\"\n    \u002F>\n  )\n}\n```\n\n### Animated Number Counter\n\n```typescript\nimport { motion, useSpring, useTransform } from 'framer-motion'\nimport { useEffect } from 'react'\n\nexport function AnimatedNumber({ value }: { value: number }) {\n  const spring = useSpring(0, { stiffness: 100, damping: 30 })\n  const display = useTransform(spring, (current) =>\n    Math.round(current).toLocaleString()\n  )\n\n  useEffect(() => {\n    spring.set(value)\n  }, [spring, value])\n\n  return \u003Cmotion.span>{display}\u003C\u002Fmotion.span>\n}\n\n\u002F\u002F Usage\n\u003CAnimatedNumber value={1250} \u002F>\n```\n\n---\n\n## When to Use Me\n\n**Perfect for:**\n\n- Creating polished UI animations\n- Building interactive components\n- Adding scroll effects\n- Designing loading states\n- Improving user feedback\n\n**I'll help you:**\n\n- Choose the right animation type\n- Implement smooth transitions\n- Optimize animation performance\n- Ensure accessibility\n- Create delightful micro-interactions\n\n## What I'll Create\n\n```\n✨ Page Transitions\n🎯 Micro-Interactions\n📜 Scroll Animations\n⏳ Loading States\n🎨 Hover Effects\n🎪 Complex Animations\n```\n\nLet's make your interfaces feel alive!\n",{"name":5,"tags":24,"version":30,"description":7},[25,26,27,28,29],"animation","framer-motion","css-animations","transitions","motion-design","1.0.0","master","4aa004da461d820f4ea5499e58eb8d196cf99016","community\u002Fskills_sh\u002Fs\u002Fskills-sh_daffy0208_ai-dev-standards_animation-designer",0,"https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge","https:\u002F\u002Fskill-explorer-rho.vercel.app","https:\u002F\u002Fgithub.com\u002FLord1Egypt","Unbreakable. Unstoppable. Unmatched⚡.\r\n Speaker of machine tongues 🤖  | World-builder of decentralized dreams 🌐 | Defender of the digital realm🛡️.","2026-06-10 08:21:01",{"source":8,"skillName":5,"commands":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add Lord1Egypt\u002Fawesome-skill-forge --skill animation-designer",{"tool":46,"command":47},"bunx","bunx skills add Lord1Egypt\u002Fawesome-skill-forge --skill animation-designer",{"tool":49,"command":50},"pnpm","pnpm dlx skills add Lord1Egypt\u002Fawesome-skill-forge --skill animation-designer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fskills_sh\u002Fs\u002Fskills-sh_daffy0208_ai-dev-standards_animation-designer\u002FSKILL.md",true,[],[55,62,69,76,83,90],{"skillNo":56,"name":57,"nameZh":6,"description":58,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":61,"publishedAt":19},"01M785WKJB99G3STR1NF9NRTJW","youtube-content","YouTube transcripts to summaries, threads, blogs.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fyoutube-content\u002FSKILL.md",[],[],{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":19},"01M785WEFHB0G2S9YA6EPR3H0E","xurl","X\u002FTwitter via xurl CLI: post, search, DM, media, v2 API.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fxurl\u002FSKILL.md",[],[],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":19},"01M785W98EDN4EFJXJPMQEHCRC","touchdesigner-mcp","Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftouchdesigner-mcp\u002FSKILL.md",[],[],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":19},"01M785W5S9FP3QBH2V191E025P","test-driven-development","TDD: enforce RED-GREEN-REFACTOR, tests before code.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftest-driven-development\u002FSKILL.md",[],[],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":19},"01M785W2AS08NSSH9YATCV6FJB","teams-meeting-pipeline","Operate the Teams meeting summary pipeline via Hermes CLI — summarize meetings, inspect pipeline status, replay jobs, manage Microsoft Graph subscriptions.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fteams-meeting-pipeline\u002FSKILL.md",[],[],{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":19},"01M785VXKW4T34BTP1SCHW1R7F","systematic-debugging","4-phase root cause debugging: understand bugs before fixing.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md",[],[]]