{"_id":"3d-shape-particle-text","_rev":"5-1a0ee9dd97ce1c9f44aba2b2c8fd8581","name":"3d-shape-particle-text","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"3d-shape-particle-text","version":"1.0.0","keywords":["react","three.js","3d","webgl","ai","brain","neural-network","visualization","landing-page","hero-section","interactive","particles","morph","ui-component","future-tech"],"author":{"name":"mukes555"},"license":"MIT","_id":"3d-shape-particle-text@1.0.0","maintainers":[{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"}],"homepage":"https://github.com/mukes555/3d-shape-particle-text#readme","bugs":{"url":"https://github.com/mukes555/3d-shape-particle-text/issues"},"dist":{"shasum":"cdd48703a05c953c8e15edaa5870aa88c3148b71","tarball":"https://registry.npmjs.org/3d-shape-particle-text/-/3d-shape-particle-text-1.0.0.tgz","fileCount":5,"integrity":"sha512-agAOYCxNyiaBq5G8Y75bHXXA2jQHKWWcU8JcOqT+i1JYO11Wbblha+pi7OeZFJdZNa9CA1iAO3elIOk3ISwy2Q==","signatures":[{"sig":"MEYCIQCh1VyGcGZs3tvyQ08KtdTE7JkCx8+6FxdH8iz08dHB6gIhAKZbnPmfj6vhI2Q2hv0t43wweOvRC2LVpBT05fWomcRf","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65431},"main":"dist/3d-shape-particle-text.umd.js","module":"dist/3d-shape-particle-text.es.js","exports":{".":{"import":"./dist/3d-shape-particle-text.es.js","require":"./dist/3d-shape-particle-text.umd.js"}},"gitHead":"63d8c27847ac5beba5e4fafd1e955c0aa3ae0fb1","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"},"repository":{"url":"git+https://github.com/mukes555/3d-shape-particle-text.git","type":"git"},"_npmVersion":"10.5.2","description":"Interactive 3D particle system morphing between brain shape and text, with lightning effects and full customization.","directories":{},"_nodeVersion":"20.13.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.160.0","react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","three":"^0.128.0 || ^0.130.0 || ^0.140.0 || ^0.150.0 || ^0.160.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3d-shape-particle-text_1.0.0_1766271896765_0.8039487344230243","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"3d-shape-particle-text","version":"1.0.1","keywords":["react","three.js","3d","webgl","ai","brain","neural-network","visualization","landing-page","hero-section","interactive","particles","morph","ui-component","future-tech"],"author":{"name":"mukes555"},"license":"MIT","_id":"3d-shape-particle-text@1.0.1","maintainers":[{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"}],"homepage":"https://github.com/mukes555/3d-shape-particle-text#readme","bugs":{"url":"https://github.com/mukes555/3d-shape-particle-text/issues"},"dist":{"shasum":"4081d69da416098197b89695b5425a91f7f95754","tarball":"https://registry.npmjs.org/3d-shape-particle-text/-/3d-shape-particle-text-1.0.1.tgz","fileCount":6,"integrity":"sha512-TA7OR9gJsPkWW33gS/m3oW68nOM2KJOlfFwSkuYpoDDU9v5gJTNLZtZqeT+jflDQ92iNs4ApjowK7yuCPUax0g==","signatures":[{"sig":"MEYCIQDwgXHTNREAszG+TRMYPWCXuOiBuctKmm//c13R5lXmQgIhAPXV8QMT5FvUtOYFjrXqDa3J0QE9S1Qhxwa0JgHLoCy+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67337},"main":"dist/3d-shape-particle-text.umd.js","types":"index.d.ts","module":"dist/3d-shape-particle-text.es.js","exports":{".":{"types":"./index.d.ts","import":"./dist/3d-shape-particle-text.es.js","require":"./dist/3d-shape-particle-text.umd.js"}},"gitHead":"039e0e8508123850ac35aad8a1f8700190105737","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"},"repository":{"url":"git+https://github.com/mukes555/3d-shape-particle-text.git","type":"git"},"_npmVersion":"10.5.2","description":"Interactive 3D particle system morphing between brain shape and text, with lightning effects and full customization.","directories":{},"_nodeVersion":"20.13.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.160.0","react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","three":"^0.128.0 || ^0.130.0 || ^0.140.0 || ^0.150.0 || ^0.160.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3d-shape-particle-text_1.0.1_1766335508720_0.6511404503142153","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"3d-shape-particle-text","version":"1.0.2","keywords":["react","three.js","3d","webgl","ai","brain","neural-network","visualization","landing-page","hero-section","interactive","particles","morph","ui-component","future-tech"],"author":{"name":"mukes555"},"license":"MIT","_id":"3d-shape-particle-text@1.0.2","maintainers":[{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"}],"homepage":"https://github.com/mukes555/3d-shape-particle-text#readme","bugs":{"url":"https://github.com/mukes555/3d-shape-particle-text/issues"},"dist":{"shasum":"b0a0c9ce258788838e5c329775a43122c5ae0c92","tarball":"https://registry.npmjs.org/3d-shape-particle-text/-/3d-shape-particle-text-1.0.2.tgz","fileCount":6,"integrity":"sha512-dMIlQGrKzieGhnxzdeoqCFJB4R0aHY36it/wKyhkKxDNheY9Qcldc3VHKHyk9/Hc11wtWAKwJq2xR9hYLJQ2Bw==","signatures":[{"sig":"MEUCIQCEFZuFLa/dhkkTFDhM0dj/5zTPNbIH8OACw6LtgmYcVQIgB2UslhLvwoMhL5a4n2tNiQdNneEkuMssG9z5MlvPKEM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70072},"main":"dist/3d-shape-particle-text.umd.js","types":"index.d.ts","module":"dist/3d-shape-particle-text.es.js","exports":{".":{"types":"./index.d.ts","import":"./dist/3d-shape-particle-text.es.js","require":"./dist/3d-shape-particle-text.umd.js"}},"gitHead":"86eac3d7176a76d5e8a0b90590161a38a08150a6","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"},"repository":{"url":"git+https://github.com/mukes555/3d-shape-particle-text.git","type":"git"},"_npmVersion":"10.5.2","description":"Interactive 3D particle system morphing between brain shape and text, with lightning effects and full customization.","directories":{},"_nodeVersion":"20.13.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.7","react":"^18.2.0","three":"^0.160.0","react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","three":"^0.128.0 || ^0.130.0 || ^0.140.0 || ^0.150.0 || ^0.160.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3d-shape-particle-text_1.0.2_1766338087898_0.9036789687158713","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"3d-shape-particle-text","version":"1.0.3","keywords":["react","three.js","3d","webgl","ai","brain","neural-network","visualization","landing-page","hero-section","interactive","particles","morph","ui-component","future-tech"],"author":{"name":"mukes555"},"license":"MIT","_id":"3d-shape-particle-text@1.0.3","maintainers":[{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"}],"homepage":"https://github.com/mukes555/3d-shape-particle-text#readme","bugs":{"url":"https://github.com/mukes555/3d-shape-particle-text/issues"},"dist":{"shasum":"6cf3b1f8c8b2ae9a5eb7eedae4642d72f3809b7c","tarball":"https://registry.npmjs.org/3d-shape-particle-text/-/3d-shape-particle-text-1.0.3.tgz","fileCount":6,"integrity":"sha512-zgBEoqgJ4KD240VlGfq6rrqvtR9yu5gtca/7NboC9stDmw43M7SRW/frgR9xdpENWZ4iySzG3KHxt3I4TQRowA==","signatures":[{"sig":"MEUCIQCbCXBJ8FPx8VxbCvk3AwBObXINa8CbOI1+RQMF94B85QIgMn6TDHMMxYgrwBW/JFrEF8AYBafdPuYRsT/dd0eyCws=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35424},"main":"dist/3d-shape-particle-text.umd.js","types":"index.d.ts","module":"dist/3d-shape-particle-text.es.js","exports":{".":{"types":"./index.d.ts","import":"./dist/3d-shape-particle-text.es.js","require":"./dist/3d-shape-particle-text.umd.js"}},"gitHead":"86eac3d7176a76d5e8a0b90590161a38a08150a6","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"},"repository":{"url":"git+https://github.com/mukes555/3d-shape-particle-text.git","type":"git"},"_npmVersion":"10.5.2","description":"Interactive 3D particle system morphing between brain shape and text, with lightning effects and full customization.","directories":{},"_nodeVersion":"20.13.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.7","react":"^18.2.0","three":"^0.160.0","react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","three":"^0.128.0 || ^0.130.0 || ^0.140.0 || ^0.150.0 || ^0.160.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3d-shape-particle-text_1.0.3_1766355715529_0.3957110116786118","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"3d-shape-particle-text","version":"1.0.4","description":"Interactive 3D particle system morphing between preset 3D shapes and text, with lightning effects and full customization.","main":"dist/3d-shape-particle-text.umd.js","module":"dist/3d-shape-particle-text.es.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./dist/3d-shape-particle-text.es.js","require":"./dist/3d-shape-particle-text.umd.js"}},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"keywords":["react","three.js","3d","webgl","ai","shape","neural-network","visualization","landing-page","hero-section","interactive","particles","morph","ui-component","future-tech"],"author":{"name":"mukes555"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/mukes555/3d-shape-particle-text.git"},"bugs":{"url":"https://github.com/mukes555/3d-shape-particle-text/issues"},"homepage":"https://github.com/mukes555/3d-shape-particle-text#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","three":"^0.128.0 || ^0.130.0 || ^0.140.0 || ^0.150.0 || ^0.160.0"},"devDependencies":{"@vitejs/plugin-react":"^4.2.0","react":"^18.2.0","react-dom":"^18.2.0","three":"^0.160.0","vite":"^6.1.7"},"_id":"3d-shape-particle-text@1.0.4","gitHead":"0e14c60e5850c1314a625bde48102d8541918141","_nodeVersion":"20.13.1","_npmVersion":"10.5.2","dist":{"integrity":"sha512-bVuj+lQmbv1LdDEeYcJS32tFa90tKbLewaKqQyFeP1MPgoUBjGB/CJf/Jh33RsOBpaYaatHt6if9sT2pShclmg==","shasum":"9c6659da47ab9907daf612a09c038f577bc831ff","tarball":"https://registry.npmjs.org/3d-shape-particle-text/-/3d-shape-particle-text-1.0.4.tgz","fileCount":6,"unpackedSize":53435,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDIa3788SF0svRqUg8kYfRiC7annRX+xfUOCzvN1B7MyAIgbldAACJduMCXyp6EZtkVFj0Kro3AixebwapkmWM5cec="}]},"_npmUser":{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"},"directories":{},"maintainers":[{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3d-shape-particle-text_1.0.4_1766405121590_0.9449546424745006"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-20T23:04:56.658Z","modified":"2025-12-22T12:05:21.954Z","1.0.0":"2025-12-20T23:04:56.914Z","1.0.1":"2025-12-21T16:45:08.865Z","1.0.2":"2025-12-21T17:28:08.053Z","1.0.3":"2025-12-21T22:21:55.686Z","1.0.4":"2025-12-22T12:05:21.739Z"},"bugs":{"url":"https://github.com/mukes555/3d-shape-particle-text/issues"},"author":{"name":"mukes555"},"license":"MIT","homepage":"https://github.com/mukes555/3d-shape-particle-text#readme","keywords":["react","three.js","3d","webgl","ai","shape","neural-network","visualization","landing-page","hero-section","interactive","particles","morph","ui-component","future-tech"],"repository":{"type":"git","url":"git+https://github.com/mukes555/3d-shape-particle-text.git"},"description":"Interactive 3D particle system morphing between preset 3D shapes and text, with lightning effects and full customization.","maintainers":[{"name":"mukes555","email":"mukesh.chhimpa11@gmail.com"}],"readme":"# 3d-shape-particle-text\n\n[![NPM Version](https://img.shields.io/npm/v/3d-shape-particle-text)](https://www.npmjs.com/package/3d-shape-particle-text)\n[![License](https://img.shields.io/npm/l/3d-shape-particle-text)](https://github.com/mukes555/3d-shape-particle-text/blob/main/LICENSE)\n\nA high-performance React component for rendering interactive 3D particle systems that morph between preset 3D shapes and custom text. Built with React and Three.js.\n\n## Features\n\n- **Particle Morphing**: Smooth transitions between preset 3D shapes and text.\n- **Interactive**: Responds to mouse hover and rotation.\n- **Customizable**: Configurable colors, particle counts, lightning effects, and more.\n- **Responsive**: Automatically adjusts to container size.\n- **Multiple Shapes**: Built-in presets like brain, sphere, torus, knot, helix, blob, crystal, spiral, cube, orbit.\n\n## Installation\n\n```bash\nnpm install 3d-shape-particle-text three\n# or\nyarn add 3d-shape-particle-text three\n```\n\n> **Note**: This package requires `react`, `react-dom`, and `three` as peer dependencies.\n\n## Usage\n\nHere is a standard configuration matching the default theme:\n\n```jsx\nimport { ShapeParticleText } from '3d-shape-particle-text';\n\nfunction App() {\n  return (\n    <div style={{ height: '100vh', width: '100%' }}>\n      <ShapeParticleText\n        text=\"AI\"\n        shape=\"brain\"\n        particleCount={26000}\n        particleSize={0.01}\n        primaryColor={{ r: 0.396, g: 0.239, b: 0.820 }} // #653DD1\n        secondaryColor={{ r: 0.537, g: 0.239, b: 0.820 }} // #893DD1\n        backgroundColor=\"#000000\"\n        lightningColor=\"#ffffff\"\n        globeColor=\"#653DD1\"\n        morphDuration={2.5}\n        rotationSpeed={0.1}\n        hoverIntensity={0.05}\n        lightningIntensity={1.7}\n        zapSpread={0.7}\n        zapWidth={0.003}\n        globeOpacity={0.15}\n        showGlobe={true}\n        glowEffect={true}\n      />\n    </div>\n  );\n}\n```\n\n## Examples\n\n- `examples/landing-page/`: landing page demo + built-in playground + theme presets\n\nRun the landing-page example:\n\n```bash\ncd examples/landing-page\nnpm install\nnpm run dev\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `text` | `string` | `'AI'` | The text to morph into. |\n| `shape` | `string` | `'brain'` | Shape preset key (e.g. `brain`, `crystal`, `spiral`, `torusKnot`). |\n| `shapePoints` | `ShapePoint[] \\| Float32Array \\| number[]` | `null` | Custom point cloud to render instead of a preset. |\n| `particleCount` | `number` | `24000` | Total number of particles. |\n| `particleSize` | `number` | `0.01` | Size of individual particles. |\n| `primaryColor` | `object` \\| `string` | `{r: 0.396, g: 0.239, b: 0.820}` | Primary color of the particle form. |\n| `secondaryColor` | `object` \\| `string` | `{r: 0.537, g: 0.239, b: 0.820}` | Secondary color for gradients and connections. |\n| `backgroundColor` | `string` | `'#000000'` | Background color of the canvas. |\n| `transparent` | `boolean` | `false` | Whether the canvas background is transparent. |\n| `morphDuration` | `number` | `2.5` | Duration of the morph animation in seconds. |\n| `rotationSpeed` | `number` | `0.4` | Speed of the idle rotation. |\n| `hoverIntensity` | `number` | `0.05` | Intensity of the mouse hover tilt effect. |\n| `lightningIntensity` | `number` | `1.0` | Frequency of lightning effects (0 to disable). |\n| `lightningColor` | `object` \\| `string` | `null` | Color of lightning bolts. If null, uses random colors. |\n| `zapSpread` | `number` | `0.7` | Spread amplitude of lightning bolts. |\n| `zapWidth` | `number` | `0.02` | Thickness of lightning bolts. |\n| `cameraDistance` | `number` | `5.5` | Distance of the camera from the center. |\n| `globeOpacity` | `number` | `0.08` | Opacity of the surrounding wireframe globe. |\n| `globeColor` | `object` \\| `string` | `null` | Color of the wireframe globe. If null, uses `primaryColor`. |\n| `showGlobe` | `boolean` | `true` | Whether to render the wireframe globe. |\n| `glowEffect` | `boolean` | `true` | Enables additive blending for a glow effect. |\n| `className` | `string` | `''` | Custom CSS class for the container. |\n| `style` | `object` | `{}` | Custom inline styles for the container. |\n\n## License\n\nMIT\n","readmeFilename":"README.md"}