{"_id":"@abhijeet42cy6/vector-lines","name":"@abhijeet42cy6/vector-lines","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abhijeet42cy6/vector-lines","private":false,"publishConfig":{"access":"public"},"version":"1.0.0","description":"Reusable 3-line vector pattern (27×26 Y-shape) for React projects","main":"index.js","module":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/abhijeetkumar/vector-lines.git"},"bugs":{"url":"https://github.com/abhijeetkumar/vector-lines/issues"},"homepage":"https://github.com/abhijeetkumar/vector-lines#readme","author":{"name":"Abhijeet Kumar","email":"abhi42cy7@gmail.com"},"license":"MIT","keywords":["react","pattern","svg","grid","background"],"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@vitejs/plugin-react":"^4.0.0","vite":"^4.5.0"},"peerDependencies":{"react":">=17"},"_id":"@abhijeet42cy6/vector-lines@1.0.0","gitHead":"af39cbb634b3bf6273f28214e4f0c1bc273c8287","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-+ZBou+I8BOD7Zluq0Qwa2kCH67I8XHXwJ87x2APBRIdv8YbVgCU6WgaViVOjmct8qOJ+IfYJv5OO430bAkrA1g==","shasum":"03dda4d38048694f8b26727e245e248aa7081863","tarball":"https://registry.npmjs.org/@abhijeet42cy6/vector-lines/-/vector-lines-1.0.0.tgz","fileCount":6,"unpackedSize":9684,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEO0rAt/uSecpYy10vKa/v/OtAWpxlWckhjHmt1CpLT4AiAjx2FXSuEKz9RNAHGyXldOrGi9eg8jz4XHZmPl3a2aHQ=="}]},"_npmUser":{"name":"abhijeet42cy6","email":"abhi42cy7@gmail.com"},"directories":{},"maintainers":[{"name":"abhijeet42cy6","email":"abhi42cy7@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vector-lines_1.0.0_1753808554690_0.5801055763457161"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-29T17:02:34.630Z","1.0.0":"2025-07-29T17:02:34.882Z","modified":"2025-07-29T17:02:35.177Z"},"maintainers":[{"name":"abhijeet42cy6","email":"abhi42cy7@gmail.com"}],"description":"Reusable 3-line vector pattern (27×26 Y-shape) for React projects","homepage":"https://github.com/abhijeetkumar/vector-lines#readme","keywords":["react","pattern","svg","grid","background"],"repository":{"type":"git","url":"git+https://github.com/abhijeetkumar/vector-lines.git"},"author":{"name":"Abhijeet Kumar","email":"abhi42cy7@gmail.com"},"bugs":{"url":"https://github.com/abhijeetkumar/vector-lines/issues"},"license":"MIT","readme":"# React Three-Line Pattern Component\n\nA lightweight, customizable React component that creates a seamless background pattern of Y-shaped elements. Perfect for adding subtle, geometric textures to your React applications.\n\n## 🎯 Features\n\n- ✨ Seamless pattern with three-line Y-shaped elements\n- 🎨 Fully customizable colors and dimensions\n- 📱 Responsive and scalable\n- 🚀 Easy to integrate\n- 🎮 Non-intrusive (doesn't interfere with interactions)\n- 🎬 Animation-ready with CSS transitions\n\n## 📦 Installation\n\n### NPM\n```bash\nnpm install vector-lines\n```\n\n### Yarn\n```bash\nyarn add vector-lines\n```\n\n## 🚀 Usage\n\nBasic usage:\n```jsx\nimport ThreeLinePattern from 'vector-lines';\n\nfunction YourComponent() {\n  return (\n    <div style={{ position: 'relative' }}>\n      <ThreeLinePattern />\n      Your content here\n    </div>\n  );\n}\n```\n\nCustomized usage:\n```jsx\n<ThreeLinePattern \n  lineColor=\"#e0e0e0\"    // Color of the lines\n  lineWidth={1}          // Width of the lines in pixels\n  spacing={40}           // Space between pattern repetitions\n  style={{              // Optional additional styles\n    opacity: 0.5,\n    transition: 'all 0.3s ease'  // Enable smooth transitions\n  }}\n/>\n```\n\n## ⚙️ Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `lineColor` | string | '#e0e0e0' | Color of the pattern lines |\n| `lineWidth` | number | 1 | Width of the lines in pixels |\n| `spacing` | number | 40 | Space between pattern repetitions |\n| `style` | object | {} | Additional CSS styles to apply |\n| `line1Start` | object | `{x: 13.5, y: 0}` | Start coordinates for vertical line |\n| `line1End` | object | `{x: 13.5, y: 13}` | End coordinates for vertical line |\n| `line2Start` | object | `{x: 13.5, y: 13}` | Start coordinates for horizontal line |\n| `line2End` | object | `{x: 0, y: 13}` | End coordinates for horizontal line |\n| `line3Start` | object | `{x: 13.5, y: 13}` | Start coordinates for diagonal line |\n| `line3End` | object | `{x: 26, y: 25.5}` | End coordinates for diagonal line |\n\n## 🎨 Styling\n\nThe component creates an absolutely positioned div that covers its parent container. Make sure the parent has:\n```css\nposition: relative;\n```\n\n## 📝 Important Notes\n\n1. **Container Positioning**: The parent container must have `position: relative` for the pattern to display correctly.\n\n2. **Pattern Placement**: The pattern will automatically fill its container while staying in the background.\n\n3. **Performance**: The pattern uses SVG converted to base64, making it efficient and easy to use.\n\n## 🌟 Examples\n\n### Basic Background\n```jsx\nfunction App() {\n  return (\n    <div style={{ position: 'relative', minHeight: '100vh' }}>\n      <ThreeLinePattern />\n      <h1>Your Content</h1>\n    </div>\n  );\n}\n```\n\n### Custom Styling\n```jsx\nfunction CustomSection() {\n  return (\n    <div style={{ position: 'relative', padding: '20px' }}>\n      <ThreeLinePattern \n        lineColor=\"#007bff\"\n        lineWidth={2}\n        spacing={60}\n        style={{ opacity: 0.2 }}\n      />\n      <h2>Section Content</h2>\n    </div>\n  );\n}\n```\n\n### Multiple Patterns\n```jsx\nfunction LayeredPattern() {\n  return (\n    <div style={{ position: 'relative' }}>\n      <ThreeLinePattern \n        lineColor=\"#007bff\"\n        spacing={40}\n      />\n      <ThreeLinePattern \n        lineColor=\"rgba(0, 255, 0, 0.5)\"\n        spacing={80}\n        style={{ opacity: 0.1 }}\n      />\n      <div>Your Content</div>\n    </div>\n  );\n}\n```\n\n### Animations\n\nThe component supports various animation techniques:\n\n#### 1. Color Transitions\n```jsx\nfunction ColorTransition() {\n  return (\n    <ThreeLinePattern \n      lineColor=\"#007bff\"\n      style={{\n        transition: 'all 0.3s ease',\n        ':hover': {\n          backgroundColor: 'rgba(0,0,0,0.1)'\n        }\n      }}\n    />\n  );\n}\n```\n\n#### 2. Moving Pattern\n```jsx\nfunction MovingPattern() {\n  return (\n    <ThreeLinePattern \n      style={{\n        animation: 'movePattern 20s linear infinite'\n      }}\n    />\n  );\n}\n\n// In your CSS:\n@keyframes movePattern {\n  from {\n    backgroundPosition: 0 0;\n  }\n  to {\n    backgroundPosition: 100% 100%;\n  }\n}\n```\n\n#### 3. Dynamic Line Coordinates\n```jsx\nfunction BreathingPattern() {\n  const [scale, setScale] = useState(1);\n  \n  return (\n    <ThreeLinePattern \n      line1End={{ x: 13.5, y: 13 * scale }}\n      line2End={{ x: 27 * scale, y: 14 }}\n      line3End={{ x: 9 * scale, y: 19 }}\n      style={{ transition: 'all 0.5s ease-in-out' }}\n    />\n  );\n}\n```\n\n## 🔧 Troubleshooting\n\n1. **Pattern not visible?**\n   - Check if the parent container has `position: relative`\n   - Verify the pattern's opacity and color values\n   - Ensure the container has dimensions (height/width)\n\n2. **Pattern too prominent?**\n   - Adjust the `lineWidth` prop\n   - Modify the `opacity` via the style prop\n   - Try a lighter `lineColor`\n\n3. **Pattern size issues?**\n   - Adjust both `spacing` and `size` props\n   - The `spacing` controls the distance between pattern repeats\n\n## 🤝 Contributing\n\nFeel free to customize and enhance this component for your specific needs. Some ideas for extensions:\n- Add animation support\n- Implement different pattern variations\n- Add gradient support for lines\n- Create preset patterns\n\n## 🛠 Development\n\n1. Clone the repository\n```bash\ngit clone https://github.com/yourusername/vector-lines.git\ncd vector-lines\n```\n\n2. Install dependencies and start the demo\n```bash\nnpm install\nnpm run dev\n```\n\n## 📄 License\n\nMIT License - Feel free to use in your projects! ","readmeFilename":"README.md","_rev":"1-bb49be1af0ab1f0879c09979d675581d"}