{"_id":"@dong-gri/motionkit","_rev":"3-b375a68105da30b22d31560a135c3a8d","name":"@dong-gri/motionkit","dist-tags":{"latest":"0.8.1"},"versions":{"0.8.0":{"name":"@dong-gri/motionkit","version":"0.8.0","keywords":["animation","motion","interaction","scroll","parallax","cursor","lightbox","marquee","counter","typewriter","text-effect","reveal","web-animation","vanilla-js","ui"],"author":{"url":"https://dongri.me","name":"dongri"},"license":"MIT","_id":"@dong-gri/motionkit@0.8.0","maintainers":[{"name":"dong-gri","email":"official@dongri.me"}],"homepage":"https://git.dongri.me/example/motionKit","bugs":{"url":"https://github.com/catgarret/motionKit/issues"},"dist":{"shasum":"d5beeef1702fd99ece55abe42f590135923ca657","tarball":"https://registry.npmjs.org/@dong-gri/motionkit/-/motionkit-0.8.0.tgz","fileCount":88,"integrity":"sha512-u5h7n5D1g5uNTulKL5WFzIWDUxUXJ3pTciGlb1yCOaVgctWUp1rB0fEJZLZekP25Sog52hvAmz2+ySBubvNidQ==","signatures":[{"sig":"MEUCIQC5UYRQ4pdpiyBykPHwXkthW/vyZl1oZcDZTCh/RlBnFwIgBcMeIItCD8K0DkCjRWEyWgX0UaNaCpYBt122+oV973I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2350146},"main":"./dist/motionkit.umd.cjs","type":"module","unpkg":"./dist/motionkit.umd.min.js","module":"./dist/motionkit.js","browser":"./dist/motionkit.umd.cjs","engines":{"node":"^20.19.0 || >=22.12.0"},"exports":{".":{"import":"./dist/motionkit.js","default":"./dist/motionkit.js","require":"./dist/motionkit.umd.cjs"},"./min":"./dist/motionkit.min.js","./umd":"./dist/motionkit.umd.min.js","./vue":"./src/adapters/vue.js","./react":"./src/adapters/react.js","./jquery":"./src/adapters/jquery.js","./style.css":"./dist/motionkit.css","./package.json":"./package.json"},"gitHead":"2310303ee690da526f47e57aa1ada3d5749882c9","scripts":{"dev":"vite","lint":"eslint src tests/*.js tests/*.mjs demo/playground.js","test":"npm run test:utils && npm run test:contract && npm run test:requirements && npm run test:docs && npm run test:demo && npm run test:package","build":"npm run build:esm && npm run build:umd && npm run build:min","verify":"npm run lint && npm run build && npm test && npm audit --audit-level=low && npm pack --dry-run","preview":"vite preview","build:esm":"vite build","build:min":"node scripts/build-min.mjs","build:umd":"vite build --config vite.config.umd.js && node scripts/copy-umd.mjs","test:demo":"node tests/retry-browser-test.mjs tests/demo-qa.mjs","test:docs":"node scripts/generate-contract-doc.mjs --check","test:utils":"node tests/utils.mjs","test:browser":"node tests/retry-browser-test.mjs tests/browser-smoke.mjs","test:package":"node tests/package-check.mjs","docs:contract":"node scripts/generate-contract-doc.mjs","test:contract":"node tests/feature-contract.mjs","test:requirements":"node tests/owner-requirements.mjs","test:animated-media":"node tests/retry-browser-test.mjs tests/animated-media-qa.mjs"},"_npmUser":{"name":"dong-gri","email":"official@dongri.me"},"jsdelivr":"./dist/motionkit.umd.min.js","repository":{"url":"git+https://github.com/catgarret/motionKit.git","type":"git"},"_npmVersion":"11.12.1","description":"Configurable web interaction toolkit — 34 motion, media, scroll, loader, and text modules driven by data-mk-* attributes or a JavaScript API. Zero required dependencies.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.9.0","dependencies":{"gsap":"^3.15.0","lenis":"^1.3.25"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.5","eslint":"^9.39.5","playwright-core":"^1.61.1"},"peerDependencies":{"vue":">=3.3.0","react":">=18.0.0","jquery":">=3.6.0"},"peerDependenciesMeta":{"vue":{"optional":true},"react":{"optional":true},"jquery":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/motionkit_0.8.0_1784442875353_0.9498683514477921","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.1":{"name":"@dong-gri/motionkit","version":"0.8.1","keywords":["animation","motion","interaction","scroll","parallax","cursor","lightbox","marquee","counter","typewriter","text-effect","reveal","web-animation","vanilla-js","ui"],"author":{"url":"https://dongri.me","name":"dongri"},"license":"MIT","_id":"@dong-gri/motionkit@0.8.1","maintainers":[{"name":"dong-gri","email":"official@dongri.me"}],"homepage":"https://git.dongri.me/example/motionKit","bugs":{"url":"https://github.com/catgarret/motionKit/issues"},"dist":{"shasum":"c71b925dcf0118182d406975cd5272bddf4506ce","tarball":"https://registry.npmjs.org/@dong-gri/motionkit/-/motionkit-0.8.1.tgz","fileCount":84,"integrity":"sha512-l6Ma1LVA1bbs4LF1KxZHm/lRo1hfj4uBvH9CQ65HKrYDfpL9/xzODmO1NoxZUQdgpxfjScyNuUMlW6KCSQS+NQ==","signatures":[{"sig":"MEYCIQD2dDDws8BLaRMuzx1zpTixZDseIWgnscC7/kOvAvIzRQIhAJgxm6MuDsudBaLW3NrCJkylcZePg9alxgpQDnVMQeIA","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2348182},"main":"./dist/motionkit.umd.cjs","type":"module","unpkg":"./dist/motionkit.umd.min.js","module":"./dist/motionkit.js","browser":"./dist/motionkit.umd.cjs","engines":{"node":"^20.19.0 || >=22.12.0"},"exports":{".":{"import":"./dist/motionkit.js","default":"./dist/motionkit.js","require":"./dist/motionkit.umd.cjs"},"./min":"./dist/motionkit.min.js","./umd":"./dist/motionkit.umd.min.js","./vue":"./src/adapters/vue.js","./react":"./src/adapters/react.js","./jquery":"./src/adapters/jquery.js","./style.css":"./dist/motionkit.css","./package.json":"./package.json"},"gitHead":"2123ef885abd55eb9244d0f46630196f334f6045","scripts":{"dev":"vite","lint":"eslint src tests/*.js tests/*.mjs demo/playground.js","test":"npm run test:utils && npm run test:contract && npm run test:requirements && npm run test:docs && npm run test:demo && npm run test:package","build":"npm run build:esm && npm run build:umd && npm run build:min","verify":"npm run lint && npm run build && npm test && npm audit --audit-level=low && npm pack --dry-run","preview":"vite preview","build:esm":"vite build","build:min":"node scripts/build-min.mjs","build:umd":"vite build --config vite.config.umd.js && node scripts/copy-umd.mjs","test:demo":"node tests/retry-browser-test.mjs tests/demo-qa.mjs","test:docs":"node scripts/generate-contract-doc.mjs --check","test:node":"npm run test:utils && npm run test:contract && npm run test:requirements && npm run test:docs && npm run test:package","test:utils":"node tests/utils.mjs","test:browser":"node tests/retry-browser-test.mjs tests/browser-smoke.mjs","test:package":"node tests/package-check.mjs","verify:quick":"npm run lint && npm run build && npm run test:node && npm pack --dry-run","docs:contract":"node scripts/generate-contract-doc.mjs","test:contract":"node tests/feature-contract.mjs","test:requirements":"node tests/owner-requirements.mjs","test:animated-media":"node tests/retry-browser-test.mjs tests/animated-media-qa.mjs"},"_npmUser":{"name":"dong-gri","email":"official@dongri.me"},"jsdelivr":"./dist/motionkit.umd.min.js","repository":{"url":"git+https://github.com/catgarret/motionKit.git","type":"git"},"_npmVersion":"11.12.1","description":"Configurable web interaction toolkit — 34 motion, media, scroll, loader, and text modules driven by data-mk-* attributes or a JavaScript API. Zero required dependencies.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.9.0","dependencies":{"gsap":"^3.15.0","lenis":"^1.3.25"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.5","eslint":"^9.39.5","playwright-core":"^1.61.1"},"peerDependencies":{"vue":">=3.3.0","react":">=18.0.0","jquery":">=3.6.0"},"peerDependenciesMeta":{"vue":{"optional":true},"react":{"optional":true},"jquery":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/motionkit_0.8.1_1784443748712_0.701114432655733","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2026-07-19T06:34:35.166Z","modified":"2026-07-19T08:51:50.360Z","0.8.0":"2026-07-19T06:34:35.522Z","0.8.1":"2026-07-19T06:49:08.893Z"},"bugs":{"url":"https://github.com/catgarret/motionKit/issues"},"author":{"url":"https://dongri.me","name":"dongri"},"license":"MIT","homepage":"https://git.dongri.me/example/motionKit","keywords":["animation","motion","interaction","scroll","parallax","cursor","lightbox","marquee","counter","typewriter","text-effect","reveal","web-animation","vanilla-js","ui"],"repository":{"url":"git+https://github.com/catgarret/motionKit.git","type":"git"},"description":"Configurable web interaction toolkit — 34 motion, media, scroll, loader, and text modules driven by data-mk-* attributes or a JavaScript API. Zero required dependencies.","maintainers":[{"name":"dong-gri","email":"official@dongri.me"}],"readme":"<div align=\"center\">\n\n<img src=\"logo.svg\" width=\"72\" height=\"72\" alt=\"MotionKit\">\n\n# MotionKit\n\nHTML 속성 또는 JavaScript API로 제어하는 웹 인터랙션 툴킷\n\n한국어 · [English](README.en.md) · [日本語](README.jp.md)\n\n[![npm](https://img.shields.io/npm/v/@dong-gri/motionkit.svg)](https://www.npmjs.com/package/@dong-gri/motionkit) [![license](https://img.shields.io/npm/l/@dong-gri/motionkit.svg)](LICENSE) [![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/@dong-gri/motionkit.svg)](https://www.jsdelivr.com/package/npm/@dong-gri/motionkit)\n\n[라이브 데모](https://git.dongri.me/example/motionKit) · [모듈 레퍼런스](docs/module-reference.md) · [AI 프롬프트 가이드](AI-PROMPT-GUIDE.md) · [기능 계약](FEATURE_CONTRACT.md)\n\n</div>\n\n---\n\nMotionKit은 34개의 인터랙션 모듈(모션·미디어·스크롤·로더·텍스트)을 `data-mk-*` 속성 하나로 붙이거나 JavaScript API로 세밀하게 제어할 수 있는 라이브러리입니다. 코어는 외부 의존성이 없으며, 미지원 브라우저나 저사양 기기에서는 효과만 비활성화되고 콘텐츠는 그대로 유지됩니다.\n\n> AI 코딩 도구(Cursor, Claude 등)로 작업한다면 [AI 프롬프트 가이드](AI-PROMPT-GUIDE.md)를 참고하세요. 모션·인터랙션을 MotionKit 모듈로 우선 적용하도록 지시하는, 그대로 붙여넣는 프롬프트가 들어 있습니다.\n\n## 설치\n\n### npm\n\n```bash\nnpm install @dong-gri/motionkit\n```\n\n```js\nimport MotionKit from '@dong-gri/motionkit';\nimport '@dong-gri/motionkit/style.css';\n\nMotionKit.autoInit();\n```\n\n### CDN (설치 없이 script 태그)\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@dong-gri/motionkit/dist/motionkit.min.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/@dong-gri/motionkit/dist/motionkit.umd.min.js\"></script>\n<script>\n  MotionKit.autoInit();\n</script>\n```\n\n### CDN (ESM)\n\n```js\nimport MotionKit from 'https://cdn.jsdelivr.net/npm/@dong-gri/motionkit/+esm';\n```\n\n## 빠른 시작\n\nHTML 속성만으로 동작합니다.\n\n```html\n<h2 data-mk-text-reveal=\"stream\">문장이 흐르듯 나타납니다</h2>\n<strong data-mk-counter=\"pop\" data-mk-to=\"98760\" data-mk-format=\",\">98,760</strong>\n<img data-mk-lazy=\"skeleton\" data-src=\"./cover.webp\" alt=\"Cover\">\n<section data-mk-reveal=\"fade-up\">스크롤 진입 시 나타납니다</section>\n```\n\n동일한 기능을 JavaScript API로도 쓸 수 있습니다.\n\n```js\nMotionKit.counter('#total', { preset: 'pop', to: 98760, format: ',' });\nMotionKit.reveal('.card', { preset: 'fade-up', stagger: 0.06 });\nconst lightbox = MotionKit.lightbox('.gallery img', { group: 'work', minimap: true });\n```\n\n## 선택적 의존성\n\n코어는 단독으로 동작합니다. 아래 라이브러리가 페이지에 있으면 자동으로 감지해 스크롤 스크럽(GSAP + ScrollTrigger)과 스무스 스크롤(Lenis)에 활용하고, 없으면 표준 API로 폴백합니다.\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/lenis@1/dist/lenis.min.js\"></script>\n```\n\n스무스 스크롤은 기본 비활성화이며, 필요할 때만 켤 수 있습니다.\n\n```js\nMotionKit.enableSmooth({ lerp: 0.08 });\nMotionKit.disableSmooth();\n```\n\n## 모듈\n\n| 모듈 | 활성화 속성 | 용도 |\n|---|---|---|\n| `ambientMedia` | `data-mk-ambient-media` | 미디어 주변광(Ambient Glow) |\n| `blurText` | `data-mk-blur-text` | 글자별 블러 리빌 |\n| `brushReveal` | `data-mk-brush-reveal` | 포인터 브러시 마스크 리빌 |\n| `cardGlow` | `data-mk-card-glow` | 포인터 스포트라이트·표면 반사·발광 외곽선 |\n| `counter` | `data-mk-counter` | 숫자 카운트·플립·시계·카운트다운 |\n| `cssScroll` | `data-mk-css-scroll` | CSS 변수·애니메이션 타임라인 스크롤 연동 |\n| `cursor` | `data-mk-cursor` | 커스텀 커서 11종 |\n| `fullpage` | `data-mk-fullpage` | 풀페이지 섹션 페이징(세로·가로·혼합축) |\n| `glitch` | `data-mk-glitch` | RGB 슬라이스·글리치 리빌 |\n| `lazy` | `data-mk-lazy` | 이미지 로딩 연출(스켈레톤·픽셀·프린트·디졸브) |\n| `lightbox` | `data-mk-lightbox` | 전체화면 뷰어·그룹·확대·미니맵 |\n| `loader` | `data-mk-loader` | 실제 진행률 연동 로더 |\n| `magnetic` | `data-mk-magnetic` | 포인터 자석 반응 |\n| `marquee` | `data-mk-marquee` | 무한 흐름 텍스트 |\n| `mouseParallax` | `data-mk-mouse-parallax` | 포인터·자이로 패럴럭스 |\n| `overflowText` | `data-mk-overflow-text` | 넘치는 텍스트 처리 8종 |\n| `pageReveal` | `data-mk-page-reveal` | 페이지 진입 오버레이 |\n| `pageTransition` | `data-mk-page-transition` | 동일 출처 페이지 전환 |\n| `parallax` | `data-mk-parallax` | 스크롤 패럴럭스 |\n| `progress` | `data-mk-progress` | 읽기 진행률 바·링 |\n| `reveal` | `data-mk-reveal` | 스크롤 진입 리빌 |\n| `ripple` | `data-mk-ripple` | 클릭 리플 |\n| `scrollSequence` | `data-mk-scroll-sequence` | 이미지 시퀀스 스크럽 |\n| `scrollVelocity` | `data-mk-scroll-velocity` | 스크롤 속도·방향 반응 |\n| `shuffle` | `data-mk-shuffle` | 문자 셔플 디코드 |\n| `slider` | `data-mk-slider` | 슬라이드·커버플로우 |\n| `stickyStack` | `data-mk-sticky-stack` | 스티키 스택(세로·가로·플로팅) |\n| `textFill` | `data-mk-text-fill` | 스크롤 텍스트 채움 |\n| `textReveal` | `data-mk-text-reveal` | 텍스트 리빌(한글 조합 포함) |\n| `textSplit` | `data-mk-text-split` | 글자·단어 분할 모션 |\n| `textTransition` | `data-mk-text-transition` | 텍스트 교체 전환 |\n| `tilt` | `data-mk-tilt` | 3D 틸트·글레어 |\n| `typewriter` | `data-mk-typewriter` | 타이핑 효과 |\n| `vibrate` | `data-mk-vibrate` | 햅틱 진동 피드백 |\n\n각 모듈의 variant와 옵션 전체 목록은 [모듈 레퍼런스](docs/module-reference.md)와 `motionkit.features.json`을 참고하세요.\n\n## 프레임워크 어댑터\n\n```jsx\nimport { Motion } from '@dong-gri/motionkit/react';\n<Motion as=\"h2\" type=\"textReveal\" options={{ mode: 'hangul' }}>안녕하세요</Motion>\n```\n\n```js\nimport MotionKitVue from '@dong-gri/motionkit/vue';\napp.use(MotionKitVue);\n```\n\n```js\nimport installMotionKit from '@dong-gri/motionkit/jquery';\ninstallMotionKit(window.jQuery);\n$('.card').motionKit('reveal', { preset: 'fade-up' });\n```\n\n## 브라우저 지원\n\nChrome, Edge, Firefox, Safari(데스크톱·모바일)의 최신 버전을 지원합니다. `prefers-reduced-motion`을 켜면 모든 모듈이 애니메이션 없이 최종 상태로 렌더링되며, 미지원 환경에서는 효과가 정적 콘텐츠로 자동 축소됩니다.\n\n## 빌드\n\n```bash\nnpm install\nnpm run build   # dist/ 생성\nnpm run verify  # lint · build · 테스트 · 계약 검증\n```\n\n## 라이선스\n\nMIT © [dongri](https://dongri.me)\n","readmeFilename":"README.md"}