Motion.dev 애니메이션 스킬은(는) 무엇을 하나요?
Motion.dev를 위한 Claude Code 스킬 — 120fps 웹 애니메이션, 스프링 물리, 스크롤 효과, 제스처 상호작용
개요
이 스킬은 Motion.dev 라이브러리를 Claude Code에서 효율적으로 사용할 수 있게 해줍니다. Motion.dev는 웹 애니메이션을 위한 강력하고 유연한 도구로서, 120fps 성능과 직관적인 API를 제공합니다.
주요 기능
- 고성능 애니메이션: 120fps로 동작하는 부드러운 CSS 및 JavaScript 애니메이션
- 스프링 물리학: 자연스러운 물리 기반 스프링 애니메이션 (
spring()) - 스크롤 효과: 스크롤 기반 애니메이션 및 패럴랙스 효과 (
scroll()) - 제스처 상호작용: 드래그, 핀치, 호버 등 제스처 지원 (
drag(),hover(),press()) - 트랜지션: 간편한 상태 전환 애니메이션 (
transition()) - 타임라인: 복잡한 순차/병렬 애니메이션 제어 (
timeline())
시작하기
npm install motion
또는 CDN:
<script src="https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js"></script>
사용 예제
기본 애니메이션
import { animate } from "motion"
animate(".box", { x: 100, opacity: 0 }, { duration: 0.5 })
스프링 애니메이션
import { animate, spring } from "motion"
animate(".box", { scale: 1.5 }, { easing: spring() })
스크롤 애니메이션
import { scroll } from "motion"
scroll(
animate(".progress", { scaleX: [0, 1] }),
{ target: document.querySelector("main") }
)
드래그 상호작용
import { drag } from "motion"
drag(".draggable-box", {
onDrag: (event, info) => {
console.log(info.offset)
}
})
문서 및 참고
라이선스
이 스킬은 교육 및 참고 목적으로 제공됩니다. Motion.dev 자체는 MIT 라이선스로 배포됩니다.