{"_id":"@blinn-motion/dom","_rev":"4-baf00b3a82d41b50994cffc39e10ba09","name":"@blinn-motion/dom","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@blinn-motion/dom","version":"0.1.0","license":"MIT","_id":"@blinn-motion/dom@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":"8e45fd052ab7faf9f7fb3c5263d02964b1e636c6","tarball":"https://registry.npmjs.org/@blinn-motion/dom/-/dom-0.1.0.tgz","fileCount":8,"integrity":"sha512-MonfXhMn35a34eb5mX6m58MUSw5WDf9ZPydss2TFb/HCLZKozpIxNfN+rJBUbEGtprXmI3BRWNPl2kxJZgDcdw==","signatures":[{"sig":"MEUCIQDiwfhpClU8AS2wnWEPBluBLD0UuZJFFAck03lJPbiYMwIgLTResc8YrUTFeq2AexXc4rFykPrdj/eGezsIw6UUoAw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fdom@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":172208},"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 DOM adapter — plays a MotionDoc into nested DOM/CSS layers (transforms, SVG paths, masks, procedural shaders). Built on @blinn-motion/core.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@blinn-motion/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/dom_0.1.0_1784220067991_0.6217832530918115","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@blinn-motion/dom","version":"0.1.1","license":"MIT","_id":"@blinn-motion/dom@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":"6bdf5c3d393dbd41bb7272d192616e3d140146c2","tarball":"https://registry.npmjs.org/@blinn-motion/dom/-/dom-0.1.1.tgz","fileCount":8,"integrity":"sha512-mnUl3lgamMhru1uZCe9ayHgdJPwNC5ELuBamhXii5azjjHjU6Z2Dhyl1lKVfVeeC+iVXCS2Y2xSexRBV+1twRA==","signatures":[{"sig":"MEQCIEpDGuiIZmZ6AdE5NDwLh/2BUsxvaPFk05Uhda18UzKmAiBpkTgpHKtlE5fCuJACidKUxNJVc33qj6t8GOiruBzLow==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fdom@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":172208},"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 DOM adapter — plays a MotionDoc into nested DOM/CSS layers (transforms, SVG paths, masks, procedural shaders). Built on @blinn-motion/core.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@blinn-motion/core":"^0.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/dom_0.1.1_1784223388143_0.7755419890757866","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@blinn-motion/dom","version":"0.1.2","license":"MIT","_id":"@blinn-motion/dom@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":"118b62babf4e87c8882a970cbf84b15b1758f1ca","tarball":"https://registry.npmjs.org/@blinn-motion/dom/-/dom-0.1.2.tgz","fileCount":8,"integrity":"sha512-JVYMbxhsq//tb4rxK7qxlUoLkmU28sFOuzwDsF+vsJ7Ubi2kMcY94Qdshaf0J3J0pxtnr3m/G3us6ANhV05B9Q==","signatures":[{"sig":"MEYCIQCSLI9XIhivgtQMPz3bR2hDz3j35yrZqNcGvhmj92LKjwIhAO1TBy/MQgBrlg+2aOG034JmmhoPb/ZKBgM4Dhg3OZIo","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fdom@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":175899},"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 DOM adapter — plays a MotionDoc into nested DOM/CSS layers (transforms, SVG paths, masks, procedural shaders). Built on @blinn-motion/core.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","dependencies":{"@blinn-motion/core":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/dom_0.1.2_1784225020419_0.6710611368510941","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@blinn-motion/dom","version":"0.1.3","description":"Blinn Motion DOM adapter — plays a MotionDoc into nested DOM/CSS layers (transforms, SVG paths, masks, procedural shaders). Built on @blinn-motion/core.","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"},"dependencies":{"@blinn-motion/core":"^0.1.3"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/ismailyagci/blinn-motion.git","directory":"packages/dom"},"homepage":"https://docs.blinnmotion.com/adapters/dom","bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"keywords":["blinn-motion","figma","figma-motion","motiondoc","animation","motion","timeline","dom","css","svg","adapter"],"_id":"@blinn-motion/dom@0.1.3","gitHead":"199359afa1ba483192cdd327730a411279238893","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-wgy4Y43nOtA4JjBPLeqeipSBeKxxcHoTQsTVWtjXDtjtg5kGGPSbq8Zku3q+OyoVG5/V/MIUIa4lKXk3EghQ6g==","shasum":"7c2d90afa5e24206b938c222ebf1867c8e16bbb9","tarball":"https://registry.npmjs.org/@blinn-motion/dom/-/dom-0.1.3.tgz","fileCount":9,"unpackedSize":179859,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blinn-motion%2fdom@0.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCbSs5b65ECpKhTLppZr1A26LcfTq3zKn5JipXRBBM5owIgV1xshZFjhL9H3QuRqluPAXuFH8UK7NEZvOyMwmCMK7M="}]},"_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/dom_0.1.3_1784231262360_0.3814537987862705"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-16T16:41:07.794Z","modified":"2026-07-16T19:47:42.838Z","0.1.0":"2026-07-16T16:41:08.123Z","0.1.1":"2026-07-16T17:36:28.282Z","0.1.2":"2026-07-16T18:03:40.607Z","0.1.3":"2026-07-16T19:47:42.487Z"},"bugs":{"url":"https://github.com/ismailyagci/blinn-motion/issues"},"license":"MIT","homepage":"https://docs.blinnmotion.com/adapters/dom","repository":{"type":"git","url":"git+https://github.com/ismailyagci/blinn-motion.git","directory":"packages/dom"},"description":"Blinn Motion DOM adapter — plays a MotionDoc into nested DOM/CSS layers (transforms, SVG paths, masks, procedural shaders). Built on @blinn-motion/core.","maintainers":[{"name":"gron371","email":"ismailyagci371@gmail.com"}],"readme":"# @blinn-motion/dom\n\n[![npm](https://img.shields.io/npm/v/@blinn-motion/dom.svg)](https://www.npmjs.com/package/@blinn-motion/dom)\n[![license](https://img.shields.io/npm/l/@blinn-motion/dom.svg)](https://github.com/ismailyagci/blinn-motion/blob/main/LICENSE)\n\n**Full-fidelity DOM / CSS / SVG adapter for [Blinn Motion](https://blinnmotion.com).**\n\nBuilds nested absolutely positioned layers and, each frame, samples the MotionDoc with [`@blinn-motion/core`](https://www.npmjs.com/package/@blinn-motion/core) then writes CSS transforms, paints, masks, and SVG paths. Same render method as Canvas and every framework adapter — identical timing.\n\n## Install\n\n```bash\nnpm install @blinn-motion/dom\n# pulls in @blinn-motion/core\n```\n\nBrowser-only (needs `HTMLElement` / CSSOM). For a pure canvas path, use [`@blinn-motion/canvas`](https://www.npmjs.com/package/@blinn-motion/canvas).\n\n## Quick start\n\n```ts\nimport { create } from \"@blinn-motion/dom\";\nimport doc from \"./card.motion.json\";\n\nconst stage = document.getElementById(\"stage\")!;\nconst player = create(stage, doc, {\n loop: true,\n autoplay: true,\n rate: 1,\n onframe: (time, fraction) => {\n // live scrubber / debug\n },\n});\n\nplayer.pause();\nplayer.seek(0.8);\nplayer.seekFraction(0.5);\nplayer.setProgress(0.25); // 0…1 — scroll / gesture driven\nplayer.setRate(1.5);\nplayer.play();\n```\n\n```html\n
\n```\n\n## What it paints\n\n- Transforms (translate, rotate, scale) with layer anchors \n- Solid / linear / radial / angular / diamond fills + animated gradient stops \n- Strokes (uniform + per-side), blend modes, opacity \n- Text layers, images \n- Vector **paths** with PATH_TRIM (stroke reveal) \n- Polygon / star / arc via `clip-path` \n- Masks, drop/inner shadows, blur, glass/backdrop filters \n- Nested layer trees (parent transforms compose like the DOM)\n\n## API\n\n### `create(container, doc, options?) → DomPlayer`\n\n| Option | Default | Description |\n|--------|---------|-------------|\n| `loop` | `true` | Loop when the timeline ends |\n| `rate` | `1` | Playback speed multiplier |\n| `autoplay` | `false` | Start the ticker immediately (`true` in most framework wrappers) |\n| `onframe` | — | `(time, fraction) => void` each frame |\n\n### `DomPlayer`\n\n| Method | Description |\n|--------|-------------|\n| `play()` / `pause()` / `stop()` / `toggle()` | Transport |\n| `seek(time)` | Seek to absolute seconds |\n| `seekFraction(f)` | Seek with `f ∈ [0, 1]` |\n| `setProgress(p)` | Controlled 0…1 (pauses clock drive) |\n| `setRate(rate)` | Speed multiplier |\n| *(host cleanup)* | Call `pause()` and clear the container when unmounting |\n\nAlso exported: `paintToCss`, `effectsToCss`, `colorCss`, `shapeClipCss` for custom tooling.\n\n## Live demo\n\n[vanilla.blinnmotion.com](https://vanilla.blinnmotion.com) — dual DOM + Canvas lab.\n\n## Framework wrappers\n\nPrefer a component when you use a UI framework:\n\n| Stack | Package |\n|-------|---------|\n| React | [`@blinn-motion/react`](https://www.npmjs.com/package/@blinn-motion/react) |\n| Vue | [`@blinn-motion/vue`](https://www.npmjs.com/package/@blinn-motion/vue) |\n| Svelte | [`@blinn-motion/svelte`](https://www.npmjs.com/package/@blinn-motion/svelte) |\n| Angular | [`@blinn-motion/angular`](https://www.npmjs.com/package/@blinn-motion/angular) |\n| Lit | [`@blinn-motion/lit`](https://www.npmjs.com/package/@blinn-motion/lit) |\n\nAll of them call this adapter (or Canvas) under the hood.\n\n## Docs\n\n- [DOM adapter guide](https://docs.blinnmotion.com/adapters/dom)\n- [Playback](https://docs.blinnmotion.com/guides/playback)\n- [MotionDoc format](https://docs.blinnmotion.com/concepts/motiondoc)\n\n## License\n\nMIT © Blinn Motion\n","readmeFilename":"README.md","keywords":["blinn-motion","figma","figma-motion","motiondoc","animation","motion","timeline","dom","css","svg","adapter"]}