Motion.dev Animations Skill MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

animation/Motion.dev 프롬프트에서 자동 활성화
입장, 스크롤, 제스처, 마이크로 및 레이아웃 애니메이션 패턴
Honors는 기본적으로 모션을 선호합니다.
60fps+, <50KB 번들, 레이아웃 변경 없음을 목표로 합니다.
GPU 가속 변환; 레이아웃 소품으로 인한 버벅거림 없음

라이브 데모

실제 사용 모습

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

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "motion-dev-animations-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "motion-dev-animations-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
          "~/.claude/skills/motion-dev-animations"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Motion.dev Animations Skill

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

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

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

사전 조건

반응 + Motion.dev — npm 아이 모션
스킬 장착 — ~/.claude/skills/에 git 복제

흐름

효과를 설명하세요.

영웅의 H1, 부제목 및 CTA에 엇갈린 페이드업 입구를 추가합니다. 60ms 엇갈림.✓ 복사됨

→ Motion.div가 포함된 Motion.dev 코드, 전환 스프링, 스태거를 통한 지연
모션 감소 폴백

prefers-reduced-motion이 애니메이션을 깔끔하게 건너뛰는지 확인하세요.✓ 복사됨

→ useReducedMotion 후크 또는 CSS 미디어 쿼리 적용됨

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

함정

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

함께 쓰기: magic-ui-mcp

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

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

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

흐름

스크롤 시 공개

각 섹션이 뷰포트에 들어갈 때마다 애니메이션을 적용합니다(1회, 30% 임계값).✓ 복사됨

→ 한 번 + 금액으로 useInView
시차 전경

장식용 전경 SVG에 미묘한 시차 오프셋을 추가합니다.✓ 복사됨

→ useScroll + useTransform은 scrollYProgress를 y로 매핑합니다.

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

함정

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

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

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

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

흐름

호버 리프트

마우스 오버 시: 4px 상승, 미묘한 그림자 스케일; 휴가를 마치고 다시 봄.✓ 복사됨

→ whileHover와 스프링; GPU 친화적인 변환
자기 드래그

dragElastic 0.15. 탄성 경계를 사용하여 드래그 가능하게 만듭니다.✓ 복사됨

→ drag + dragConstraints + dragElastic이 올바르게 설정됨

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

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

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

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

흐름

항목에 레이아웃 활성화

목록 항목에 레이아웃 애니메이션을 추가합니다. Enter/Exit에도 애니메이션을 적용합니다.✓ 복사됨

→ <motion.li 레이아웃> + AnimatePresence
움직임 감소

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	웹 애니메이션이 아닌 다이어그램을 원합니다	다른 문제

Motion.dev Animations Skill