애니메이션 + Framer Motion: 부드러운 UX

/* transform + opacity만 60fps 안정 */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* will-change — GPU 힌트 (남발 금지) */
.animated-element {
  will-change: transform;
}

import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
>
  {content}
</motion.div>

'use client';
import { AnimatePresence, motion } from 'framer-motion';
import { usePathname } from 'next/navigation';

export function PageTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={pathname}
        initial={{ opacity: 0, x: 20 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: -20 }}
        transition={{ duration: 0.3 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1, delayChildren: 0.2 },
  },
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 },
};

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map(i => (
    <motion.li key={i.id} variants={item}>{i.name}</motion.li>
  ))}
</motion.ul>

// 자동 위치/크기 전환 — FLIP 알고리즘
<motion.div layout>
  {expanded ? <FullContent /> : <Summary />}
</motion.div>


// 공유 요소 전환
{items.map(item => (
  <motion.div
    key={item.id}
    layoutId={`card-${item.id}`}
    onClick={() => setSelected(item)}
  >
    {item.title}
  </motion.div>
))}

{selected && (
  <motion.div layoutId={`card-${selected.id}`}>
    {/* 클릭한 카드가 자연스럽게 확대 */}
    <FullView item={selected} />
  </motion.div>
)}

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: 0, bottom: 0 }}
  dragElastic={0.5}
  whileDrag={{ scale: 1.05, cursor: 'grabbing' }}
>
  드래그 가능
</motion.div>


// 스와이프 (예: Tinder)
<motion.div
  drag="x"
  onDragEnd={(_, info) => {
    if (info.offset.x > 100) onSwipeRight();
    if (info.offset.x < -100) onSwipeLeft();
  }}
>
  ...
</motion.div>

✅ transform + opacity만 (layout/paint 트리거 X)
✅ DevTools > Performance > FPS 측정
✅ 큰 영역에 will-change: transform 명시
✅ 60fps 목표 — 16.67ms/frame
✅ requestAnimationFrame 또는 라이브러리 사용
✅ 모바일에서 reduce motion 지원

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}