interactionslisted

# Interactions Skill 마이크로 인터랙션 및 애니메이션 디자인 스킬입니다. Framer Motion 기반 hover, tap, focus, loading, scroll 애니메이션을 구현합니다. ## Triggers - "인터랙션", "마이크로", "interactions", "micro-interactions" - "hover", "호버", "탭", "tap" - "포커스", "focus", "로딩", "loading" - "스크롤 애니메이션", "scroll animation" --- ## Input | 항목 | 필수 | 설명 | |------|------|------| | `interactionType` | ✅ | 인터랙션 유형 (hover, tap, focus, loading, scroll) | | `intensity` | ❌ | 애니메이션 강도 (subtle, medium, expressive) | | `duration` | ❌ | 지속 시간 (fast, normal, slow) | | `easing` | ❌ | 이징 함수 (spring, ease, bounce) | --- ## Framer Motion 기본 설정 ### Provider 설정 ```tsx // app/providers.tsx 'use client'; import { LazyMotion, domAnimation } from 'framer-motion'; export function Providers({ children }: { children: React.ReactNode }) { return ( <LazyMotion features={domAnimation}> {children} </LazyMotion> ); } ``` ### 공통 애니메이션 Variants ```typescript // lib/motion/variants.ts import type { Variants, Transition } from 'framer-motion'; // 기본 트랜지션 export const springTransition: Transition = { type: 'spring', stiffness: 400, damping: 25, }; export const easeTransition: Transition = { type: 'tween', duration: 0.2, ease: [0.25, 0.1, 0.25, 1], }; // Hover Variants export const hoverScale: Variants = { initial: { scale: 1 }, hover: { scale: 1.02 }, tap: { scale: 0.98 }, }; export const hoverLift: Variants = { initial: { y: 0, boxShadow: '0 0 0 rgba(0,0,0,0)' }, hover: { y: -4, boxShadow: '