{"_id":"@alfredo.salzillo/blobs","_rev":"3-8c282623ff4a29009a82c20260a526d9","name":"@alfredo.salzillo/blobs","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@alfredo.salzillo/blobs","version":"0.1.0","keywords":["react","svg","blobs","procedural","animated","generative"],"author":{"name":"alfredo salzillo","email":"alfredosalzillo93@gmail.com"},"license":"MIT","_id":"@alfredo.salzillo/blobs@0.1.0","maintainers":[{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"}],"homepage":"https://github.com/alfredosalzillo/blobs#readme","bugs":{"url":"https://github.com/alfredosalzillo/blobs/issues"},"dist":{"shasum":"a09cf2a98cac4d85ee5b35bfc13b75eb15368358","tarball":"https://registry.npmjs.org/@alfredo.salzillo/blobs/-/blobs-0.1.0.tgz","fileCount":25,"integrity":"sha512-TtFBOc9TecBUAuX0O2UbF+eOkXszrq5BeqsyKv2NvydfU05ZSMsokPPTJ2ZkAVvlONy27w7zJgBQafUdLUZzAQ==","signatures":[{"sig":"MEYCIQDPlmC6NMuBR3f33jlCggp2hVUJo3XleT6ZcfFl0r6lpgIhAL3OUjw0WGn2OYOgEeJm0C5yaAzTf2DsQUlxEutQN23/","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16445},"main":"./dist/index.js","types":"./dist/index.d.ts","volta":{"node":"25.8.0"},"module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./Blob":{"types":"./dist/Blob/index.d.ts","import":"./dist/Blob/index.es.js","require":"./dist/Blob/index.cjs.js"}},"funding":{"url":"https://github.com/sponsors/alfredosalzillo"},"gitHead":"46813d14c86c581cc0fe4b355fa8c57c231142dc","private":false,"scripts":{"lint":"biome lint .","build":"vite build","check":"biome check --write .","format":"biome format --write .","prepublishOnly":"npm run build"},"_npmUser":{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"},"repository":{"url":"git+https://github.com/alfredosalzillo/blobs.git","type":"git"},"_npmVersion":"11.11.0","description":"A React library to generate animated procedural SVG blobs","directories":{},"_nodeVersion":"25.8.0","_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","sass":"^1.97.3","vite":"^7.3.1","react":"^19.2.4","react-dom":"^19.2.4","typescript":"^5.5.3","@types/node":"^25.3.5","@types/react":"^19.2.14","@biomejs/biome":"2.4.6","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.4","rollup-plugin-preserve-directives":"^0.4.0"},"_npmOperationalInternal":{"tmp":"tmp/blobs_0.1.0_1772965468823_0.1903653246866519","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@alfredo.salzillo/blobs","version":"0.1.1","keywords":["react","svg","blobs","procedural","animated","generative"],"author":{"name":"alfredo salzillo","email":"alfredosalzillo93@gmail.com"},"license":"MIT","_id":"@alfredo.salzillo/blobs@0.1.1","maintainers":[{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"}],"homepage":"https://github.com/alfredosalzillo/blobs#readme","bugs":{"url":"https://github.com/alfredosalzillo/blobs/issues"},"dist":{"shasum":"569da3d6bc0ee148b41dee75f01c45c0c8fd0f40","tarball":"https://registry.npmjs.org/@alfredo.salzillo/blobs/-/blobs-0.1.1.tgz","fileCount":24,"integrity":"sha512-N+sCqY1Eztp0jWtVrK6h4fYMq2Jh5rJt+gcxs5C0/ReIj7BPutzH8FzGPMr5cpcb9XHlnWLY/pJGz3lqit+hhQ==","signatures":[{"sig":"MEQCIB/mNsjyFO1JkDRqBdxDenQIoYlAmaWjbS48jM5OvEZMAiBrUzI8UOvC5dzSR4jmz9xRs1c+0bzikIQvQWorjhO2ag==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18566},"main":"./dist/index.js","types":"./dist/index.d.ts","volta":{"node":"25.8.0"},"module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./Blob":{"types":"./dist/Blob/index.d.ts","import":"./dist/Blob/index.es.js","require":"./dist/Blob/index.cjs.js"}},"funding":{"url":"https://github.com/sponsors/alfredosalzillo"},"gitHead":"60dbe7a123e583429d365b88e999ef23f2b78465","private":false,"scripts":{"lint":"biome lint .","build":"vite build","check":"biome check --write .","format":"biome format --write .","prepublishOnly":"npm run build"},"_npmUser":{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"},"repository":{"url":"git+https://github.com/alfredosalzillo/blobs.git","type":"git"},"_npmVersion":"11.11.0","description":"A React library to generate animated procedural SVG blobs","directories":{},"_nodeVersion":"25.8.0","_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","sass":"^1.97.3","vite":"^7.3.1","react":"^19.2.4","react-dom":"^19.2.4","typescript":"^5.5.3","@types/node":"^25.3.5","@types/react":"^19.2.14","@biomejs/biome":"2.4.6","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.4","vite-plugin-css-injected-by-js":"^4.0.1","rollup-plugin-preserve-directives":"^0.4.0"},"_npmOperationalInternal":{"tmp":"tmp/blobs_0.1.1_1772966371783_0.09328038799720839","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@alfredo.salzillo/blobs","version":"0.2.0","description":"A React library to generate animated procedural SVG blobs","keywords":["react","svg","blobs","procedural","animated","generative"],"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./Blob":{"types":"./dist/Blob/index.d.ts","import":"./dist/Blob/index.es.js","require":"./dist/Blob/index.cjs.js"},"./StaticBlob":{"types":"./dist/StaticBlob/index.d.ts","import":"./dist/StaticBlob/index.es.js","require":"./dist/StaticBlob/index.cjs.js"}},"scripts":{"build":"vite build","lint":"biome lint .","format":"biome format --write .","check":"biome check --write .","prepublishOnly":"npm run build","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"devDependencies":{"@biomejs/biome":"2.4.6","@types/node":"^25.3.5","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.4","clsx":"^2.1.1","react":"^19.2.4","react-dom":"^19.2.4","rollup-plugin-preserve-directives":"^0.4.0","sass":"^1.97.3","typescript":"^5.5.3","vite":"^7.3.1","vite-plugin-css-injected-by-js":"^4.0.1","vite-plugin-dts":"^4.5.4","storybook":"^10.2.19","@storybook/react-vite":"^10.2.19","@chromatic-com/storybook":"^5.0.1","@storybook/addon-vitest":"^10.2.19","@storybook/addon-a11y":"^10.2.19","@storybook/addon-docs":"^10.2.19","@storybook/addon-onboarding":"^10.2.19","vitest":"^4.1.0","playwright":"^1.58.2","@vitest/browser-playwright":"^4.1.0","@vitest/coverage-v8":"^4.1.0"},"private":false,"repository":{"type":"git","url":"git+https://github.com/alfredosalzillo/blobs.git"},"author":{"name":"alfredo salzillo","email":"alfredosalzillo93@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/alfredosalzillo/blobs/issues"},"funding":{"url":"https://github.com/sponsors/alfredosalzillo"},"volta":{"node":"25.8.0"},"gitHead":"1c829892eb005c8c85300c2dbfa275623bf27b88","_id":"@alfredo.salzillo/blobs@0.2.0","homepage":"https://github.com/alfredosalzillo/blobs#readme","_nodeVersion":"25.8.0","_npmVersion":"11.11.0","dist":{"integrity":"sha512-LsxRSBmeeKi5EoR2ShY0eSl549rk23V1IWVyS6uEHKtX1kw30tDlomciR7qprTfI54FZkPcXPOd/OIZQrOVuTQ==","shasum":"655962aae7ef1a6b1a941243019e54bd280a643d","tarball":"https://registry.npmjs.org/@alfredo.salzillo/blobs/-/blobs-0.2.0.tgz","fileCount":33,"unpackedSize":23489,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFYpT8HC4Ygejn1TfuB2UR1VgvGsLqyKNWxeP+KBFtOlAiEA+9Af22pQwG6m58xMutyXQUiIi78Y4nkd5+5t5yq3Rfg="}]},"_npmUser":{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"},"directories":{},"maintainers":[{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/blobs_0.2.0_1773494197184_0.1645718201568882"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-08T10:24:28.754Z","modified":"2026-03-14T13:16:37.441Z","0.1.0":"2026-03-08T10:24:29.008Z","0.1.1":"2026-03-08T10:39:31.930Z","0.2.0":"2026-03-14T13:16:37.333Z"},"bugs":{"url":"https://github.com/alfredosalzillo/blobs/issues"},"author":{"name":"alfredo salzillo","email":"alfredosalzillo93@gmail.com"},"license":"MIT","homepage":"https://github.com/alfredosalzillo/blobs#readme","keywords":["react","svg","blobs","procedural","animated","generative"],"repository":{"type":"git","url":"git+https://github.com/alfredosalzillo/blobs.git"},"description":"A React library to generate animated procedural SVG blobs","maintainers":[{"name":"alfredo.salzillo","email":"alfredosalzillo93@gmail.com"}],"readme":"# blobs\n\nA React library to generate animated procedural SVG blobs.\n\nIncludes both:\n\n- `Blob`: animated, interactive blob component.\n- `StaticBlob`: non-animated blob renderer.\n\n## Installation\n\n```bash\nnpm install blobs\n```\n\n## Usage\n\n### Simple Example\n\n```tsx\nimport { Blob, generateBlob } from \"blobs\";\n\nconst MyComponent = () => {\n  const blobData = generateBlob(200, 200);\n\n  return (\n    <Blob {...blobData} animated={true} />\n  );\n};\n```\n\n### Manual Blob Generation\n\nYou can use the `generateBlob` function to create the descriptor for a blob, which includes its path, eyes, and colors.\n\n```tsx\nimport { generateBlob } from \"blobs\";\n\nconst blob = generateBlob(width, height);\n// returns BlobDescriptor\n```\n\n### Static Example\n\n```tsx\nimport { StaticBlob, generateBlob } from \"blobs\";\n\nconst MyStaticComponent = () => {\n  const blobData = generateBlob(200, 200);\n\n  return <StaticBlob {...blobData} />;\n};\n```\n\n### Component Props\n\nThe `Blob` component accepts the following props:\n\n- `animated`: (boolean) Whether the blob should have eye-rolling animations.\n- `className`: (string) Optional CSS class for the SVG element.\n- `classNames`: (object) Optional class name overrides for blob parts and animation states.\n- `...BlobDescriptor`: All fields from the descriptor returned by `generateBlob`.\n\nThe `StaticBlob` component accepts:\n\n- `className`: (string) Optional CSS class for the SVG element.\n- `classNames`: (object) Optional class name overrides for `root`, `eye`, `iris`, and `pupil`.\n- `...BlobDescriptor`: All fields from the descriptor returned by `generateBlob`.\n\n## Features\n\n- **Procedural Generation**: Every blob is unique.\n- **Animated**: Fun eye animations that can be triggered randomly or by interaction.\n- **Customizable**: Control the dimensions and style of your blobs.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}