{"_id":"@charlie404/marquee-image","_rev":"14-dcf7c7fe0c0ef3db57b8a573d59f8545","name":"@charlie404/marquee-image","dist-tags":{"latest":"1.0.11"},"versions":{"1.0.4":{"name":"@charlie404/marquee-image","version":"1.0.4","keywords":["marquee","image","web-component","animation","carousel"],"author":{"name":"charlie404"},"license":"MIT","_id":"@charlie404/marquee-image@1.0.4","maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"homepage":"https://github.com/charlie404/marquee-image#readme","bugs":{"url":"https://github.com/charlie404/marquee-image/issues"},"dist":{"shasum":"43d226f86662e508dc0222689a016bf66130d446","tarball":"https://registry.npmjs.org/@charlie404/marquee-image/-/marquee-image-1.0.4.tgz","fileCount":3,"integrity":"sha512-xpKViGOh7CNxEdkTj2VxsMFNGrKV3j0zHbXATooQPKEiOFbR9/yG4gUlzZmrX29NrH4kphvjdqPKUV9q/ySKLQ==","signatures":[{"sig":"MEYCIQDGUKdhYv7Z3c1rqDyxBldAyfBLg/KWInJUx3hzrN9kdAIhAIvltPgyEqLKEMPjZn0cOp5mb9dHhBL5kKrSPFJK+rOE","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6894},"main":"index.js","gitHead":"01abb42172bc9de42265d2332617f7ef22dbe69a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"charlie404","email":"charlie@aniki.fr"},"repository":{"url":"git+https://github.com/charlie404/marquee-image.git","type":"git"},"_npmVersion":"11.4.2","description":"A web component for creating smooth image marquee effects","directories":{},"_nodeVersion":"24.4.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.6"},"_npmOperationalInternal":{"tmp":"tmp/marquee-image_1.0.4_1753433444912_0.8867160903466651","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@charlie404/marquee-image","version":"1.0.5","keywords":["marquee","image","web-component","animation","carousel"],"author":{"name":"charlie404"},"license":"MIT","_id":"@charlie404/marquee-image@1.0.5","maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"homepage":"https://github.com/charlie404/marquee-image#readme","bugs":{"url":"https://github.com/charlie404/marquee-image/issues"},"dist":{"shasum":"36510b4c01241dfe91eab02513d8246074b43c23","tarball":"https://registry.npmjs.org/@charlie404/marquee-image/-/marquee-image-1.0.5.tgz","fileCount":3,"integrity":"sha512-gzlcuKxAHvoa0S/Esm1Ps43LmLseW6g9b+6cLgeWnxFWCW6jjlJ2Y9tkaffOJ9sCklsgj2FtG6D1JvpCyU7KtQ==","signatures":[{"sig":"MEUCICLnjmDoe+ax75Ix+280EFn6lbqNg6MSNRKhIQHKP1/qAiEA3aLx0c1oSKF6jD74h/a1RPqMzilomKe4h+5p/1tJb6M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8385},"main":"index.js","gitHead":"89a55414d5f6194fe6018fc338e25fa6446438d6","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"charlie404","email":"charlie@aniki.fr"},"repository":{"url":"git+https://github.com/charlie404/marquee-image.git","type":"git"},"_npmVersion":"11.4.2","description":"A web component for creating smooth image marquee effects","directories":{},"_nodeVersion":"24.4.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.6"},"_npmOperationalInternal":{"tmp":"tmp/marquee-image_1.0.5_1753434403363_0.987474045438457","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@charlie404/marquee-image","version":"1.0.6","keywords":["marquee","image","web-component","animation","carousel"],"author":{"name":"charlie404"},"license":"MIT","_id":"@charlie404/marquee-image@1.0.6","maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"homepage":"https://github.com/charlie404/marquee-image#readme","bugs":{"url":"https://github.com/charlie404/marquee-image/issues"},"dist":{"shasum":"fdf7d6271f11247cab86f45d9d9ef70d030d2692","tarball":"https://registry.npmjs.org/@charlie404/marquee-image/-/marquee-image-1.0.6.tgz","fileCount":3,"integrity":"sha512-/D9+8ClLPmigsnVgZ+Q+mGcN8+3GFCVSPu2DBrNoPkvEnN9v/OPB2owXA0gQ5a9sDnC/FcajzmKNCza4aDlEWA==","signatures":[{"sig":"MEYCIQCSZz/U/5Gnx45t0axQ43Loxm8xOEcqIRf2XioPn/x+ZQIhANXDAr8aGjIRDytXhGTEUKMy39eHiOkJP4dBuA0B43sL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8765},"main":"index.js","gitHead":"60a249b3d75e2f27207ec4bc42fcbd4784c9dc99","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"charlie404","email":"charlie@aniki.fr"},"repository":{"url":"git+https://github.com/charlie404/marquee-image.git","type":"git"},"_npmVersion":"11.4.2","description":"A web component for creating smooth image marquee effects","directories":{},"_nodeVersion":"24.4.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.6"},"_npmOperationalInternal":{"tmp":"tmp/marquee-image_1.0.6_1753436298712_0.5015920318439575","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"@charlie404/marquee-image","version":"1.0.7","keywords":["marquee","image","web-component","animation","carousel"],"author":{"name":"charlie404"},"license":"MIT","_id":"@charlie404/marquee-image@1.0.7","maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"homepage":"https://github.com/charlie404/marquee-image#readme","bugs":{"url":"https://github.com/charlie404/marquee-image/issues"},"dist":{"shasum":"6595ba38919d28164547e4841a4ef552667d3bed","tarball":"https://registry.npmjs.org/@charlie404/marquee-image/-/marquee-image-1.0.7.tgz","fileCount":3,"integrity":"sha512-9tMAtN5PDzcwr/7QGs3Mrti30QlYEUTG7EYXTS+8Gf+65U7kYwJFCMEmeBw7s/vTJop1iuW5vYgk1u6C3v/43g==","signatures":[{"sig":"MEUCIC9sRD9sJJUYTU3SIgO15yQ1C/ujM1rsF2ymwgxiF7QfAiEA2JdRzZKfhMJyXmRaItxshbyzB36zShxlMt9qAJPOEb0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9087},"main":"index.js","gitHead":"506c394a3189b3291dbfb7bd87e739c42e5d9630","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"charlie404","email":"charlie@aniki.fr"},"repository":{"url":"git+https://github.com/charlie404/marquee-image.git","type":"git"},"_npmVersion":"11.4.2","description":"A web component for creating smooth image marquee effects","directories":{},"_nodeVersion":"24.4.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.6"},"_npmOperationalInternal":{"tmp":"tmp/marquee-image_1.0.7_1753437388285_0.9380273104192285","host":"s3://npm-registry-packages-npm-production"}},"1.0.8":{"name":"@charlie404/marquee-image","version":"1.0.8","keywords":["marquee","image","web-component","animation","carousel"],"author":{"name":"charlie404"},"license":"MIT","_id":"@charlie404/marquee-image@1.0.8","maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"homepage":"https://github.com/charlie404/marquee-image#readme","bugs":{"url":"https://github.com/charlie404/marquee-image/issues"},"dist":{"shasum":"f0de2c6f8c0de5c4b5ff87f3df1b825eae1d923e","tarball":"https://registry.npmjs.org/@charlie404/marquee-image/-/marquee-image-1.0.8.tgz","fileCount":3,"integrity":"sha512-hWbHtIa0Cc4g0a1Bv5TEhcEi9iE5n3BM3EwySvQWU13a/Hk9/OIsLPLzIzTUCmAiPTes815coldIjFlwIH7hTA==","signatures":[{"sig":"MEYCIQCD1R5Pty8xvh3+RJmZXHAx22ngJJbvdlt07i+1GP8E4gIhAMT7DzYj5mZrSAgmvP3spbZju3MULT0gyALJx8jol5we","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10703},"main":"index.js","gitHead":"ee02baf0229101e711cb0f9951e1e7ed17bc3ada","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"charlie404","email":"charlie@aniki.fr"},"repository":{"url":"git+https://github.com/charlie404/marquee-image.git","type":"git"},"_npmVersion":"11.4.2","description":"A web component for creating smooth image marquee effects","directories":{},"_nodeVersion":"24.4.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.6"},"_npmOperationalInternal":{"tmp":"tmp/marquee-image_1.0.8_1753438169585_0.017429521573174345","host":"s3://npm-registry-packages-npm-production"}},"1.0.9":{"name":"@charlie404/marquee-image","version":"1.0.9","keywords":["marquee","image","web-component","animation","carousel"],"author":{"name":"charlie404"},"license":"MIT","_id":"@charlie404/marquee-image@1.0.9","maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"homepage":"https://github.com/charlie404/marquee-image#readme","bugs":{"url":"https://github.com/charlie404/marquee-image/issues"},"dist":{"shasum":"d1b2d4b6d520e9661295e3ef191c6d677d1a1a30","tarball":"https://registry.npmjs.org/@charlie404/marquee-image/-/marquee-image-1.0.9.tgz","fileCount":3,"integrity":"sha512-87bGfApYajxtbeoky8LQeoAluliQ/Py0uvwHCb7YSqfYtucXLCzHHT4xo0YamXFLRi5XPy5q9uyhg2dKjK6g6Q==","signatures":[{"sig":"MEQCIE18mC7ZeBY6ZoxmxhyT5dg5hE+wD9HbmSK+dkP78oBqAiAB2Oh5Jt3dLgt61Rk5dM7jC/Bgz0tvKPv94sgV77m10g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10560},"main":"index.js","gitHead":"ce55b30d22ab6dbe186bbff8626a17a55d8f7f82","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"charlie404","email":"charlie@aniki.fr"},"repository":{"url":"git+https://github.com/charlie404/marquee-image.git","type":"git"},"_npmVersion":"11.4.2","description":"A web component for creating smooth image marquee effects","directories":{},"_nodeVersion":"24.4.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.6"},"_npmOperationalInternal":{"tmp":"tmp/marquee-image_1.0.9_1757663689103_0.4107457840713462","host":"s3://npm-registry-packages-npm-production"}},"1.0.10":{"name":"@charlie404/marquee-image","version":"1.0.10","keywords":["marquee","image","web-component","animation","carousel"],"author":{"name":"charlie404"},"license":"MIT","_id":"@charlie404/marquee-image@1.0.10","maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"homepage":"https://github.com/charlie404/marquee-image#readme","bugs":{"url":"https://github.com/charlie404/marquee-image/issues"},"dist":{"shasum":"6a9a4fca69fc9c7690019fbef0aa831dee8f64d4","tarball":"https://registry.npmjs.org/@charlie404/marquee-image/-/marquee-image-1.0.10.tgz","fileCount":3,"integrity":"sha512-5OwfcFQU2WE/vFWDWGlqT/HisX8mfTivxul9m2TRVdm+E9qf7MD5CI1je7e8N4e5ZXiHCMEFDzI1kOfaivmZSw==","signatures":[{"sig":"MEYCIQCAzUEIJE4dRSo9khvAaYDv5F2qBz0nZOjtGHsD3m+uFQIhAM4nWusNoE+1n2long0WAx+3bB+tQ7I25c/nQlSjPa4l","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11045},"main":"index.js","gitHead":"82c2e4cc9abc1d1cd99b2df5d7c5013f85425bd4","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"charlie404","email":"charlie@aniki.fr"},"repository":{"url":"git+https://github.com/charlie404/marquee-image.git","type":"git"},"_npmVersion":"11.4.2","description":"A web component for creating smooth image marquee effects","directories":{},"_nodeVersion":"24.4.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.6"},"_npmOperationalInternal":{"tmp":"tmp/marquee-image_1.0.10_1757665123760_0.3132704946858915","host":"s3://npm-registry-packages-npm-production"}},"1.0.11":{"name":"@charlie404/marquee-image","version":"1.0.11","description":"A web component for creating smooth image marquee effects","main":"index.js","keywords":["marquee","image","web-component","animation","carousel"],"author":{"name":"charlie404"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/charlie404/marquee-image.git"},"homepage":"https://github.com/charlie404/marquee-image#readme","bugs":{"url":"https://github.com/charlie404/marquee-image/issues"},"devDependencies":{"vite":"^7.0.6"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_id":"@charlie404/marquee-image@1.0.11","gitHead":"0cdc7a84304af312cebee71826eb693121b70679","_nodeVersion":"24.7.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-lMOwFgDB8Ho73cqsEhHDHxV/MBwdKTr9zh/9tudDoO4kAZmXJaciHP089Lv/OZmNjhAxtocwR3GdBSl8AfVTBQ==","shasum":"b2b57f8e87edb14ce60edec2bf5333411f432d24","tarball":"https://registry.npmjs.org/@charlie404/marquee-image/-/marquee-image-1.0.11.tgz","fileCount":3,"unpackedSize":11069,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGnZNzHT2+H7RQQoCo0pqogeGZ+lY6FbwWTOOYoUFPi9AiAOkbmKunkwIUxiQ7lYlEqXFOfUrY8nydOVm+iiDZcVJg=="}]},"_npmUser":{"name":"charlie404","email":"charlie@aniki.fr"},"directories":{},"maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/marquee-image_1.0.11_1758629250584_0.016114062501617843"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-25T08:50:44.802Z","modified":"2025-09-23T12:07:30.945Z","1.0.0":"2025-07-25T06:15:29.884Z","1.0.1":"2025-07-25T07:46:08.898Z","1.0.2":"2025-07-25T08:02:49.705Z","1.0.3":"2025-07-25T08:29:44.019Z","1.0.4":"2025-07-25T08:50:45.075Z","1.0.5":"2025-07-25T09:06:43.532Z","1.0.6":"2025-07-25T09:38:18.895Z","1.0.7":"2025-07-25T09:56:28.445Z","1.0.8":"2025-07-25T10:09:29.750Z","1.0.9":"2025-09-12T07:54:49.315Z","1.0.10":"2025-09-12T08:18:43.928Z","1.0.11":"2025-09-23T12:07:30.760Z"},"bugs":{"url":"https://github.com/charlie404/marquee-image/issues"},"author":{"name":"charlie404"},"license":"MIT","homepage":"https://github.com/charlie404/marquee-image#readme","keywords":["marquee","image","web-component","animation","carousel"],"repository":{"type":"git","url":"git+https://github.com/charlie404/marquee-image.git"},"description":"A web component for creating smooth image marquee effects","maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"readme":"# @charlie404/marquee-image\n\nA lightweight web component for creating smooth image marquee effects with customizable speed, height, and direction.\n\n## Installation\n\n```bash\nnpm install @charlie404/marquee-image\n```\n\n## Usage\n\n### Import the component\n\n```javascript\nimport { MarqueeImage } from \"@charlie404/marquee-image\";\n\nnew MarqueeImage();\n```\n\n### Add to your HTML\n\n```html\n<!-- Example with all props specified -->\n<marquee-image\n  speed=\"100\"\n  desktop-margin=\"20\"\n  tablet-margin=\"15\"\n  mobile-margin=\"10\"\n  desktop-height=\"72\"\n  tablet-height=\"54\"\n  mobile-height=\"36\"\n  repeat=\"20\"\n  reverse\n>\n  <img src=\"https://picsum.photos/200/100\" />\n  <img src=\"https://picsum.photos/150/100\" />\n  <img src=\"https://picsum.photos/250/100\" />\n  <img src=\"https://picsum.photos/180/100\" />\n</marquee-image>\n\n<!-- Example using cascade (tablet inherits from desktop, mobile from tablet) -->\n<marquee-image\n  speed=\"100\"\n  desktop-margin=\"25\"\n  desktop-height=\"80\"\n  mobile-height=\"40\"\n  repeat=\"15\"\n>\n  <img src=\"https://picsum.photos/200/100\" />\n  <img src=\"https://picsum.photos/150/100\" />\n  <img src=\"https://picsum.photos/250/100\" />\n</marquee-image>\n\n<!-- Minimal example (all margins and heights inherit from desktop) -->\n<marquee-image desktop-margin=\"30\" desktop-height=\"60\">\n  <img src=\"https://picsum.photos/200/100\" />\n  <img src=\"https://picsum.photos/150/100\" />\n</marquee-image>\n```\n\n### Required CSS\n\nAdd this CSS to your stylesheet for proper display:\n\n```css\nmarquee-image {\n  display: block;\n  width: 100%;\n}\n```\n\n## Attributes\n\n| Attribute        | Type    | Default         | Description                                              |\n| ---------------- | ------- | --------------- | -------------------------------------------------------- |\n| `speed`          | number  | 100             | Animation speed in pixels per second                     |\n| `desktop-margin` | number  | 20              | Spacing between images on desktop devices (≥ 1024px)     |\n| `tablet-margin`  | number  | desktop-margin  | Spacing between images on tablet devices (768px - 1023px) |\n| `mobile-margin`  | number  | tablet-margin   | Spacing between images on mobile devices (< 768px)       |\n| `desktop-height` | number  | 72              | Height of the marquee on desktop devices (≥ 1024px)      |\n| `tablet-height`  | number  | desktop-height  | Height of the marquee on tablet devices (768px - 1023px) |\n| `mobile-height`  | number  | tablet-height   | Height of the marquee on mobile devices (< 768px)        |\n| `repeat`         | number  | 10              | Number of times to repeat the image sequence             |\n| `reverse`        | boolean | false           | Reverse the animation direction                          |\n\n**Cascade Logic:**\n\n- If `tablet-margin` is not specified, it defaults to `desktop-margin`\n- If `mobile-margin` is not specified, it defaults to `tablet-margin`\n- If `tablet-height` is not specified, it defaults to `desktop-height`\n- If `mobile-height` is not specified, it defaults to `tablet-height`\n\n## License\n\nMIT\n","readmeFilename":"README.md"}