{"_id":"@aivue/360-spin","_rev":"5-6d47415f14cc9461eaf792b23a56f50c","name":"@aivue/360-spin","dist-tags":{"latest":"2.0.1"},"versions":{"1.0.1":{"name":"@aivue/360-spin","version":"1.0.1","keywords":["vue","360","spin","product","image","rotation","3d","viewer","ecommerce","product-view","interactive","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/360-spin@1.0.1","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"21d45cc3c201507bf537483bd1e85a91de00ccf6","tarball":"https://registry.npmjs.org/@aivue/360-spin/-/360-spin-1.0.1.tgz","fileCount":13,"integrity":"sha512-St88AqWVZW9t91N2Mm0sLAyRAo+mqObkAQpkYOKoVkpdwmZrJc/+GNmwK8B9APZ5djHuSpHSMRMpEOifJA4tXw==","signatures":[{"sig":"MEQCIGi/R7ag2NC3ncmqi1swAu418TsgtEFOaDNBzjdt6VN2AiADEMRovbsybhE2pVDZGGUM3w+LxIUcRb1qOcJVgF4ToA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":79758},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./360-spin.css":"./dist/360-spin.css","./dist/360-spin.css":"./dist/360-spin.css"},"gitHead":"2c1375e259fc33f94a09503be06d9c1b0d3106a7","scripts":{"dev":"vite build --watch","build":"npm run clean && vite build","clean":"rm -rf dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/360-spin"},"_npmVersion":"10.9.2","description":"Interactive 360-degree product image spin component for Vue.js","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","vite":"^6.3.5","vue-tsc":"^2.2.10","typescript":"^5.3.0","@types/node":"^20.16.0","vite-plugin-dts":"^4.5.3","@vue/compiler-sfc":"^3.5.13","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/360-spin_1.0.1_1765053743877_0.5951699759862923","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aivue/360-spin","version":"1.0.2","keywords":["vue","360","spin","product","image","rotation","3d","viewer","ecommerce","product-view","interactive","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/360-spin@1.0.2","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"bbae4da88ef25d402d5389ffe2072ae1c539fbcc","tarball":"https://registry.npmjs.org/@aivue/360-spin/-/360-spin-1.0.2.tgz","fileCount":13,"integrity":"sha512-oooyCdP15ozxO1XCTNmVB5fJAdhX6cmEkAf2QIloqE3WM99BoUMuTwoiVWWljEtP8+zee/owNv9USkG3ghi5jg==","signatures":[{"sig":"MEQCIFpbAcTGpW4cMR/WwRyxQXj4GZHFesaLlNOE06kwFBGyAiAyVA6qzvTNIpQtcdYBj3TNBDYGmJrrmGNB7jKXQC/Z5g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":80054},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./360-spin.css":"./dist/360-spin.css","./dist/360-spin.css":"./dist/360-spin.css"},"gitHead":"2c1375e259fc33f94a09503be06d9c1b0d3106a7","scripts":{"dev":"vite build --watch","build":"npm run clean && vite build","clean":"rm -rf dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/360-spin"},"_npmVersion":"10.9.2","description":"Interactive 360-degree product image spin component for Vue.js","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","vite":"^6.3.5","vue-tsc":"^2.2.10","typescript":"^5.3.0","@types/node":"^20.16.0","vite-plugin-dts":"^4.5.3","@vue/compiler-sfc":"^3.5.13","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/360-spin_1.0.2_1765248661275_0.17871369798111703","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aivue/360-spin","version":"1.0.3","keywords":["vue","360","spin","product","image","rotation","3d","viewer","ecommerce","product-view","interactive","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/360-spin@1.0.3","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"4d55e88426455e36cb05ad28b4e499a5c4493987","tarball":"https://registry.npmjs.org/@aivue/360-spin/-/360-spin-1.0.3.tgz","fileCount":13,"integrity":"sha512-efs8/3FqrKRjcdr4ZTSToDVm3sVH+CsDsBl0jQy3zJUin6DzyLe3DyewNGj0varCqTbeLL4LsDHeVpnPwhhRww==","signatures":[{"sig":"MEYCIQC0qtNQeQQEcr+ts90dwiDUFwqFW99WSNAYowclQNqa/AIhALtUeGx6vHA/mG+xzjLI4f750lYYF+LiVO2obu4vhCyl","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":80086},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./360-spin.css":"./dist/360-spin.css","./dist/360-spin.css":"./dist/360-spin.css"},"gitHead":"2567f0769c449fe4333ccc807a82444957dc0cd3","scripts":{"dev":"vite build --watch","build":"npm run clean && vite build","clean":"rm -rf dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/360-spin"},"_npmVersion":"10.9.2","description":"Interactive 360-degree product image spin component for Vue.js","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","vite":"^6.3.5","vue-tsc":"^2.2.10","typescript":"^5.3.0","@types/node":"^20.16.0","vite-plugin-dts":"^4.5.3","@vue/compiler-sfc":"^3.5.13","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/360-spin_1.0.3_1765265284179_0.6819875502100992","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@aivue/360-spin","version":"2.0.0","keywords":["vue","360","spin","product","image","rotation","3d","viewer","ecommerce","product-view","interactive","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/360-spin@2.0.0","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"f010d58c679bf1e9e2d73786c46369916045cffe","tarball":"https://registry.npmjs.org/@aivue/360-spin/-/360-spin-2.0.0.tgz","fileCount":15,"integrity":"sha512-6RXO8C89tsniwLS7ijv7wWkqrdAk9KQccx/lZC8/8p5A0hFQyroh98ENMHcEUlGNqWBpw22xKYqfMBB2ZXeHYQ==","signatures":[{"sig":"MEUCIE7uGgfaedxJIDITTCIqFL04lPyey5hDgg2wgRENXLnwAiEAsrGhlLVnL/u27M+XATctQaNEAr7Qi74ht+DMB+jQTjA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":191785},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./360-spin.css":"./dist/360-spin.css","./dist/360-spin.css":"./dist/360-spin.css"},"scripts":{"dev":"vite build --watch","build":"npm run clean && vite build","clean":"rm -rf dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/360-spin"},"_npmVersion":"6.14.5","description":"Interactive 360-degree product image spin component for Vue.js with AI-powered generation","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","vite":"^6.3.5","vue-tsc":"^2.2.10","typescript":"^5.3.0","@types/node":"^20.16.0","vite-plugin-dts":"^4.5.3","@vue/compiler-sfc":"^3.5.13","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/360-spin_2.0.0_1765511594840_0.7330211430988887","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@aivue/360-spin","version":"2.0.1","description":"Interactive 360-degree product image spin component for Vue.js with AI-powered generation","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./360-spin.css":"./dist/360-spin.css","./dist/360-spin.css":"./dist/360-spin.css"},"scripts":{"build":"npm run clean && vite build","dev":"vite build --watch","clean":"rm -rf dist","prepublishOnly":"npm run build"},"keywords":["vue","360","spin","product","image","rotation","3d","viewer","ecommerce","product-view","interactive","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/360-spin"},"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"publishConfig":{"access":"public"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0"},"devDependencies":{"@types/node":"^20.16.0","@vitejs/plugin-vue":"^5.0.0","@vue/compiler-sfc":"^3.5.13","typescript":"^5.3.0","vite":"^6.3.5","vite-plugin-dts":"^4.5.3","vue":"^3.5.0","vue-tsc":"^2.2.10"},"_id":"@aivue/360-spin@2.0.1","gitHead":"c54d7def7f2bad63a3e63881dd7ac15ba3e957a4","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-10FPUpQiRhvcNKQQZH4KbbNDL96SXiqj/fjnx++VO/M85AbagdJ/JNv3XUSVn1UaEgtLKE8Dto5RdlezeCozyw==","shasum":"dafac34034857ebc8ba69c91a98620f58b13da8f","tarball":"https://registry.npmjs.org/@aivue/360-spin/-/360-spin-2.0.1.tgz","fileCount":15,"unpackedSize":191785,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD7XuiglsQPU3J0BcgKXdWnOpD9e0GcRJEyuLB6XdrjDAIgX91mXpvLe2MqlO3SzDjk+R5dl5gEVPq6QEgeOhjF9+g="}]},"_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_2.0.1_1768404863893_0.45868697913539025"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-06T20:42:23.807Z","modified":"2026-01-14T15:34:24.175Z","1.0.1":"2025-12-06T20:42:24.025Z","1.0.2":"2025-12-09T02:51:01.425Z","1.0.3":"2025-12-09T07:28:04.336Z","2.0.0":"2025-12-12T03:53:15.054Z","2.0.1":"2026-01-14T15:34:24.045Z"},"bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"author":{"name":"reachbrt"},"license":"MIT","homepage":"https://github.com/reachbrt/vueai#readme","keywords":["vue","360","spin","product","image","rotation","3d","viewer","ecommerce","product-view","interactive","ui","components"],"repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/360-spin"},"description":"Interactive 360-degree product image spin component for Vue.js with AI-powered generation","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"readme":"# @aivue/360-spin\n\n> Interactive 360-degree product image spin component for Vue.js with AI-powered generation\n\n[](https://www.npmjs.com/package/@aivue/360-spin)\n[](https://www.npmjs.com/package/@aivue/360-spin)\n[](https://opensource.org/licenses/MIT)\n\n## ✨ Features\n\n### 360° Viewer\n- 🖼️ **Static to Animated**: Show static product image by default, animate on hover/tap\n- 🎬 **Multiple Modes**: Support for GIF animations or frame sequences\n- 📱 **Mobile Optimized**: Touch and drag to spin on mobile devices\n- 🎯 **Flexible Triggers**: Hover, click, or auto-play animations\n- 🛍️ **E-commerce Ready**: Perfect for product cards, carousels, and search results\n- ⚡ **Performance**: Preloading and optimized frame rendering\n- 🎨 **Customizable**: Full control over styling and behavior\n- ♿ **Accessible**: Keyboard navigation and screen reader support\n\n### 🤖 AI 360° Generator (NEW!)\n- 📤 **Upload & Generate**: Upload a single product image and AI generates 360° views\n- 🎨 **OpenAI DALL-E 3**: High-quality AI-generated frames at different angles\n- 🔄 **Stability AI Support**: Alternative AI provider for generation\n- 🎯 **Customizable**: Choose frame count (12/24/36/72), background color, quality\n- 📊 **Real-time Progress**: Track generation progress with live updates\n- 💾 **Download Frames**: Export all generated frames for use elsewhere\n- 🔍 **Vision Analysis**: GPT-4 Vision analyzes your product for better results\n\n## 📦 Installation\n\n```bash\nnpm install @aivue/360-spin\n```\n\n## 🚀 Quick Start\n\n### Basic Usage (GIF Mode)\n\n```vue\n\n \n\n\n\n```\n\n### Frame Sequence Mode\n\n```vue\n\n \n\n\n\n```\n\n### Product Card Integration\n\n```vue\n\n
\n \n
{{ product.name }}
\n
{{ product.price }}
\n
\n\n```\n\n### 🤖 AI 360° Generator\n\nGenerate 360-degree product views from a single image using AI:\n\n```vue\n\n \n\n\n\n```\n\n### Programmatic AI Generation\n\nUse the AI generator utility directly:\n\n```typescript\nimport { AI360Generator } from '@aivue/360-spin';\n\nconst generator = new AI360Generator(\n {\n provider: 'openai',\n apiKey: 'your-api-key',\n frameCount: 36,\n backgroundColor: 'white',\n quality: 80,\n useVisionAnalysis: true\n },\n (progress) => {\n console.log(`Progress: ${progress.percentage}%`);\n console.log(`Status: ${progress.status}`);\n console.log(`Frame ${progress.currentFrame}/${progress.totalFrames}`);\n }\n);\n\n// Generate from File\nconst file = document.querySelector('input[type=\"file\"]').files[0];\nconst result = await generator.generate(file);\nconsole.log('Generated frames:', result.frames);\nconsole.log('Product description:', result.productDescription);\n\n// Or generate from base64 image\nconst base64Image = 'data:image/jpeg;base64,...';\nconst result = await generator.generate(base64Image);\n```\n\n## 📖 API Reference\n\n### Ai360Spin Component\n\n#### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `staticImage` | `string` | **required** | URL of the static product image |\n| `animatedImage` | `string \\| string[]` | **required** | GIF URL or array of frame URLs |\n| `mode` | `'gif' \\| 'frames' \\| 'auto'` | `'auto'` | Animation mode |\n| `trigger` | `'hover' \\| 'click' \\| 'auto'` | `'hover'` | How to start animation |\n| `width` | `string \\| number` | `'100%'` | Container width |\n| `height` | `string \\| number` | `'auto'` | Container height |\n| `alt` | `string` | `'Product 360 view'` | Alt text for images |\n| `frameRate` | `number` | `30` | FPS for frame sequence |\n| `loop` | `boolean` | `true` | Whether to loop animation |\n| `direction` | `'clockwise' \\| 'counterclockwise'` | `'clockwise'` | Spin direction |\n| `preload` | `boolean` | `true` | Preload images on mount |\n| `showLoading` | `boolean` | `true` | Show loading indicator |\n| `loadingText` | `string` | `'Loading...'` | Loading text |\n| `enableDragSpin` | `boolean` | `true` | Enable drag to spin on mobile |\n| `dragSensitivity` | `number` | `10` | Pixels per frame for drag |\n| `containerClass` | `string` | `''` | CSS class for container |\n| `imageClass` | `string` | `''` | CSS class for images |\n\n#### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `animation-start` | `void` | Fired when animation starts |\n| `animation-end` | `void` | Fired when animation ends |\n| `loaded` | `void` | Fired when images are loaded |\n| `error` | `Error` | Fired on loading error |\n| `frame-change` | `number` | Fired when frame changes (frames mode) |\n\n### Ai360Generator Component\n\n#### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `provider` | `'openai' \\| 'stability'` | `'openai'` | AI provider for generation |\n| `apiKey` | `string` | `''` | API key (can be saved in localStorage) |\n| `autoSaveApiKey` | `boolean` | `true` | Auto-save API key to localStorage |\n| `showFramePreview` | `boolean` | `true` | Show preview grid of generated frames |\n\n#### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `frames-generated` | `string[]` | Emitted when user clicks \"Use These Frames\" |\n| `generation-start` | `void` | Emitted when generation starts |\n| `generation-complete` | `string[]` | Emitted when generation completes |\n| `generation-error` | `Error` | Emitted on generation error |\n\n### AI360Generator Class\n\n#### Constructor Options\n\n```typescript\ninterface AI360GeneratorConfig {\n provider?: 'openai' | 'stability';\n apiKey: string;\n frameCount?: number; // Default: 36\n backgroundColor?: 'white' | 'transparent' | 'black' | 'custom';\n customBackgroundColor?: string;\n quality?: number; // 0-100, Default: 80\n imageSize?: '1024x1024' | '1024x1792' | '1792x1024';\n model?: string; // Default: 'dall-e-3' for OpenAI\n useVisionAnalysis?: boolean; // Default: true\n promptTemplate?: string; // Custom prompt template\n}\n```\n\n#### Methods\n\n- `generate(imageFile: File | string): Promise`\n - Generates 360° frames from a single image\n - Returns frames, product description, and metadata\n\n## 🎨 Styling\n\nThe component comes with default styles, but you can customize them:\n\n```css\n/* Custom container styles */\n.ai-360-spin {\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n/* Custom loading spinner */\n.ai-360-spin__spinner {\n border-top-color: #your-brand-color;\n}\n\n/* Custom hint badge */\n.ai-360-spin__hint {\n background: rgba(your-color, 0.9);\n}\n```\n\n### Pre-built Classes\n\n- `.ai-360-spin--card` - Optimized for product cards (1:1 aspect ratio)\n- `.ai-360-spin--grid` - Optimized for grid layouts (4:3 aspect ratio)\n- `.ai-360-spin--carousel` - Optimized for carousels (full width/height)\n\n## 💡 Use Cases\n\n### E-commerce Product Listings\n\n```vue\n