{"_id":"@alvianzf/squiggly-lines-go-brrr","_rev":"4-e56051a1b3f6c251d4fda24551d5be76","name":"@alvianzf/squiggly-lines-go-brrr","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@alvianzf/squiggly-lines-go-brrr","version":"1.0.0","keywords":["react","nextjs","next.js","component","animation","background","framer-motion","animated-background","animated-lines","ui","typescript","customizable"],"author":{"name":"Alvian Zachry Faturrahman","email":"hello@alvianzf.id"},"license":"MIT","_id":"@alvianzf/squiggly-lines-go-brrr@1.0.0","maintainers":[{"name":"alvianzf","email":"alvianzf@gmail.com"}],"homepage":"https://github.com/alvianzf/squiggly-lines-go-brrr#readme","bugs":{"url":"https://github.com/alvianzf/squiggly-lines-go-brrr/issues"},"dist":{"shasum":"259191fe75d1d450abb14500aa5dac6fdf7b92a1","tarball":"https://registry.npmjs.org/@alvianzf/squiggly-lines-go-brrr/-/squiggly-lines-go-brrr-1.0.0.tgz","fileCount":8,"integrity":"sha512-MSdNBBgI8YiJoXpSEavrD1QGBXbDeMXGxTZG0zvAYzUpu19FkHwbl+KJvXfRcim41YEYMVEybWmSZOpT3y4Lgw==","signatures":[{"sig":"MEUCIDmg51TwX/cJ08xhC6512OMiDC1BtQ1WNE93H5GBt1jOAiEAtmE3cvgY9O6vqUG1tuKzBFNhTcR31JCFt8kYOa/GIgQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48937},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"gitHead":"3a8fc41d4a2c5d85561d8c38238ef8f60f987296","scripts":{"dev":"tsup --watch","build":"tsup","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alvianzf","email":"alvianzf@gmail.com"},"repository":{"url":"git+https://github.com/alvianzf/squiggly-lines-go-brrr.git","type":"git"},"_npmVersion":"11.7.0","description":"Because your website absolutely needed animated squiggly lines. Performance? Never heard of her.","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.2","@types/react":"^18.3.18","framer-motion":"^11.15.0","@types/react-dom":"^18.3.5"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","framer-motion":"^10.0.0 || ^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/squiggly-lines-go-brrr_1.0.0_1769590094220_0.39045466588565403","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@alvianzf/squiggly-lines-go-brrr","version":"1.1.1","keywords":["react","nextjs","next.js","component","animation","background","framer-motion","animated-background","animated-lines","ui","typescript","customizable"],"author":{"name":"Alvian Zachry Faturrahman","email":"hello@alvianzf.id"},"license":"MIT","_id":"@alvianzf/squiggly-lines-go-brrr@1.1.1","maintainers":[{"name":"alvianzf","email":"alvianzf@gmail.com"}],"homepage":"https://github.com/alvianzf/squiggly-lines-go-brrr#readme","bugs":{"url":"https://github.com/alvianzf/squiggly-lines-go-brrr/issues"},"dist":{"shasum":"d0e7d9d050f10b7198aeafb7e373d0726bcc8379","tarball":"https://registry.npmjs.org/@alvianzf/squiggly-lines-go-brrr/-/squiggly-lines-go-brrr-1.1.1.tgz","fileCount":9,"integrity":"sha512-koxHdVwVq/huP64pHWY2WzNtAmI/sR6Gh0f76BVAWrJ8G/ZAO0EcZT60OVxSpTr+iignrDx3D4kkp+fsAKEPdA==","signatures":[{"sig":"MEUCIQDACEJ189gi/J7DC3jzUWXw55c+PSalC7sNfAIKXCZAVgIgQIxb+F8BDhCfjihEsX2JrIWNHD7Lm5n8BwXPogJTs0g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":57413},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"gitHead":"a36c53e6f8fbbb327d838f044666d45979b95c01","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alvianzf","email":"alvianzf@gmail.com"},"repository":{"url":"git+https://github.com/alvianzf/squiggly-lines-go-brrr.git","type":"git"},"_npmVersion":"11.7.0","description":"Because your website absolutely needed animated squiggly lines. Performance? Never heard of her.","directories":{},"sideEffects":false,"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","jsdom":"^29.1.1","react":"^18.3.1","vitest":"^2.1.9","react-dom":"^18.3.1","typescript":"^5.7.2","@types/react":"^18.3.18","framer-motion":"^11.15.0","@types/react-dom":"^18.3.5","@testing-library/dom":"^10.4.1","@testing-library/react":"^16.3.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","framer-motion":"^10.0.0 || ^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/squiggly-lines-go-brrr_1.1.1_1785497855757_0.20260015461004843","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@alvianzf/squiggly-lines-go-brrr","version":"1.2.0","keywords":["react","nextjs","next.js","component","animation","background","framer-motion","animated-background","animated-lines","ui","typescript","customizable"],"author":{"name":"Alvian Zachry Faturrahman","email":"hello@alvianzf.id"},"license":"MIT","_id":"@alvianzf/squiggly-lines-go-brrr@1.2.0","maintainers":[{"name":"alvianzf","email":"alvianzf@gmail.com"}],"homepage":"https://github.com/alvianzf/squiggly-lines-go-brrr#readme","bugs":{"url":"https://github.com/alvianzf/squiggly-lines-go-brrr/issues"},"dist":{"shasum":"177770825bd863460ff572c472be25540abc3b9b","tarball":"https://registry.npmjs.org/@alvianzf/squiggly-lines-go-brrr/-/squiggly-lines-go-brrr-1.2.0.tgz","fileCount":9,"integrity":"sha512-HGpKlnA1uFnfIECgch71zlEpuDLeuefzhPLpHyvc3dAkvrvXZ7WvhpG+SYvYnZohhIiVImmPovbcmfoLBjzyDQ==","signatures":[{"sig":"MEQCID1Mhpmi9T3GyEIbFGyKp0xGLhIc+4e0FLTyoTLdJo/bAiA+Tc9evWYVoj6aCQ7iX2J5jtbOiull2NmtvCoooce+Mg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":101237},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"gitHead":"28f32304d847306864f0c50b0ff08ffa93d20690","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alvianzf","email":"alvianzf@gmail.com"},"repository":{"url":"git+https://github.com/alvianzf/squiggly-lines-go-brrr.git","type":"git"},"_npmVersion":"11.7.0","description":"Because your website absolutely needed animated squiggly lines. Performance? Never heard of her.","directories":{},"sideEffects":false,"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","jsdom":"^29.1.1","react":"^18.3.1","vitest":"^2.1.9","react-dom":"^18.3.1","typescript":"^5.7.2","@types/react":"^18.3.18","framer-motion":"^11.15.0","@types/react-dom":"^18.3.5","@testing-library/dom":"^10.4.1","@testing-library/react":"^16.3.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","framer-motion":"^10.0.0 || ^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/squiggly-lines-go-brrr_1.2.0_1785505124736_0.19632269879735453","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@alvianzf/squiggly-lines-go-brrr","version":"2.0.0","description":"Because your website absolutely needed animated squiggly lines. Performance? Never heard of her.","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"sideEffects":false,"scripts":{"build":"tsup","dev":"tsup --watch","type-check":"tsc --noEmit","test":"vitest run","prepublishOnly":"npm run build"},"keywords":["react","nextjs","next.js","component","animation","background","framer-motion","animated-background","animated-lines","ui","typescript","customizable"],"author":{"name":"Alvian Zachry Faturrahman","email":"hello@alvianzf.id"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alvianzf/squiggly-lines-go-brrr.git"},"homepage":"https://github.com/alvianzf/squiggly-lines-go-brrr#readme","bugs":{"url":"https://github.com/alvianzf/squiggly-lines-go-brrr/issues"},"peerDependencies":{"framer-motion":"^10.0.0 || ^11.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@testing-library/dom":"^10.4.1","@testing-library/react":"^16.3.2","@types/react":"^18.3.18","@types/react-dom":"^18.3.5","framer-motion":"^11.15.0","jsdom":"^29.1.1","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.3.5","typescript":"^5.7.2","vitest":"^2.1.9"},"gitHead":"5f931618dcb7b97a1532a8d51a4201f1132dbb7f","_id":"@alvianzf/squiggly-lines-go-brrr@2.0.0","_nodeVersion":"22.16.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-zu/1Q0nfljUEfVRriW1YbmHzrvR/QZRkf7x2CY/MTlBDuRoTe6tcdr4GVc05VLUoI/Ofv7Bh2HPR19dnErXR7g==","shasum":"d0828f689e203333b54d83ea8e702002e64d4c6a","tarball":"https://registry.npmjs.org/@alvianzf/squiggly-lines-go-brrr/-/squiggly-lines-go-brrr-2.0.0.tgz","fileCount":9,"unpackedSize":148458,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDGMYoiQFFGirUslCgltnD95SHpErXLTERUgxobNcLVtwIgQAK9SiA4gLFp2hQ5SWMLIb6pBRePJE/+55cPWvB+LfU="}]},"_npmUser":{"name":"alvianzf","email":"alvianzf@gmail.com"},"directories":{},"maintainers":[{"name":"alvianzf","email":"alvianzf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/squiggly-lines-go-brrr_2.0.0_1785506127852_0.7007580849237143"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-28T08:48:14.137Z","modified":"2026-07-31T13:55:28.131Z","1.0.0":"2026-01-28T08:48:14.363Z","1.1.1":"2026-07-31T11:37:35.886Z","1.2.0":"2026-07-31T13:38:44.889Z","2.0.0":"2026-07-31T13:55:27.991Z"},"bugs":{"url":"https://github.com/alvianzf/squiggly-lines-go-brrr/issues"},"author":{"name":"Alvian Zachry Faturrahman","email":"hello@alvianzf.id"},"license":"MIT","homepage":"https://github.com/alvianzf/squiggly-lines-go-brrr#readme","keywords":["react","nextjs","next.js","component","animation","background","framer-motion","animated-background","animated-lines","ui","typescript","customizable"],"repository":{"type":"git","url":"git+https://github.com/alvianzf/squiggly-lines-go-brrr.git"},"description":"Because your website absolutely needed animated squiggly lines. Performance? Never heard of her.","maintainers":[{"name":"alvianzf","email":"alvianzf@gmail.com"}],"readme":"# 🎨 Squiggly Lines Go Brrr\n\n> _\"We were so preoccupied with whether we could, we didn't stop to think if we should.\"_\n\nBecause your website absolutely, positively needed animated squiggly lines running in the background. Your users? They won't even notice. Your CPU? Oh, it'll notice.\n\n## ℹ️ About Tailwind CSS\n\n**TL;DR:** Tailwind is **recommended but not required**. \n\nThe default colors use Tailwind classes (`text-red-500/20`), so if you use defaults, you'll need Tailwind. But you can totally pass your own CSS color classes instead. See the [colors section](#-about-colors-tailwind-not-actually-required) below for alternatives.\n\nIf you want to use the defaults (lazy mode activated), install Tailwind:\n```bash\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\nNot using Tailwind? No problem! Just pass your own color classes in the `colors` prop.\n\n## 🤔 Why Does This Exist?\n\nGreat question! The answer is: ¯\\\\_(ツ)_/¯\n\nBut in all seriousness (just kidding, we're never serious), this is a highly customizable animated background component for React and Next.js that lets you render beautiful, performant (lol), eye-catching animated lines in various styles. Because static backgrounds are for quitters.\n\n## ✨ Features\n\n- 🐛 **Seven Variants**: Worms, Beetles, Ants, Thunder, plus Letters, Numbers and Alphanumeric\n- 🪲 **Actual Bugs**: Worms, beetles and ants crawl along their routes as emoji, turned to face wherever they're heading\n- 👣 **Trails**: Worms leave a line behind them, beetles and ants leave a trail of dots\n- 🧭 **Direction Control**: Horizontal, vertical, diagonal, random, or the original free-for-all\n- 🎨 **Customizable Colors**: Bring your own Tailwind classes, or pass `colors=\"random\"` and bring nothing\n- 🏃 **Speed Control**: A multiplier or a preset, from `slow` all the way to `ludicrous`\n- 📏 **Adjustable Thickness**: From \"barely there\" to \"THICC boi\"\n- ⚡ **Speed Control**: Fast like your burnout or slow like your CI/CD pipeline\n- 🎯 **TypeScript**: Fully typed because we're not animals\n- ⚛️ **React 18+ & 19**: Modern React with hooks (because class components are so 2018)\n- 🔥 **Next.js Compatible**: Works with App Router and Server Components (we even added `\"use client\"` for you!)\n- 🌙 **SSR Safe**: Won't explode when `window` doesn't exist\n- ♿ **Respects `prefers-reduced-motion`**: Draws the squiggles, holds the motion\n\n## 🆕 What's New\n\n### 2.0.0\n\n**The bugs are real now.** `worms`, `beetles` and `ants` no longer draw a bare\nline — each one sends an actual emoji crawling along the route:\n\n| Variant | Creature | Leaves behind |\n|---------|----------|---------------|\n| `worms` | 🐛 | A line, drawn in step with the crawl |\n| `beetles` | 🪲 | A trail of dots |\n| `ants` | 🐜 | A trail of dots |\n\nThe emoji is **fixed by variant and not configurable** — ask for `ants`, get ants.\nIt rotates continuously so it always faces the direction it's travelling, using\nthe tangent of its own path, and it stays glued to the end of its own trail.\n\n`thunder` is untouched (weather, not wildlife), and the glyph variants already\ndraw their own characters.\n\n**Why the major bump:** no props were removed or renamed, but three variants look\nmaterially different than they did in 1.x. Nothing to migrate — if you were using\n`worms`, you now get worms that wriggle.\n\n### 1.2.0\n\n- **Glyph variants**: `letters`, `numbers` and `alphanumeric` scatter random\n  drifting characters instead of lines. Same props, same behaviour, fewer squiggles.\n- **`direction` prop**: point everything `horizontal`, `vertical`, `diagonal`,\n  `random`, or leave it `default` for the original untamed version.\n- **`speed` prop**: a multiplier (`speed={2}`) or a preset (`speed=\"ludicrous\"`),\n  layered on top of `minDuration`/`maxDuration` rather than replacing them.\n- **`colors=\"random\"`**: skip the palette entirely and let each line roll its own\n  hue. Works without Tailwind, since the color is written to the element directly.\n\nAll additive — every existing prop keeps its current default and behaviour.\n\n### 1.1.x\n\n- **Respects `prefers-reduced-motion`**: lines are drawn once and held static when\n  the OS asks for reduced motion.\n- **Fixed resize churn**: stroke width and duration were re-rolled on every render,\n  so resizing the window made the whole background twitch and restart. They're now\n  stable, and resize events are coalesced to one update per animation frame.\n- **Restored the `\"use client\"` directive** in the published build. It was stripped\n  from `1.0.0`, which broke Next.js App Router consumers.\n- Shipped the missing `LICENSE` file and added `sideEffects: false`.\n\n## 📦 Installation\n\n```bash\nnpm install @alvianzf/squiggly-lines-go-brrr\n# or\nyarn add @alvianzf/squiggly-lines-go-brrr\n# or\npnpm add @alvianzf/squiggly-lines-go-brrr\n# or\nbun add @alvianzf/squiggly-lines-go-brrr\n```\n\n### ⚠️ Peer Dependencies (AKA Things You Better Have Installed)\n\nYou'll need these installed (they're the only real requirements):\n\n```bash\nnpm install react react-dom framer-motion\n```\n\n**React Version Compatibility:**\n\nThis package supports **both React 18 and React 19**:\n- ✅ React 18.x (`^18.0.0`)\n- ✅ React 19.x (`^19.0.0`)\n\n**Framer Motion Compatibility:**\n- ✅ Framer Motion 10.x (`^10.0.0`)\n- ✅ Framer Motion 11.x (`^11.0.0`)\n\n### 🔧 Installation Troubleshooting\n\n**If you get peer dependency errors:**\n\nThe package is designed to work cleanly with both React 18 and 19. However, if you encounter peer dependency conflicts during installation, here are your options:\n\n1. **Option 1 - Use `--legacy-peer-deps` (Quick Fix)**:\n   ```bash\n   npm install @alvianzf/squiggly-lines-go-brrr --legacy-peer-deps\n   ```\n\n2. **Option 2 - Use `--force` (Nuclear Option)**:\n   ```bash\n   npm install @alvianzf/squiggly-lines-go-brrr --force\n   ```\n\n3. **Option 3 - Check Your React Versions** (Recommended):\n   Make sure your `react` and `react-dom` versions match:\n   ```bash\n   npm list react react-dom\n   ```\n   If they don't match (e.g., React 18 with React-DOM 19), update them to the same version:\n   ```bash\n   npm install react@18 react-dom@18\n   # or\n   npm install react@19 react-dom@19\n   ```\n\n**Still having issues?** Open an issue on [GitHub](https://github.com/alvianzf/squiggly-lines-go-brrr/issues) and we'll pretend to look at it.\n\n### 🎨 About Colors (Tailwind Not Actually Required!)\n\n**Plot twist:** Despite us yelling about Tailwind, you don't *actually* need it! \n\nThe `colors` prop accepts **any CSS class names** that set text color. The component uses `stroke=\"currentColor\"` on SVG paths, which inherits from the text color of the applied class.\n\n**Your options:**\n\n1. **Use Tailwind classes** (the default and easiest):\n   ```tsx\n   colors={['text-purple-500/30', 'text-pink-500/30']}\n   ```\n\n2. **Use your own CSS classes** (for non-Tailwind users):\n   ```css\n   .squiggly-purple { color: rgba(168, 85, 247, 0.3); }\n   .squiggly-pink { color: rgba(236, 72, 153, 0.3); }\n   ```\n   ```tsx\n   colors={['squiggly-purple', 'squiggly-pink']}\n   ```\n\n3. **Use inline styles** (if you're feeling rebellious):\n   Just note that the `colors` prop expects class names, not inline styles. So stick with options 1 or 2.\n\n**Bottom line:** Tailwind makes it easy (just use `text-color-500/30` classes), but you can totally use your own CSS classes if you prefer. We won't judge. Much.\n\n## 🚀 Usage\n\n### Basic Usage (Boring Mode)\n\n```tsx\nimport { SquigglyBackground } from '@alvianzf/squiggly-lines-go-brrr';\n\nfunction App() {\n  return (\n    <div>\n      <SquigglyBackground />\n      {/* Your actual content here */}\n    </div>\n  );\n}\n```\n\nCongratulations! You now have 50 animated worms crawling across your website. Your users will be... confused? Impressed? Who knows!\n\n### Advanced Usage (Chaos Mode)\n\n```tsx\nimport { SquigglyBackground } from '@alvianzf/squiggly-lines-go-brrr';\n\nfunction App() {\n  return (\n    <div>\n      <SquigglyBackground\n        variant=\"thunder\"\n        count={100}\n        colors={[\n          'text-purple-500/30',\n          'text-pink-500/30',\n          'text-cyan-500/30',\n          'text-yellow-500/30'\n        ]}\n        minStrokeWidth={1}\n        maxStrokeWidth={4}\n        minDuration={3}\n        maxDuration={8}\n        direction=\"diagonal\"\n        speed=\"fast\"\n        backgroundColor=\"#0a0a0a\"\n      />\n      {/* Your content, now with 300% more pizzazz */}\n    </div>\n  );\n}\n```\n\n### Glyph Mode (No Tailwind Required)\n\nDrifting digits, moving sideways, with colors picked for you:\n\n```tsx\n<SquigglyBackground\n  variant=\"numbers\"\n  direction=\"horizontal\"\n  speed=\"fast\"\n  colors=\"random\"\n  count={60}\n/>\n```\n\n### Next.js App Router Usage\n\n```tsx\n// app/layout.tsx\nimport { SquigglyBackground } from '@alvianzf/squiggly-lines-go-brrr';\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <SquigglyBackground variant=\"beetles\" count={75} />\n        {children}\n      </body>\n    </html>\n  );\n}\n```\n\nThe `\"use client\"` directive is already included. We're not monsters.\n\n## 🎛️ API Reference\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `'worms' \\| 'beetles' \\| 'ants' \\| 'thunder' \\| 'letters' \\| 'numbers' \\| 'alphanumeric'` | `'worms'` | Choose your animation style. Each one is equally extra. |\n| `count` | `number` | `50` | How many lines (or glyphs) to render. More = prettier. More = slower. Choose wisely. |\n| `colors` | `string[] \\| 'random'` | `['text-red-500/20', 'text-slate-400/30']` | Array of CSS color class names. Tailwind classes work great, but any classes that set `color` CSS property will work. The component uses `stroke=\"currentColor\"`. Pass `'random'` to have every line roll its own hue instead — no Tailwind needed. |\n| `direction` | `'horizontal' \\| 'vertical' \\| 'diagonal' \\| 'random' \\| 'default'` | `'default'` | Which way the chaos travels. Applies to lines and to glyph drift. |\n| `speed` | `number \\| 'slow' \\| 'normal' \\| 'fast' \\| 'ludicrous'` | `1` | Multiplier layered on the durations. `2` is twice as fast, `0.5` is half. Presets work too. |\n| `minStrokeWidth` | `number` | `1` | Minimum line thickness in pixels. For the subtle among us. |\n| `maxStrokeWidth` | `number` | `3` | Maximum line thickness in pixels. For the bold and brash. |\n| `minDuration` | `number` | `5` | Minimum animation duration in seconds. Lower = more frantic. |\n| `maxDuration` | `number` | `10` | Maximum animation duration in seconds. Higher = more chill. |\n| `className` | `string` | `''` | Additional CSS classes because you're never satisfied. |\n| `backgroundColor` | `string` | `'var(--bg-primary)'` | Background color. Defaults to a CSS variable that probably doesn't exist in your project. |\n\n### Variants Explained\n\n- **worms** 🐛: Smooth, organic curves. A caterpillar wriggles along each one, leaving the line behind it like a slime trail.\n- **beetles** 🪲: Sharp, angular paths. A beetle marches the route and drops a trail of dots.\n- **ants** 🐜: Short, frantic segments. An ant scurries through, dotting as it goes.\n- **thunder** ⚡: Sharp zigzags. Embrace your inner Zeus. Zap zap! No creature — lightning is weather, not wildlife.\n\nEach creature is rotated to face the direction it's heading, so they always look\nlike they're going somewhere. The emoji is decided by the variant and can't be\nswapped out: pick `ants`, get 🐜.\n- **letters** 🔤: Random drifting letters. Looks like your app is thinking very hard.\n- **numbers** 🔢: Random drifting digits. Instant \"we do data\" energy.\n- **alphanumeric** 🔣: Both at once, for maximum unexplained.\n\n### Direction\n\nEvery variant can be pointed somewhere. The glyph variants drift the same way.\n\n```tsx\n<SquigglyBackground direction=\"horizontal\" />  // wide and flat\n<SquigglyBackground direction=\"vertical\" />    // tall and narrow\n<SquigglyBackground direction=\"diagonal\" />    // 45 degrees, all four ways\n<SquigglyBackground direction=\"random\" />      // each line picks its own\n<SquigglyBackground direction=\"default\" />     // the original free-for-all\n```\n\n### Speed\n\n`speed` sits on top of `minDuration`/`maxDuration` rather than replacing them, so\nyour existing duration settings still apply — they just get divided by the multiplier.\n\n```tsx\n<SquigglyBackground speed={2} />             // twice as fast\n<SquigglyBackground speed={0.5} />           // half speed\n<SquigglyBackground speed=\"ludicrous\" />     // 6x, may cause motion sickness\n```\n\nPresets: `slow` (0.5x), `normal` (1x), `fast` (2.5x), `ludicrous` (6x). Zero,\nnegative, and nonsense values fall back to `1` instead of breaking the animation.\n\n### Random Colors\n\nDon't want to pick a palette? Don't.\n\n```tsx\n<SquigglyBackground colors=\"random\" />\n```\n\nEvery line gets its own translucent hue, re-rolled on each mount. This writes the\ncolor straight to the element, so it works **without Tailwind** and ignores the\n`content` config below entirely.\n\n## 🎨 Tailwind Setup\n\nMake sure your `tailwind.config.js` includes the package in the `content` array:\n\n```js\nmodule.exports = {\n  content: [\n    './src/**/*.{js,ts,jsx,tsx}',\n    './node_modules/@alvianzf/squiggly-lines-go-brrr/dist/**/*.{js,mjs}', // Add this!\n  ],\n  // ... rest of your config\n};\n```\n\nOtherwise, your colors won't work and you'll be sad. We'll be sad too. Everyone will be sad.\n\n## 🤓 TypeScript Support\n\nFully typed because we're professionals (citation needed). Import the types if you need them:\n\n```tsx\nimport type {\n  SquigglyBackgroundProps,\n  AnimationVariant,\n  LineVariant,\n  GlyphVariant,\n  Direction,\n  SpeedPreset,\n} from '@alvianzf/squiggly-lines-go-brrr';\n```\n\n## ⚡ Performance\n\nLook, let's be real here. This renders animated SVG paths with Framer Motion. It's not going to win any performance awards. But it _looks cool_, and isn't that what really matters?\n\nSome tips:\n- Keep `count` reasonable (50-100 is fine, 500 is asking for trouble)\n- Use semi-transparent colors (`/10`, `/20`, `/30`)\n- Test on actual devices, not just your $3000 MacBook Pro\n- Maybe don't use this on a page that renders 10,000 items in a list\n\nResizes are coalesced to one update per animation frame, so dragging your window\naround won't regenerate every path on every event.\n\nOne caveat since 2.0.0: `beetles` and `ants` draw their trail as individual dots,\nso they render roughly a dozen small elements per creature instead of one path.\nAt the default `count` of 50 that's fine; if you crank it to 300 you will feel it.\n`worms` and `thunder` are still one path each.\n\n## ♿ Accessibility\n\nThe whole layer is `aria-hidden` and `pointer-events-none`, so it stays out of\nthe way of screen readers and clicks.\n\nIf the visitor's OS asks for reduced motion, the lines are drawn once and left\nstatic instead of looping forever. Nothing to configure — it follows the system\nsetting via `prefers-reduced-motion`.\n\n## 🐛 Troubleshooting\n\n**Colors aren't showing up!**\n- Did you install Tailwind? Did you update your `tailwind.config.js`? Do you even have a `tailwind.config.js`?\n\n**Next.js throws a hydration error!**\n- Shouldn't happen™️. The component checks for `window` before rendering. If it does happen, file an issue and we'll pretend to look at it.\n\n**My site is slow now!**\n- Yeah, that's the cost of beauty. Try reducing the `count` prop or increasing `minDuration`/`maxDuration`.\n\n**Can I use this in production?**\n- You _can_ do anything if you're brave enough. Should you? That's between you and your engineering manager.\n\n## 📄 License\n\nMIT - Do whatever you want with this. We're not liable if your product manager makes you remove it after seeing the performance impact.\n\n## 🙏 Contributing\n\nPRs welcome! Found a bug? Want to add another variant? Think the comments aren't sarcastic enough? Let's hear it!\n\n## 💖 Credits\n\nBuilt with:\n- React (obviously)\n- Framer Motion (for the smooth animations)\n- TypeScript (for the type safety we claim to have)\n- Tears and coffee (for the developer experience)\n\n---\n\nMade with ❤️ (and questionable decisions) by [@alvianzf](https://github.com/alvianzf)\n\n_Remember: With great power comes great responsibility. Use squiggly lines responsibly._\n","readmeFilename":"README.md"}