{"_id":"@alekstar79/marquee-canvas-ts","name":"@alekstar79/marquee-canvas-ts","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alekstar79/marquee-canvas-ts","version":"1.0.0","description":"A high-performance canvas-based marquee animation system built with TypeScript and Vite","author":{"name":"Aleksey Tarasenko","email":"alekstar79@yandex.ru"},"license":"MIT","type":"module","private":false,"keywords":["canvas","marquee","animation","typescript","vite","web-components","custom-elements"],"homepage":"https://github.com/alekstar79/marquee-canvas-ts#readme","bugs":{"url":"https://github.com/alekstar79/marquee-canvas-ts/issues"},"repository":{"type":"git","url":"git+https://github.com/alekstar79/marquee-canvas-ts.git"},"main":"./dist/marquee-canvas.umd.js","module":"./dist/marquee-canvas.mjs","types":"./dist/lib.d.ts","exports":{".":{"import":"./dist/marquee-canvas.mjs","require":"./dist/marquee-canvas.umd.js","types":"./dist/lib.d.ts"},"./style":{"import":"./dist/marquee-canvas.css","require":"./dist/marquee-canvas.css"}},"publishConfig":{"access":"public"},"scripts":{"dev":"vite","build":"vite build --config vite.config.ts","build:lib":"npm run build:lib:js && npm run build:lib:types","build:lib:js":"vite build --config vite-lib.config.ts","build:lib:types":"tsc --project tsconfig.declarations.json","preview":"vite preview","prepublishOnly":"npm run build:lib","pub:dry-run":"npm run build:lib && npm publish --dry-run","pub:beta":"npm run build:lib && npm publish --tag beta","pub:patch":"npm version patch && npm run build:lib && npm publish","pub:minor":"npm version minor && npm run build:lib && npm publish","pub:major":"npm version major && npm run build:lib && npm publish","test":"echo \"No tests yet\" && exit 0"},"devDependencies":{"@types/node":"^20.10.5","typescript":"^5.3.3","vite":"^5.0.8"},"_id":"@alekstar79/marquee-canvas-ts@1.0.0","gitHead":"80ab4e15327eee077018f0e75229ce4b352e27c9","_nodeVersion":"18.20.3","_npmVersion":"10.7.0","dist":{"integrity":"sha512-d4CwxbV05NPxwNn76hmva0XrsPX+18oR7/8wW2CHZ5IqycI47LObUHSmyEmGWSrPNMHpqLRoQ1vdDOm3sWHbAQ==","shasum":"2e9f991d101bf1c000ce5e80f6a0e6f5c7faf1e1","tarball":"https://registry.npmjs.org/@alekstar79/marquee-canvas-ts/-/marquee-canvas-ts-1.0.0.tgz","fileCount":11,"unpackedSize":155000,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCvJf5uEABVtCTZ0CmylkzaXRZWkLYmx7/GkUKSaomt8QIhAMyDY6SvauNCpf4Mx6vk1MYWQD5XDXE0TwQ5L08o/wQc"}]},"_npmUser":{"name":"alekstar79","email":"alekstar79@yandex.ru"},"directories":{},"maintainers":[{"name":"alekstar79","email":"alekstar79@yandex.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/marquee-canvas-ts_1.0.0_1761977803439_0.2767490506338015"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-01T06:16:43.252Z","1.0.0":"2025-11-01T06:16:43.651Z","modified":"2025-11-01T06:16:44.021Z"},"maintainers":[{"name":"alekstar79","email":"alekstar79@yandex.ru"}],"description":"A high-performance canvas-based marquee animation system built with TypeScript and Vite","homepage":"https://github.com/alekstar79/marquee-canvas-ts#readme","keywords":["canvas","marquee","animation","typescript","vite","web-components","custom-elements"],"repository":{"type":"git","url":"git+https://github.com/alekstar79/marquee-canvas-ts.git"},"author":{"name":"Aleksey Tarasenko","email":"alekstar79@yandex.ru"},"bugs":{"url":"https://github.com/alekstar79/marquee-canvas-ts/issues"},"license":"MIT","readme":"# Marquee Canvas TS\n\n[![NPM](https://img.shields.io/npm/v/@alekstar79/marquee-canvas-ts.svg)](https://www.npmjs.com/package/@alekstar79/marquee-canvas-ts)\n[![GitHub repo](https://img.shields.io/badge/github-repo-green.svg?style=flat)](https://github.com/alekstar79/marquee-canvas-ts)\n[![Typescript](https://img.shields.io/badge/TypeScript-Ready-blue?logo=typescript)]()\n[![License](https://img.shields.io/badge/License-ISC-green)]()\n[![Version](https://img.shields.io/badge/Version-1.0.0-orange)]()\n\nA high-performance, responsive marquee animation system built with TypeScript, Canvas API, and Vite.\n\n**![Marquee Canvas](review.gif)**\n\n## 🎮 Demo\n\nCheck out the live demo: [Media Tracker Demo](https://alekstar79.github.io/marquee-canvas-ts)\n\n## 🚀 Features\n\n- **Comprehensive Documentation:** Every class, method, and function is documented\n- **High Performance**: Uses Canvas API for smooth 60fps animations\n- **Responsive Design**: Automatically adapts to container size changes\n- **Flexible Styling**: Customizable colors, fonts, speeds, and directions\n- **Accessible**: ARIA labels and reduced motion support\n- **TypeScript**: Fully type safety with detailed interfaces\n- **Modular Architecture**: Clean separation of concerns\n- **Modern Tooling:** Uses Vite for fast development and building\n- **Dual API**: Support for both Custom Elements and data attributes\n\n## 📁 Project Structure\n\n````text\nmarquee-canvas-ts/\n├── public/\n│   └── favicon.png                 # Only favicon in the public folder\n├── src/\n│   ├── assets/                     # Processed assets\n│   │   └── images/\n│   │       └── background.jpeg\n│   ├── components/                 # Reusable components\n│   │   ├── MarqueeController.ts    # Core animation logic\n│   │   └── MarqueeCanvas.ts        # Custom Element implementation\n│   ├── utils/                      # Utility functions\n│   │   └── index.ts                # Helper functions and utilities \n│   ├── css/                        # CSS stylesheets\n│   │   └── styles.css\n│   └── index.ts                    # Application entry point\n├── index.html                      # Main HTML file\n├── package.json                    # Project dependencies and scripts\n├── vite.config.ts                  # Vite build configuration\n├── tsconfig.json                   # TypeScript configuration\n└── README.md                       # Project documentation\n````\n## 🛠️ Installation\n\n1. **Clone or download the project**\n\n2. **Install dependencies**:\n````bash\nyarn install\n````\n\n## 🎯 Usage\n\n**Method 1: Custom Elements (Recommended)**\n\nUse the custom HTML element for declarative marquee creation:\n\n````html\n<marquee-canvas\n  phrase=\"Your text here\"\n  font=\"bold 5em Roboto\"\n  color=\"#ff0000\"\n  speed=\"3\"\n  reverse\n  padding-y=\"36\"\n></marquee-canvas>\n````\n\n**Method 2: Data Attributes**\n\nUse data attributes for traditional canvas-based marquees:\n\n````html\n<div class=\"marquee-canvas\">\n  <canvas\n    data-canvas\n    data-phrase=\"Your text here\"\n    data-font=\"bold 5em Roboto\"\n    data-color=\"#ff0000\"\n    data-speed=\"3\"\n    data-reverse\n    data-padding-y=\"36\"\n  ></canvas>\n</div>\n````\n\n## 📚 Library Usage\n\n**ES модули:**\n\n````js\nimport { MarqueeController, MarqueeCanvas } from '@alekstar79/marquee-canvas-ts'\nimport '@alekstar79/marquee-canvas-ts/style'\n````\n\n**CommonJS:**\n\n````js\nconst { MarqueeController, MarqueeCanvas } = require('@alekstar79/marquee-canvas-ts')\nrequire('@alekstar79/marquee-canvas-ts/style')\n````\n\n**В браузере (UMD):**\n\n````html\n<script src=\"https://unpkg.com/@alekstar79/marquee-canvas-ts\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@alekstar79/marquee-canvas-ts/style\">\n````\n\n## 🎮 Development\n\n**Start development server:**\n\n````shell\nyarn dev\n````\n\n**Build for production:**\n\n````shell\nyarn build\n````\n\n**Preview production build:**\n\n````shell\nyarn preview\n````\n\n## ⚙️ Configuration\n\n**MarqueeCanvas Custom Element Attributes**\n\n| Attribute   | Type    | Default                | Description                    |\n|-------------|---------|------------------------|--------------------------------|\n| `phrase`    | string  | -                      | Text content to display        |\n| `font`      | string  | `bold 5rem sans-serif` | CSS font property              |\n| `color`     | string  | `#337baa`              | Text color                     |\n| `speed`     | number  | `2`                    | Animation speed (pixels/frame) |\n| `reverse`   | boolean | `false`                | Reverse animation direction    |\n| `padding-x` | number  | `0`                    | Horizontal padding             |\n| `padding-y` | nimber  | `36`                   | Vertical padding               |\n\n\n**MarqueeController Options**\n\n````typescript\ninterface MarqueeOptions {\n  text: string;             // Text content\n  font: string;             // CSS font property\n  textColor: string;        // Text color\n  reverse: boolean;         // Animation direction\n  paddingX: number;         // Horizontal spacing\n  paddingY: number;         // Vertical padding\n  speed: number;            // Animation speed\n  backgroundColor?: string; // Canvas background\n}\n````\n\n## 🔧 API Reference\n\n### MarqueeController Class\n\n**Static Methods:**\n\n- init(canvas, options) - Creates and initializes a marquee\n\n**Instance Methods:**\n\n- update(options) - Updates marquee configuration\n- handleResize() - Handles container resize\n- destroy() - Cleans up resources\n\n**MarqueeCanvas Custom Element**\n\nLifecycle:\n\n- connectedCallback() - Called when added to DOM\n- disconnectedCallback() - Called when removed from DOM\n- attributeChangedCallback() - Called when attributes change\n\n## 🎨 Customization\n\n### CSS Custom Properties\n\nOverride these variables in your CSS:\n\n````css\n:root {\n  --color-dark: #1e2327;\n  --color-accent-1: #f3bb0b;\n  --color-accent-2: #337baa;\n  --color-text-light: #ffff;\n  --font-family-primary: 'Roboto', sans-serif;\n  --font-weight-medium: 500;\n  --spacing-xs: 4px;\n  /* ...and more */\n}\n````\nor override the basic styles with custom ones\n\n````css\n.my-marquee-container {\n  background: linear-gradient(45deg, #333, #666);\n  border-radius: 8px;\n  padding: 20px;\n}\n````\n\n### JavaScript Configuration\n\n````typescript\nconst marquee = MarqueeController.init(canvas, {\n  text: 'Custom Text',\n  font: 'italic 3rem Arial',\n  textColor: '#00ff00',\n  speed: 5,\n  reverse: true\n})\n````\n\n## 📱 Responsive Behavior\n\n**The marquee automatically:**\n\n- Adjusts to container size changes\n- Handles device pixel ratio changes\n- Optimizes for mobile devices\n- Supports high-DPI displays\n\n## ♿ Accessibility\n\n- Respects prefers-reduced-motion media query\n- Includes ARIA labels for screen readers\n- Proper focus management\n\n## 🚀 Performance Tips\n\n1. Use appropriate text lengths - Very long texts impact performance\n2. Limit simultaneous instances - Too many marquees strain the GPU\n3. Use efficient fonts - System fonts perform better than web fonts\n4. Monitor frame rate - Use browser dev tools for performance checking\n\n## 🐛 Troubleshooting\n\n**Marquee not appearing?**\n\n- Check browser console for errors\n- Ensure fonts are properly loaded\n- Verify canvas element exists in DOM\n\n**Animation is choppy?**\n\n- Reduce the number of simultaneous marquees\n- Lower the animation speed\n- Check for other performance-intensive operations on the page\n\n**Text looks blurry?**\n\n- The component automatically handles high-DPI displays\n- Ensure you're not manually setting canvas dimensions\n\n## 🌐 Browser Support\n\n- Chrome 88+\n- Firefox 78+\n- Safari 14+\n- Edge 88+\n\n<div align=\"center\">\n  Built with ❤️ and TypeScript\n</div>\n","readmeFilename":"README.md","_rev":"1-30f552a0a30c475b7601ecf17fff34ee"}