{"_id":"@9am/img-tissue","name":"@9am/img-tissue","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@9am/img-tissue","version":"1.0.0","description":"A web component animates an image with a minimization effect.","keywords":["web component","img","svg"],"type":"module","main":"./dist/img-tissue.umd.js","module":"./dist/img-tissue.es.js","exports":{".":{"import":"./dist/img-tissue.es.js","require":"./dist/img-tissue.umd.js"}},"scripts":{"dev":"vite","build":"vite build"},"author":"","repository":{"type":"git","url":"git+https://github.com/9am/img-tissue.git"},"license":"MIT","dependencies":{"vite":"^2.8.6"},"gitHead":"ccdd34a2af2f792a1e14b0ef95c7e56dfd16e823","bugs":{"url":"https://github.com/9am/img-tissue/issues"},"homepage":"https://github.com/9am/img-tissue#readme","_id":"@9am/img-tissue@1.0.0","_nodeVersion":"16.8.0","_npmVersion":"7.21.0","dist":{"integrity":"sha512-GdQjgvFskfkY+B883GSy1ybJ4d5TDR1rWDlpBT8+0JuQkwT1xl3S5/6+40tSaMiEA4jcD3ChkyxX9hLMGBIhVQ==","shasum":"217a226193d6e2811be8425971694a764228f538","tarball":"https://registry.npmjs.org/@9am/img-tissue/-/img-tissue-1.0.0.tgz","fileCount":5,"unpackedSize":24284,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbka68zHFo8ckpWhS3HgWh/+dn4GICYJfzcGAJq/8lnAiEA8YVcjPljMK26/4bi+mFlirfBbzi7QFrUwQI8XRBfNpc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihwpdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbuRAAomWF2pWSf3OCJuPXzsGYFe41a0zLFHdcY4UdAZsuvlAFd/fU\r\n+WdYIEDXkErgMKa2Gi0L/ldMWlWgvwXZCb/iK2okvek3OCwm2n+nCxwvU1Xd\r\nayeXBZ29d/XhB3akKVxK4aDCTxIcGX7PpfwleD47HHi8JU3EkJUdwR7+L//r\r\npzDpJh2S0PyErxAP3GygAM73tvRrSQEqrpiYJ7HTrgvsXuThDr2VZ2JPuG5O\r\nQqIB0aEZDiDkqYW0T8e3Do/2iB8E4TOZ0c+l+rzSQLBkOUX4MVVZuaI1F4Hu\r\nr7jwRBQ3VRJW9pN+SHjsU7yb5/tSGkyM6QxOCTFd+vzV52vnfZxlkQvCjmQl\r\nGZ355bQONt/PUtt3h29cCS2ZBAkVtsrWlTKxOkj+QPCVo/jLN50fhfmavnmW\r\nxtYbIEHE4qwI5sd18VXZVskDlujrOzwlTLGnJIs8rYLS5Mh3oUbqU2J06wwV\r\no2sBTmkB4GK5btEmPiSqQCzrdC78wGTZBZVCENVVWbWNZlJHhDkcDWYdeHu4\r\nEfqYI6IvKrd8w1n/WlolzD4VJpgordE6UHxszuZ4NWqIDy/PADzc0KvW5EfZ\r\nrI2KD37LIwoHMX861xSdCtkGUo6HNHRRuml8zNu50cJUuyw7QO2V4FdxxhOp\r\nYOZzBbqpgu/M55+qmkZfEdP5ZlGA1H8WPdw=\r\n=/zoY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"9am","email":"gbgogb@gmail.com"},"directories":{},"maintainers":[{"name":"9am","email":"gbgogb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/img-tissue_1.0.0_1653017181357_0.5225971194391106"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-20T03:26:21.312Z","1.0.0":"2022-05-20T03:26:21.473Z","modified":"2022-05-20T03:26:21.592Z"},"maintainers":[{"name":"9am","email":"gbgogb@gmail.com"}],"description":"A web component animates an image with a minimization effect.","homepage":"https://github.com/9am/img-tissue#readme","keywords":["web component","img","svg"],"repository":{"type":"git","url":"git+https://github.com/9am/img-tissue.git"},"bugs":{"url":"https://github.com/9am/img-tissue/issues"},"license":"MIT","readme":"
\n\t\n\t
<img-tissue>
\n\t
A web component animates an image with a minimization effect.
\n
\n\n## Demo\nhttps://user-images.githubusercontent.com/1435457/169442632-62b8e967-6a4f-4c9f-a00f-c17cb436ad8f.mp4\n\n## Usage\n1. Installation\n\n\t```\n\tnpm install @9am/img-tissue\n\t```\n2. ESM\n\n\t```html\n\t// HTML\n\t\n\t```\n\n\t```js\n\timport { register } from '@9am/img-tissue'\n\tregister({})\n\t```\n\tor try it with skypack without installation\n\n\t```js\n\timport { register } from 'https://cdn.skypack.dev/@9am/img-tissue'\n\tregister({})\n\t```\n\n3. Zoom\n\n\t```javascript\n\t// js\n\tconst tissue = document.querySelector('img-tissue')\n\ttissue.zoomIn({ clientX: 0, clientY: 0, duration: 300 })\n\ttissue.zoomOut({ clientX: 0, clientY: 0, duration: 300 })\n\t```\n\n## API\n1. < img-tissue > attributes\n\n\t|Name|Type|Default|Description|\n\t|:--:|:--:|:-----:|:----------|\n\t|`src`|{String}|**Required**|The image URL|\n\t|`title`|{String}|`''`|For screen readers|\n\t|`column`|{Number}|`4`|Split area into {column} vertically|\n\t|`row`|{Number}|`4`|Split area into {row} horizontally|\n2. < img-tissue > methods\n\n\t|Name|Params|Type|Default|Description|\n\t|:--:|:----:|:--:|:-----:|:----------|\n\t|`zoomIn({ clientX, clientY, duration })`||{Function}||ZoomIn the image to target position|\n\t|`zoomOut({ clientX, clientY, duration })`||{Function}||ZoomOut the image to \n\t||`clientX`|{Number}|**Required**|X position on the client viewport|\n\t||`clientY`|{Number}|**Required**|Y position on the client viewport|\n\t||`duration`|{Number}|**Required**|Duration of the animation(ms)|\n3. register options\n\n\t|Name|Type|Default|Description|\n\t|:--:|:--:|:-----:|:----------|\n\t|`tagName`|{String}|`img-tissue`|Change tag name of the web component|\n\n## Development\n1. Install dependencies\n\n\t`npm install`\n4. Start dev server\n\n\t`npm run dev`\n5. Put images under `./demo/img`, replace image URL in `index.html`\n6. Open `localhost:3000` in the browser\n\n## Testing\nTBD\n\n\n## License\n[MIT](LICENSE)\n","readmeFilename":"README.md"}
![\"img-tissue\"](\"https://user-images.githubusercontent.com/1435457/169444162-b05cd10f-f3cf-47e3-8b95-289eedbd84ad.svg\")
\n\t