/ 디렉터리 / 플레이그라운드 / Motion.dev Animations Skill
← 모든 서버 ↗ GitHub
● 커뮤니티 199-biotechnologies ⚡ 바로 사용

Motion.dev Animations Skill

제작: 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill

원하는 모션을 설명하세요. 스프링 물리학, 모션 감소 지원, 레이아웃 변경 없이 60fps+에서 실행되는 Motion.dev 코드를 얻으세요.

Motion-dev-animations-skill은 Motion.dev(이전의 Framer Motion)를 사용하여 프로덕션급 애니메이션을 작성하는 Claude Code 기술입니다. 애니메이션, 스크롤 효과, Motion.dev, 스프링 물리학 등이 언급되면 자동으로 활성화되며 60fps+, <50KB 번들 영향, 전체 접근성(감소 모션 선호) 및 제로 CLS를 대상으로 하는 코드를 내보냅니다. 입구 애니메이션, 스크롤 효과, 제스처 상호 작용, 마이크로 상호 작용 및 레이아웃 애니메이션을 다룹니다.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

motion-dev-animations-skill.replay ▶ 준비됨
0/0

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: Motion.dev Animations Skill

스태거를 사용하여 영웅 페이드업 입구 추가

👤 프론트엔드 개발자 튜닝 랜딩 페이지 ⏱ ~15 min beginner

언제 쓸까: 당신의 영웅은 정적인 느낌을 받고 세련된 로드 애니메이션을 원합니다.

흐름
  1. 효과를 설명하세요.
    영웅의 H1, 부제목 및 CTA에 엇갈린 페이드업 입구를 추가합니다. 60ms 엇갈림.✓ 복사됨
    → Motion.div가 포함된 Motion.dev 코드, 전환 스프링, 스태거를 통한 지연
  2. 모션 감소 폴백
    prefers-reduced-motion이 애니메이션을 깔끔하게 건너뛰는지 확인하세요.✓ 복사됨
    → useReducedMotion 후크 또는 CSS 미디어 쿼리 적용됨

결과: 접근성을 희생하지 않고도 살아있음을 느끼는 영웅입니다.

함정
  • 레이아웃을 트리거하는 애니메이션 속성(너비, 상단) — 대신 변환(변환/크기 조정) 사용 — GPU 가속, CLS 없음
함께 쓰기: magic-ui-mcp

스크롤로 트리거되는 공개 및 시차 구축

👤 디자인을 지향하는 프런트엔드 개발자 ⏱ ~25 min intermediate

언제 쓸까: 긴 형식의 랜딩 페이지에는 스크롤 시 펼쳐지는 섹션이 필요합니다.

흐름
  1. 스크롤 시 공개
    각 섹션이 뷰포트에 들어갈 때마다 애니메이션을 적용합니다(1회, 30% 임계값).✓ 복사됨
    → 한 번 + 금액으로 useInView
  2. 시차 전경
    장식용 전경 SVG에 미묘한 시차 오프셋을 추가합니다.✓ 복사됨
    → useScroll + useTransform은 scrollYProgress를 y로 매핑합니다.

결과: 방해받지 않고 깊이를 더하는 스크롤 경험.

함정
  • 멀미를 일으키는 시차 — 오프셋을 작게 유지하고 선호 감소 모션에서 완전히 건너뛰기

호버 리프트를 사용하여 드래그 가능한 자기 카드 만들기

👤 인터랙션 디자이너/프론트엔드 개발자 ⏱ ~20 min intermediate

언제 쓸까: 제품 카드에는 미세한 상호작용이 필요합니다.

흐름
  1. 호버 리프트
    마우스 오버 시: 4px 상승, 미묘한 그림자 스케일; 휴가를 마치고 다시 봄.✓ 복사됨
    → whileHover와 스프링; GPU 친화적인 변환
  2. 자기 드래그
    dragElastic 0.15. 탄성 경계를 사용하여 드래그 가능하게 만듭니다.✓ 복사됨
    → drag + dragConstraints + dragElastic이 올바르게 설정됨

결과: 성능 비용 없이 즐거운 카드 상호 작용.

레이아웃으로 목록 재정렬 애니메이션

👤 프론트엔드 개발자가 작업 보드/갤러리를 구축하고 있습니다. ⏱ ~25 min intermediate

언제 쓸까: 귀하의 목록 재정렬은 거슬리는 느낌을 줍니다. 부드러운 전환을 원합니다.

흐름
  1. 항목에 레이아웃 활성화
    목록 항목에 레이아웃 애니메이션을 추가합니다. Enter/Exit에도 애니메이션을 적용합니다.✓ 복사됨
    → <motion.li 레이아웃> + AnimatePresence
  2. 움직임 감소
    Prefers-Reduced-Motion에서 레이아웃 애니메이션을 비활성화합니다.✓ 복사됨
    → 조건부 적용; 요청한 사용자에 대한 즉시 재주문

결과: 물리적인 느낌이 들지만 사용자 선호도를 존중하는 재정렬.

조합

다른 MCP와 조합해 10배 효율

motion-dev-animations-skill + magic-ui-mcp

사전 구축된 구성 요소를 위한 Magic UI, 맞춤형 비트를 위한 Motion.dev

로고에는 Magic UI의 선택 윤곽을 사용하세요. 아래의 사용자 정의 스크롤 시차에 대한 Motion.dev.✓ 복사됨
motion-dev-animations-skill + claude-design-auditor-skill

모션 감소 지원을 위한 감사 모션

애니메이션을 추가한 후 범위=모션으로 감사하여 모션 감소 회귀를 포착합니다.✓ 복사됨
motion-dev-animations-skill + claude-code-design-skills

하나의 흐름으로 Figma-to-code + 애니메이션

Figma 프레임을 변환합니다. 그런 다음 지정된 호버 및 진입 애니메이션을 추가합니다.✓ 복사됨

도구

이 MCP가 노출하는 것

도구입력언제 호출비용
motion-dev (SKILL) describe the animation (element + intent + constraints) 애니메이션 코드를 원할 때마다 특히 그렇습니다. 접근성 및 성능 제약이 있는 경우 0

비용 및 제한

운영 비용

API 쿼터
없음
호출당 토큰
코드에 비해 작습니다. 복잡한 구성 요소를 덤프하는 경우에만 커짐
금액
무료
팁
애니메이션 의도를 자세히 설명합니다. '60ms 스태거, 200ms 지속 시간의 페이드업'이 '멋지게 만들기'보다 좋습니다.

보안

권한, 시크릿, 파급범위

자격 증명 저장: 없음
데이터 외부 송신: 기술에는 없습니다. 관련되지 않은 네트워크

문제 해결

자주 발생하는 오류와 해결

스크롤할 때 버벅거림

레이아웃 소품(너비/상단)이 아닌 변환에 애니메이션을 적용하고 있는지 확인하세요. will-change를 아껴서 사용하세요.

확인: Chrome DevTools → Performance → layout shift count
움직임이 줄어들면 애니메이션이 무시됩니다.

useReducedMotion으로 래핑하고 애니메이션 변형을 단락시킵니다.

확인: System → Motion preferences → reduce motion; reload
모션 추가 후 대형 번들

'motion/react'에서 필요한 것만 가져옵니다. 모든 것을 다시 내보내지 마십시오.

확인: Bundle analyzer on the chunks

대안

Motion.dev Animations Skill 다른 것과 비교

대안언제 쓰나단점/장점
magic-ui-mcp맞춤형 모션이 아닌 사전 제작된 애니메이션 구성 요소를 원합니다.맞춤형이 줄어들고 채택 속도가 빨라집니다.
cc-frontend-skill특별히 Motion.dev가 아닌 일반적인 프런트엔드 지침을 원합니다.애니메이션 중심이 아님
excalidraw-skill웹 애니메이션이 아닌 다이어그램을 원합니다다른 문제

더 보기

리소스

📖 GitHub에서 공식 README 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기