{"_id":"@donkeyclip/motorcortex-svg","name":"@donkeyclip/motorcortex-svg","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@donkeyclip/motorcortex-svg","version":"0.0.1","description":"MotorCortex plugin for rendering raw SVG illustrations with animatable element entities","main":"dist/bundle.cjs.js","module":"dist/bundle.esm.js","browser":"dist/bundle.umd.js","type":"module","author":{"name":"DonkeyClip"},"repository":{"type":"git","url":"git+https://github.com/kissmybutton/mc-svg.git"},"license":"MIT","engines":{"node":">=20"},"scripts":{"lint":"eslint -c .eslintrc src/**/*.js","lint:fix":"npm run lint -- --fix","build":"npm run build:lib && npm run build:demo","build:lib":"rollup -c","start":"npm run build:lib && concurrently -c \"cyan.bold,magenta.bold\" \"npm:build:lib -- -w\"  \"npm:start:demo\" ","start:demo":"webpack serve --mode=development --config ./demo/webpack.config.cjs","build:demo":"webpack --mode=production --config ./demo/webpack.config.cjs","test":"echo \"No tests yet\" && exit 0","test:prod":"npm run lint","prepare":"husky install"},"keywords":["motorcortex","svg","illustration","animation","donkeyclip"],"lint-staged":{"*.{json,md,yml,yaml,css}":["prettier --write"],"*.{js,jsx}":["prettier --write","eslint --fix"]},"peerDependencies":{"@donkeyclip/motorcortex":">=9.17.0"},"devDependencies":{"@babel/cli":"^7.27.2","@babel/core":"^7.27.4","@babel/eslint-parser":"^7.27.5","@babel/plugin-syntax-import-assertions":"^7.27.1","@babel/plugin-syntax-jsx":"^7.27.1","@babel/plugin-transform-react-jsx":"^7.27.1","@babel/preset-env":"^7.29.2","@babel/preset-react":"^7.27.1","@donkeyclip/motorcortex":"^9.24.0","@donkeyclip/motorcortex-player":"2.15.18","@rollup/plugin-babel":"^7.0.0","@rollup/plugin-commonjs":"^29.0.2","@rollup/plugin-json":"6.1.0","@rollup/plugin-node-resolve":"^16.0.1","babel-loader":"^10.1.1","concurrently":"^9.1.2","core-js":"^3.49.0","css-loader":"7.1.4","eslint":"^8.54.0","eslint-config-prettier":"9.1.2","eslint-plugin-babel":"5.3.1","eslint-plugin-import":"^2.31.0","eslint-plugin-n":"14.0.0","eslint-plugin-prettier":"5.5.5","eslint-plugin-promise":"6.6.0","eslint-plugin-react":"^7.37.5","husky":"9.1.7","lint-staged":"^16.4.0","prettier":"3.8.1","rimraf":"6.1.3","rollup":"^4.60.0","style-loader":"^4.0.0","webpack":"^5.99.9","webpack-cli":"^7.0.2","webpack-dev-server":"5.2.3"},"dependencies":{"@rollup/plugin-terser":"^1.0.0"},"_id":"@donkeyclip/motorcortex-svg@0.0.1","gitHead":"4faac84c5714aa8a487f975aae3dd25eecdacf35","bugs":{"url":"https://github.com/kissmybutton/mc-svg/issues"},"homepage":"https://github.com/kissmybutton/mc-svg#readme","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-2CYg+v9k3EO4ATja4nfQ3jRK02YX3Bc73cQxAqYWBGBTPYoMFIg9e/YLvb0KvBhIDgm8FQPkktE+omeL9x8xOQ==","shasum":"b9855c6a7b412d0323b194563dcb1755bd966aab","tarball":"https://registry.npmjs.org/@donkeyclip/motorcortex-svg/-/motorcortex-svg-0.0.1.tgz","fileCount":24,"unpackedSize":41079,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGp4qsAeSOSp9tBcIf+kTGApT4FaSXpYTo4VWq5zTGT3AiEAo41t5aHLpbPn0Ltb9iZ+70ulS3+ZH1gHZigKX3zukiA="}]},"_npmUser":{"name":"atrantidis","email":"atrantidis@gmail.com"},"directories":{},"maintainers":[{"name":"alexdor","email":"aldor94@gmail.com"},{"name":"prieston","email":"priestont@gmail.com"},{"name":"atrantidis","email":"atrantidis@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/motorcortex-svg_0.0.1_1777573228013_0.41784839862324086"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-30T18:20:27.914Z","0.0.1":"2026-04-30T18:20:28.148Z","modified":"2026-04-30T18:20:28.415Z"},"maintainers":[{"name":"alexdor","email":"aldor94@gmail.com"},{"name":"prieston","email":"priestont@gmail.com"},{"name":"atrantidis","email":"atrantidis@gmail.com"}],"description":"MotorCortex plugin for rendering raw SVG illustrations with animatable element entities","homepage":"https://github.com/kissmybutton/mc-svg#readme","keywords":["motorcortex","svg","illustration","animation","donkeyclip"],"repository":{"type":"git","url":"git+https://github.com/kissmybutton/mc-svg.git"},"author":{"name":"DonkeyClip"},"bugs":{"url":"https://github.com/kissmybutton/mc-svg/issues"},"license":"MIT","readme":"# @donkeyclip/motorcortex-svg\n\nA [MotorCortex](https://motorcortexjs.com/) plugin that provides a blank SVG canvas where elements can be dynamically added, removed, and animated.\n\n## Features\n\n- Blank SVG canvas with configurable viewBox and background\n- Add SVG elements at specific timeline positions via `addCustomEntity`\n- Remove elements via `removeCustomEntity`\n- Each entity is a `<g>` wrapper with its own transform — positioned via `translate` and `scale`\n- **CSSEffect from MC core works out of the box** — target entities with `!#entityId` selectors to animate opacity, transform, color, and any CSS property\n- Full forward/backward seek support via MC's VisibilityChannel\n- Zero dependencies — pure SVG\n\n## Installation\n\n```bash\nnpm install @donkeyclip/motorcortex-svg\n```\n\n## Getting Started\n\n```js\nimport { CSSEffect, loadPlugin } from \"@donkeyclip/motorcortex\";\nimport Player from \"@donkeyclip/motorcortex-player\";\nimport SvgPluginDef from \"@donkeyclip/motorcortex-svg\";\n\nconst McSvg = loadPlugin(SvgPluginDef);\n\nconst clip = new McSvg.Clip(\n  { viewBox: \"0 0 500 400\", background: \"#f8f9fa\" },\n  {\n    host: document.getElementById(\"clip\"),\n    containerParams: { width: \"800px\", height: \"600px\" },\n    duration: 5000,\n  },\n);\n\n// Add a red circle at 1s\nclip.addCustomEntity(\n  {\n    svg: '<circle cx=\"0\" cy=\"0\" r=\"40\" fill=\"#e74c3c\"/>',\n    x: 100,\n    y: 100,\n  },\n  \"myCircle\",\n  [],\n  1000,\n);\n\n// Animate it with CSSEffect (from MC core — no plugin-specific Effect needed)\nclip.addIncident(\n  new CSSEffect(\n    { animatedAttrs: { opacity: 0.3 } },\n    { selector: \"!#myCircle\", duration: 1000 },\n  ),\n  2000,\n);\n\nclip.addIncident(\n  new CSSEffect(\n    { animatedAttrs: { transform: { scale: 1.5 } } },\n    { selector: \"!#myCircle\", duration: 1000 },\n  ),\n  3000,\n);\n\nnew Player({ clip });\n```\n\n## API\n\n### SvgClip (Clip)\n\nExtends `BrowserClip`. Creates a root `<svg>` canvas.\n\n| Attr         | Type     | Default           | Description             |\n| ------------ | -------- | ----------------- | ----------------------- |\n| `viewBox`    | `string` | `\"0 0 1000 1000\"` | SVG viewBox             |\n| `background` | `string` | `\"transparent\"`   | Canvas background color |\n\n### addCustomEntity\n\nAdd SVG elements at a specific timeline position:\n\n```js\nclip.addCustomEntity(\n  {\n    svg: '<rect width=\"50\" height=\"50\" fill=\"blue\"/>',\n    x: 100, // X translate (SVG coords)\n    y: 200, // Y translate (SVG coords)\n    scale: 1.5, // Uniform scale (optional, default 1)\n  },\n  \"entityId\", // Unique ID\n  [], // MC classes for group targeting\n  2000, // Birthtime (ms)\n);\n```\n\nThe SVG markup is wrapped in a `<g transform=\"translate(x,y) scale(s)\">` and appended to the root SVG. The `<g>` element becomes the entity's DOM node.\n\n### Animating with CSSEffect\n\nMC's built-in `CSSEffect` works directly on custom entities — no plugin-specific Effect class needed. Target entities with `!#entityId` selectors:\n\n```js\nimport { CSSEffect } from \"@donkeyclip/motorcortex\";\n\n// Opacity\nnew CSSEffect(\n  { animatedAttrs: { opacity: 0.5 } },\n  { selector: \"!#entityId\", duration: 1000 },\n);\n\n// Transform (scale, rotate, translate)\nnew CSSEffect(\n  { animatedAttrs: { transform: { scale: 2, rotate: \"180deg\" } } },\n  { selector: \"!#entityId\", duration: 1000 },\n);\n```\n\nThis works because the plugin sets `html_element` on each entity, which CSSEffect resolves automatically to the DOM node.\n\n### Convention: `html_element`\n\nEntities returned by `renderCustomEntity` include an `html_element` property pointing to the SVG `<g>` DOM node. This is the standard convention that enables CSSEffect (and any future MC incident) to work on custom entities across all plugins.\n\n## Development\n\n```bash\nnpm install\nnpm start        # Dev server with hot reload\nnpm run build    # Production build\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-4bce77c6589a7e46edaa6b2d2b9ee8f3"}