{"_id":"@aireact/360-spin","_rev":"4-0faa8f9c8f2791eb6799b277cca36d69","name":"@aireact/360-spin","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aireact/360-spin","version":"1.0.0","keywords":["react","360","spin","product","viewer"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aireact/360-spin@1.0.0","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"dist":{"shasum":"e3e93cdedce5e962aad541e8592c28cac0dcf297","tarball":"https://registry.npmjs.org/@aireact/360-spin/-/360-spin-1.0.0.tgz","fileCount":12,"integrity":"sha512-ra/7O7MtoCe+zE08DlXxGsOnUC9OrKhflw2GBMgXEv62c5g6Vago/kWIv+h07eFEknGYgsWE/PHaQ2liBaanPw==","signatures":[{"sig":"MEYCIQCJhawSnekq2+HX2g0flcuROn26Us9YUFFk9dHSgyryFgIhAN7wWJP3cgnahpjv5s0qWVWDxwahAV02IcGlUN3C9VxD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":158972},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./dist/360-spin.css":"./dist/360-spin.css"},"gitHead":"3578555f09dd610edce51f84a4d6d27a6b2146bd","scripts":{"dev":"vite build --watch","build":"tsc && vite build"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"_npmVersion":"10.9.2","description":"Interactive 360° product viewer for React","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.14.0","dependencies":{"@aireact/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.10","typescript":"^5.3.3","@types/react":"^18.2.45","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.18","@vitejs/plugin-react":"^4.2.1"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/360-spin_1.0.0_1765693732387_0.6746872138509523","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aireact/360-spin","version":"1.0.1","keywords":["react","360","spin","product","viewer"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aireact/360-spin@1.0.1","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"dist":{"shasum":"d8bf83d3cda535c9f1213b8485617a7b0f3ab267","tarball":"https://registry.npmjs.org/@aireact/360-spin/-/360-spin-1.0.1.tgz","fileCount":13,"integrity":"sha512-xtYyYvQKaOKAmmrtcg3CCVPwonbZpFVgtBXrCyOfgenqpvXTVPHvfHb8IghOsbke37oSAG1nGeJ98v1MpqQTpA==","signatures":[{"sig":"MEUCIQCfei3QEHigbGM0vtLyNb1F9nnonelVfofpRoqiGiu0OwIgEu9dXi235uJuBFlcT2Yo/7l39xrFPAzTrx+pLHq33+Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":163016},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./dist/360-spin.css":"./dist/360-spin.css"},"gitHead":"6857364eda430b8e9222514d3a5eeb6a5175c5b7","scripts":{"dev":"vite build --watch","build":"tsc && vite build"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"_npmVersion":"10.9.2","description":"Interactive 360° product viewer for React","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.14.0","dependencies":{"@aireact/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.10","typescript":"^5.3.3","@types/react":"^18.2.45","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.18","@vitejs/plugin-react":"^4.2.1"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/360-spin_1.0.1_1765695009949_0.0020635002134254954","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aireact/360-spin","version":"1.0.2","keywords":["react","360","spin","product","viewer"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aireact/360-spin@1.0.2","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"dist":{"shasum":"973fc46835f79773f079fccf9a8f29f91774982e","tarball":"https://registry.npmjs.org/@aireact/360-spin/-/360-spin-1.0.2.tgz","fileCount":13,"integrity":"sha512-RIz37hpUyzeABRl1PGCB8n/+1hlrrA4JZuqfT5e/sGJexsIB6WUMfbEdP0bFGiMw5zzs50SVJ7MDsJzkZUZwyg==","signatures":[{"sig":"MEUCIQDTON9f1ve1M/Qkm8JibeNNEwHVXM2hr9PFbPKJPCPthwIgCDlfhOClgfPdv9NFakgYV4gNDQ3xRB3axlGLb6HNKwI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":163016},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./dist/360-spin.css":"./dist/360-spin.css"},"gitHead":"6857364eda430b8e9222514d3a5eeb6a5175c5b7","scripts":{"dev":"vite build --watch","build":"tsc && vite build"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"_npmVersion":"10.9.2","description":"Interactive 360° product viewer for React","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.14.0","dependencies":{"@aireact/core":"*"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.10","typescript":"^5.3.3","@types/react":"^18.2.45","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.18","@vitejs/plugin-react":"^4.2.1"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/360-spin_1.0.2_1765696328454_0.9266337722015543","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aireact/360-spin","version":"1.0.3","description":"Interactive 360° product viewer for React","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./dist/360-spin.css":"./dist/360-spin.css"},"scripts":{"build":"tsc && vite build","dev":"vite build --watch"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"@aireact/core":"*"},"devDependencies":{"@types/react":"^18.2.45","@types/react-dom":"^18.2.18","@vitejs/plugin-react":"^4.2.1","typescript":"^5.3.3","vite":"^5.0.10","vite-plugin-dts":"^3.7.0"},"keywords":["react","360","spin","product","viewer"],"author":{"name":"reachbrt"},"license":"MIT","sideEffects":["*.css"],"_id":"@aireact/360-spin@1.0.3","gitHead":"eb0d57118209adc317afca9ec14db9074a14377b","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-foiY6cn1jQDPyI9sNp/jKpIcAcrbHhR6ljfvmuFdCHsZK6oDGz/veHET/trHtEWScymVj++EPWiqQ5ihHoXqZw==","shasum":"62b4c34a6b744462baa775c1ca752a79c124348f","tarball":"https://registry.npmjs.org/@aireact/360-spin/-/360-spin-1.0.3.tgz","fileCount":13,"unpackedSize":177784,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICk4vPOnAsKFy5FieqijWAV+I4VvCwKBOq6GTHzkIMBjAiEAtLEDneQdL+l4X9UsFsAJHvS5eE3w4O33rQst0r6BDjs="}]},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"directories":{},"maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/360-spin_1.0.3_1766466269372_0.33500637961591906"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-14T06:28:52.280Z","modified":"2025-12-23T05:04:29.723Z","1.0.0":"2025-12-14T06:28:52.534Z","1.0.1":"2025-12-14T06:50:10.085Z","1.0.2":"2025-12-14T07:12:08.610Z","1.0.3":"2025-12-23T05:04:29.514Z"},"author":{"name":"reachbrt"},"license":"MIT","keywords":["react","360","spin","product","viewer"],"description":"Interactive 360° product viewer for React","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"readme":"# @aireact/360-spin\n\n🚀 **AI-Powered 360° Product Viewer for React**\n\nGenerate and display 360° product views with AI image generation for e-commerce.\n\n

\n \"npm\n \"npm\n \"MIT\n \"GitHub\n

\n\n## ✨ Features\n\n- **🎨 AI Generation**: Generate 360° views from a single image\n- **🔄 Smooth Rotation**: Drag to rotate product smoothly\n- **📱 Touch Support**: Mobile-friendly swipe gestures\n- **🖼️ Premium Quality**: Professional e-commerce style\n- **⚡ Optimized**: Lazy loading and smooth animations\n- **🔧 TypeScript**: Full TypeScript support\n\n## 📦 Installation\n\n```bash\nnpm install @aireact/360-spin @aireact/core\n```\n\n## 🚀 Quick Start\n\n### SpinViewer - Display 360° Images\n\n```tsx\nimport { SpinViewer } from '@aireact/360-spin';\nimport '@aireact/360-spin/style.css';\n\nfunction App() {\n const frames = [\n '/product/frame-0.jpg',\n '/product/frame-1.jpg',\n '/product/frame-2.jpg',\n // ... up to 8-36 frames\n ];\n\n return (\n \n );\n}\n```\n\n### SpinGenerator - AI-Generate 360° Views\n\n```tsx\nimport { SpinGenerator, useSpinGenerator } from '@aireact/360-spin';\n\nfunction App() {\n return (\n console.log('Generated:', frames)}\n />\n );\n}\n```\n\n### Using the Hook\n\n```tsx\nimport { useSpinGenerator, use360Spin } from '@aireact/360-spin';\n\nfunction Custom360() {\n const {\n frames,\n isGenerating,\n progress,\n generateFrames\n } = useSpinGenerator({\n provider: 'openai',\n apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n frameCount: 8\n });\n\n const {\n currentFrame,\n isDragging,\n handlers\n } = use360Spin({\n frames,\n sensitivity: 8\n });\n\n return (\n
\n generateFrames(e.target.files[0])}\n />\n {isGenerating && }\n {frames.length > 0 && (\n
\n \"360\n
\n )}\n
\n );\n}\n```\n\n## 🎯 Interaction\n\n| Action | Result |\n|--------|--------|\n| Drag left/right | Rotate product |\n| Swipe (mobile) | Rotate product |\n| Mouse wheel | Zoom (if enabled) |\n\n## 📖 SpinViewer Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `frames` | string[] | - | Array of frame URLs |\n| `width` | number | 500 | Viewer width |\n| `height` | number | 500 | Viewer height |\n| `sensitivity` | number | 8 | Drag sensitivity |\n| `reverse` | boolean | false | Reverse direction |\n| `autoPlay` | boolean | false | Auto-rotate |\n| `autoPlaySpeed` | number | 100 | Auto-play speed (ms) |\n\n## 📖 SpinGenerator Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `provider` | string | - | AI provider |\n| `apiKey` | string | - | API key |\n| `frameCount` | number | 8 | Number of frames |\n| `onGenerate` | function | - | Generation callback |\n| `quality` | string | 'high' | Image quality |\n\n## 🎨 Customization\n\n```css\n:root {\n --aireact-spin-bg: #ffffff;\n --aireact-spin-border: #e0e0e0;\n --aireact-spin-loader: #2196f3;\n}\n```\n\n## 📦 Related Packages\n\n### React (@aireact)\n- [@aireact/core](https://www.npmjs.com/package/@aireact/core) - Core AI Client\n- [@aireact/image-caption](https://www.npmjs.com/package/@aireact/image-caption) - Image Captioning\n- [@aireact/chatbot](https://www.npmjs.com/package/@aireact/chatbot) - AI Chat\n\n### Vue.js (@aivue)\n- [@aivue/360-spin](https://www.npmjs.com/package/@aivue/360-spin) - Vue 360° Viewer\n- [@aivue/core](https://www.npmjs.com/package/@aivue/core) - Vue Core AI Client\n\n### Angular (@aiangular) - Coming Soon\n- @aiangular/360-spin - Angular 360° Viewer\n\n## 🔗 More Information\n\n- [GitHub Repository](https://github.com/reachbrt/AIReact)\n- [Full Documentation](https://github.com/reachbrt/AIReact/wiki)\n- [Report Issues](https://github.com/reachbrt/AIReact/issues)\n\n## 📄 License\n\nMIT © [Bharatkumar Subramanian](https://github.com/reachbrt)\n\n","readmeFilename":"README.md"}