{"_id":"@charlie404/marquee-text","name":"@charlie404/marquee-text","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@charlie404/marquee-text","version":"1.0.0","description":"A web component for creating smooth text marquee effects","main":"index.js","keywords":["marquee","text","web-component","animation","carousel"],"author":{"name":"charlie404"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/charlie404/marquee-text.git"},"homepage":"https://github.com/charlie404/marquee-text#readme","bugs":{"url":"https://github.com/charlie404/marquee-text/issues"},"devDependencies":{"vite":"^7.0.6"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_id":"@charlie404/marquee-text@1.0.0","gitHead":"894c5e5f53cf7183991d50ddb0765ddb885b6c47","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-ShWTCmFmjmobflC2Y2afDUDLpCnaipmCHcI09P806eQcRQlEy0cB4nSFGnLk2JQkqq01/690T5EOAtzrsz+8/A==","shasum":"932d6948b1f61d6660236093cc7bb80dad5cd71f","tarball":"https://registry.npmjs.org/@charlie404/marquee-text/-/marquee-text-1.0.0.tgz","fileCount":3,"unpackedSize":10962,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEi56EkHFIZA8pztnsQYKrKJ5zHpjKCrndQF/R7dbr1sAiEA3bmSvR2CWOs8Zd64BlTphzPZzI4SN70umAO35kNt+64="}]},"_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-text_1.0.0_1757683230076_0.47563447413755755"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-12T13:20:30.001Z","1.0.0":"2025-09-12T13:20:30.260Z","modified":"2025-09-12T13:20:30.495Z"},"maintainers":[{"name":"charlie404","email":"charlie@aniki.fr"}],"description":"A web component for creating smooth text marquee effects","homepage":"https://github.com/charlie404/marquee-text#readme","keywords":["marquee","text","web-component","animation","carousel"],"repository":{"type":"git","url":"git+https://github.com/charlie404/marquee-text.git"},"author":{"name":"charlie404"},"bugs":{"url":"https://github.com/charlie404/marquee-text/issues"},"license":"MIT","readme":"# @charlie404/marquee-text\n\nA lightweight web component for creating smooth text marquee effects with customizable speed, font size, and direction. Display words from a comma-separated string with responsive typography.\n\n## Installation\n\n```bash\nnpm install @charlie404/marquee-text\n```\n\n## Usage\n\n### Import the component\n\n```javascript\nimport { MarqueeText } from \"@charlie404/marquee-text\";\n\nnew MarqueeText();\n```\n\n### Add to your HTML\n\n```html\n<!-- Example with all props specified -->\n<marquee-text\n  words=\"Hello, World, Lorem, Ipsum, Dolor, Sit, Amet\"\n  speed=\"100\"\n  desktop-margin=\"20\"\n  tablet-margin=\"15\"\n  mobile-margin=\"10\"\n  desktop-font-size=\"48\"\n  tablet-font-size=\"36\"\n  mobile-font-size=\"24\"\n  repeat=\"20\"\n  reverse\n>\n</marquee-text>\n\n<!-- Example using cascade (tablet inherits from desktop, mobile from tablet) -->\n<marquee-text\n  words=\"Creative, Design, Development, Innovation\"\n  speed=\"100\"\n  desktop-margin=\"25\"\n  desktop-font-size=\"60\"\n  mobile-font-size=\"30\"\n  repeat=\"15\"\n>\n</marquee-text>\n\n<!-- Minimal example (all margins and font-sizes inherit from desktop) -->\n<marquee-text \n  words=\"Simple, Clean, Elegant\" \n  desktop-margin=\"30\" \n  desktop-font-size=\"40\"\n>\n</marquee-text>\n```\n\n### Required CSS\n\nAdd this CSS to your stylesheet for proper display:\n\n```css\nmarquee-text {\n  display: block;\n  width: 100%;\n}\n```\n\n## Attributes\n\n| Attribute             | Type    | Default             | Description                                              |\n| --------------------- | ------- | ------------------- | -------------------------------------------------------- |\n| `words`               | string  | \"\"                  | Comma-separated list of words to display                |\n| `speed`               | number  | 100                 | Animation speed in pixels per second                     |\n| `desktop-margin`      | number  | 20                  | Spacing between words on desktop devices (≥ 1024px)      |\n| `tablet-margin`       | number  | desktop-margin      | Spacing between words on tablet devices (768px - 1023px) |\n| `mobile-margin`       | number  | tablet-margin       | Spacing between words on mobile devices (< 768px)        |\n| `desktop-font-size`   | number  | 48                  | Font size in pixels on desktop devices (≥ 1024px)        |\n| `tablet-font-size`    | number  | desktop-font-size   | Font size in pixels on tablet devices (768px - 1023px)   |\n| `mobile-font-size`    | number  | tablet-font-size    | Font size in pixels on mobile devices (< 768px)          |\n| `repeat`              | number  | 10                  | Number of times to repeat the word 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-font-size` is not specified, it defaults to `desktop-font-size`\n- If `mobile-font-size` is not specified, it defaults to `tablet-font-size`\n\nThe marquee height is automatically calculated based on the current font size (font-size × 1.5).\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-0ee5cfcf89170fd7fa9adf8c7f37ccca"}