{"_id":"@blinn-motion/vue","_rev":"4-64bd67570e98ddaba68c7cc4ce77847e","name":"@blinn-motion/vue","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@blinn-motion/vue","version":"0.1.0","license":"MIT","_id":"@blinn-motion/vue@0.1.0","maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"homepage":"https://blinnmotion.com","bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"dist":{"shasum":"f6d40e1ae9b62e1273d9965189c01696364ff998","tarball":"https://registry.npmjs.org/@blinn-motion/vue/-/vue-0.1.0.tgz","fileCount":7,"integrity":"sha512-Y6vUr8Xht+LEmI4jGT93eNNcUdSsx1BG9nR9razQQx4MkAKntf7XsQvmEnFqUeQHRPBW2CkhDYToJvgkCqjbFA==","signatures":[{"sig":"MEQCIBPNXkZS77NaoJJiNTnk/yZBfLJ3N3s+Lf/O9YTGheIsAiAgrtF8qViAYBebB8anOaWndPbeyWMIurt8pWCbI4EZ8w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fvue@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":53338},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"2532aab4276d43f115627973bcd29cfcd0f95600","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"gron371","email":"ismailyagci371@gmail.com"},"repository":{"url":"git+https://github.com/ismailyagci/blinn-motion.git","type":"git"},"_npmVersion":"10.9.8","description":"Blinn Motion Vue adapter — <BlinnMotion/> component and useBlinnMotion() composable for DOM/Canvas backends.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@blinn-motion/dom":"^0.1.0","@blinn-motion/core":"^0.1.0","@blinn-motion/canvas":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13"},"peerDependencies":{"vue":">=3.3"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.1.0_1784220079727_0.26467082613460424","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@blinn-motion/vue","version":"0.1.1","license":"MIT","_id":"@blinn-motion/vue@0.1.1","maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"homepage":"https://blinnmotion.com","bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"dist":{"shasum":"35c524de0db5cb53675c91227d3ce1ee3fff4ce5","tarball":"https://registry.npmjs.org/@blinn-motion/vue/-/vue-0.1.1.tgz","fileCount":7,"integrity":"sha512-eSZ89Y13zaE2Uplue+jk2qIjDZtiWcrJStgFTdympePHfhIh+68fB+Q0Yfsjz3vcjFp7VriYj8xdNegE3YoIlw==","signatures":[{"sig":"MEQCIAeLOLJxuxKYK2VtsDoOOdy3gKLx9shbZw0eYxiucdouAiAlmoADKGUtSM1lqkPBKFW3Mx87vF3Kk1eWRKxPj9sqdw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fvue@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":53338},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"befca5fac3e3f011f219a040b6cf69eff138bdf4","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"gron371","email":"ismailyagci371@gmail.com"},"repository":{"url":"git+https://github.com/ismailyagci/blinn-motion.git","type":"git"},"_npmVersion":"10.9.8","description":"Blinn Motion Vue adapter — <BlinnMotion/> component and useBlinnMotion() composable for DOM/Canvas backends.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@blinn-motion/dom":"^0.1.1","@blinn-motion/core":"^0.1.1","@blinn-motion/canvas":"^0.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13"},"peerDependencies":{"vue":">=3.3"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.1.1_1784223398660_0.2021124438677755","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@blinn-motion/vue","version":"0.1.2","license":"MIT","_id":"@blinn-motion/vue@0.1.2","maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"homepage":"https://blinnmotion.com","bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"dist":{"shasum":"31f48728cd0715290e3729942121d0e0d9d4f7d5","tarball":"https://registry.npmjs.org/@blinn-motion/vue/-/vue-0.1.2.tgz","fileCount":7,"integrity":"sha512-5tT0D7Wt7Q2zH0amZgJ1h1acJlbWOxZ9Gwd3JrwSUSDFwJ811VGwCr0qs3wCWmT8lC+fs+NYMDnc+QlAsTiF4A==","signatures":[{"sig":"MEUCIQDRcYZbki6vSkmGe4MMjXBvq0Ja5maQaKyiGCgAshIS4AIgAveHwpuV3ww9sY1siB7e4+Itr4MBVI/P9CSuUuqfcUY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fvue@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":53338},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"58f09492a6476c188e3c5b91676df6c6464a13d8","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"gron371","email":"ismailyagci371@gmail.com"},"repository":{"url":"git+https://github.com/ismailyagci/blinn-motion.git","type":"git"},"_npmVersion":"10.9.8","description":"Blinn Motion Vue adapter — <BlinnMotion/> component and useBlinnMotion() composable for DOM/Canvas backends.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@blinn-motion/dom":"^0.1.2","@blinn-motion/core":"^0.1.2","@blinn-motion/canvas":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13"},"peerDependencies":{"vue":">=3.3"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.1.2_1784225031829_0.09687169816636354","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@blinn-motion/vue","version":"0.1.3","description":"Blinn Motion Vue adapter — <BlinnMotion/> component and useBlinnMotion() composable for DOM/Canvas backends.","license":"MIT","type":"module","sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit"},"peerDependencies":{"vue":">=3.3"},"dependencies":{"@blinn-motion/core":"^0.1.3","@blinn-motion/dom":"^0.1.3","@blinn-motion/canvas":"^0.1.3"},"devDependencies":{"vue":"^3.5.13"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/ismailyagci/blinn-motion.git","directory":"packages/vue"},"homepage":"https://docs.blinnmotion.com/adapters/vue","bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"keywords":["blinn-motion","figma","figma-motion","motiondoc","animation","motion","timeline","vue","vue3","composable","adapter"],"_id":"@blinn-motion/vue@0.1.3","gitHead":"199359afa1ba483192cdd327730a411279238893","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-rLtiV+dTsiW+HUotZ7BaCpJYavwGTykJrRUeJ/I6t4n+HTupC8OteUpqSOMUuqa5OELpE5Ob+nZoJC3LOc++ZA==","shasum":"e63c5eb6f1737e4e9091ce25fe2b0e58dc68e2d7","tarball":"https://registry.npmjs.org/@blinn-motion/vue/-/vue-0.1.3.tgz","fileCount":8,"unpackedSize":56784,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fvue@0.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD/n2nBgb3jtmwzCZ9fhUWL6ryOkECEdMiBAjFgXsL+kQIgdQ2DoVcDyehpNgDnluAwD2WEzk7A2PlQ7J7En8x0NlQ="}]},"_npmUser":{"name":"gron371","email":"ismailyagci371@gmail.com"},"directories":{},"maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.1.3_1784231272775_0.4631257587274573"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-16T16:41:19.587Z","modified":"2026-07-16T19:47:53.228Z","0.1.0":"2026-07-16T16:41:19.869Z","0.1.1":"2026-07-16T17:36:38.805Z","0.1.2":"2026-07-16T18:03:51.953Z","0.1.3":"2026-07-16T19:47:52.907Z"},"bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"license":"MIT","homepage":"https://docs.blinnmotion.com/adapters/vue","repository":{"type":"git","url":"git+https://github.com/ismailyagci/blinn-motion.git","directory":"packages/vue"},"description":"Blinn Motion Vue adapter — <BlinnMotion/> component and useBlinnMotion() composable for DOM/Canvas backends.","maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"readme":"# @blinn-motion/vue\n\n[![npm](https://img.shields.io/npm/v/@blinn-motion/vue.svg)](https://www.npmjs.com/package/@blinn-motion/vue)\n[![license](https://img.shields.io/npm/l/@blinn-motion/vue.svg)](https://github.com/ismailyagci/blinn-motion/blob/main/LICENSE)\n\n**Vue 3 adapter for [Blinn Motion](https://blinnmotion.com)** — component, composable, and low-level attach helper. Same MotionDoc + `sample(doc, t)` pipeline as React, Svelte, and vanilla.\n\n## Install\n\n```bash\nnpm install @blinn-motion/vue\n# peer: vue ^3\n```\n\n## Quick start\n\n```vue\n<script setup lang=\"ts\">\nimport { BlinnMotion } from \"@blinn-motion/vue\";\nimport doc from \"./card.motion.json\";\n</script>\n\n<template>\n  <BlinnMotion\n    :doc=\"doc\"\n    renderer=\"dom\"\n    :loop=\"true\"\n    :autoplay=\"true\"\n    :style=\"{ width: '375px', height: '600px' }\"\n  />\n</template>\n```\n\n## Live demo\n\n[vue.blinnmotion.com](https://vue.blinnmotion.com)\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `doc` | `MotionDoc` | required | Motion document |\n| `renderer` | `\"dom\" \\| \"canvas\"` | `\"dom\"` | Backend |\n| `loop` | `boolean` | `true` | Loop |\n| `autoplay` | `boolean` | `true` | Play on mount |\n| `rate` | `number` | `1` | Speed |\n| `progress` | `number` | — | Controlled `0…1` |\n| `onFrame` | `(time, fraction) => void` | — | Frame callback |\n| `className` / `style` | | | Host element |\n\n## Template ref (imperative)\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { BlinnMotion, type BlinnMotionHandle } from \"@blinn-motion/vue\";\nimport doc from \"./card.motion.json\";\n\nconst motion = ref<BlinnMotionHandle | null>(null);\n</script>\n\n<template>\n  <BlinnMotion ref=\"motion\" :doc=\"doc\" :autoplay=\"false\" />\n  <button @click=\"motion?.play()\">Play</button>\n  <button @click=\"motion?.setProgress(0.5)\">Half</button>\n</template>\n```\n\nHandle: `play` · `pause` · `stop` · `toggle` · `seek` · `seekFraction` · `setProgress` · `setRate`\n\n## Controlled progress\n\n```vue\n<script setup>\nimport { ref } from \"vue\";\nimport { BlinnMotion } from \"@blinn-motion/vue\";\nimport doc from \"./card.motion.json\";\n\nconst progress = ref(0);\n// bind progress from scroll / scrubber\n</script>\n\n<template>\n  <BlinnMotion :doc=\"doc\" :progress=\"progress\" />\n  <input v-model.number=\"progress\" type=\"range\" min=\"0\" max=\"1\" step=\"0.001\" />\n</template>\n```\n\n## Composable: `useBlinnMotion`\n\n```ts\nimport { ref, onMounted } from \"vue\";\nimport { useBlinnMotion } from \"@blinn-motion/vue\";\nimport doc from \"./card.motion.json\";\n\nconst host = ref<HTMLElement | null>(null);\nconst { controls } = useBlinnMotion(host, doc, { renderer: \"canvas\", autoplay: true });\n```\n\n## Low-level: `attachBlinnMotion`\n\nFramework-agnostic mount (tests, custom hosts):\n\n```ts\nimport { attachBlinnMotion } from \"@blinn-motion/vue\";\n\nconst attached = attachBlinnMotion(el, { doc, renderer: \"dom\", autoplay: true });\nattached.play();\nattached.dispose();\n```\n\n## Docs\n\n- [Vue adapter](https://docs.blinnmotion.com/adapters/vue)\n- [Playback](https://docs.blinnmotion.com/guides/playback)\n- [Landing](https://blinnmotion.com) · [GitHub](https://github.com/ismailyagci/blinn-motion)\n\n## License\n\nMIT © Blinn Motion\n","readmeFilename":"README.md","keywords":["blinn-motion","figma","figma-motion","motiondoc","animation","motion","timeline","vue","vue3","composable","adapter"]}