{"_id":"@advpanda/gsap-orbit-carousel","_rev":"8-9a6f6314b1f7a8b3d2a06ccb9215a882","name":"@advpanda/gsap-orbit-carousel","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.0":{"name":"@advpanda/gsap-orbit-carousel","version":"1.0.0","keywords":["gsap","carousel","orbit","motion-path","react","slideshow","product-showcase"],"author":"","license":"MIT","_id":"@advpanda/gsap-orbit-carousel@1.0.0","maintainers":[{"name":"advpanda","email":"advaitsawant2003@gmail.com"}],"dist":{"shasum":"7dc1c3b9c945a19779e66734507812eee703e2e9","tarball":"https://registry.npmjs.org/@advpanda/gsap-orbit-carousel/-/gsap-orbit-carousel-1.0.0.tgz","fileCount":7,"integrity":"sha512-fImNPtFyuMG9LoucQ9UCjFHvFcP+WMxLLxu/wx521bNFtURbDgexTQML2mVtaNzagk+uqumivCHcNJrfGz8dbw==","signatures":[{"sig":"MEQCIFGPp3bd8wuzBmdUY7Hrl4MdVR9NVt4R8uJ3IV3c4hwjAiA9bEp0tVp3V2qa5+cr9v5v/TZ7A4KQgbQUpHYumvjbCQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":137528},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","type-check":"tsc --noEmit"},"_npmUser":{"name":"advpanda","email":"advaitsawant2003@gmail.com"},"_npmVersion":"10.9.0","description":"A GSAP-powered orbit carousel with curved motion paths for React — product showcase with animated side orbits","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^3.0.0","typescript":"^5.0.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","rollup-plugin-dts":"^5.0.0","@rollup/plugin-commonjs":"^29.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"gsap":">=3.11.0","react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-orbit-carousel_1.0.0_1771954434169_0.12348926607425015","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@advpanda/gsap-orbit-carousel","version":"1.0.1","keywords":["gsap","carousel","orbit","motion-path","react","slideshow","product-showcase"],"author":"","license":"MIT","_id":"@advpanda/gsap-orbit-carousel@1.0.1","maintainers":[{"name":"advpanda","email":"advaitsawant2003@gmail.com"}],"dist":{"shasum":"fbe0aacff965dfa780cb32c6ccccd19551c6e9e0","tarball":"https://registry.npmjs.org/@advpanda/gsap-orbit-carousel/-/gsap-orbit-carousel-1.0.1.tgz","fileCount":7,"integrity":"sha512-JwC6hXd3oVQAfA+7TBGp454ZBcTLUY29MN7wSUjBZ6SHWkbt4mQSpZt4V88SDcA6fmymhJfgTj+oKKelFR1lKA==","signatures":[{"sig":"MEQCIEFb6XB17fu+A61bvRBFE0gYG2/5aIqp/IKlN6FKv91ZAiADG4UVPLkvss8Ffh/N1ZaxH9/1owqZtMY8daSr1aLdIg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":140688},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","type-check":"tsc --noEmit"},"_npmUser":{"name":"advpanda","email":"advaitsawant2003@gmail.com"},"_npmVersion":"10.9.0","description":"A GSAP-powered orbit carousel with curved motion paths for React — product showcase with animated side orbits","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^3.0.0","typescript":"^5.0.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","rollup-plugin-dts":"^5.0.0","@rollup/plugin-commonjs":"^29.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"gsap":">=3.11.0","react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-orbit-carousel_1.0.1_1771957389129_0.9227704377083641","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@advpanda/gsap-orbit-carousel","version":"1.0.2","keywords":["gsap","carousel","orbit","motion-path","react","slideshow","product-showcase"],"author":"","license":"MIT","_id":"@advpanda/gsap-orbit-carousel@1.0.2","maintainers":[{"name":"advpanda","email":"advaitsawant2003@gmail.com"}],"dist":{"shasum":"b2447faee39e67b4769a4fe1c8cb525f3d8102d5","tarball":"https://registry.npmjs.org/@advpanda/gsap-orbit-carousel/-/gsap-orbit-carousel-1.0.2.tgz","fileCount":7,"integrity":"sha512-gn//HXphdahN4zoqXDr26MQi9SBEWvJzs3mWMFGNusexw189uLaeziz4Z20Z7C79mBHTg4eqQuxgLDt5FHp78A==","signatures":[{"sig":"MEUCIQDAwnrOU1wCaiaVC/7YMIT/XIk7zCh9ZqTJ6MnXkKe3UQIgVwVGz8/MfHewJblJscDeS4a1VqhVOGFOPXfs8m+HN8o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":140688},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","type-check":"tsc --noEmit"},"_npmUser":{"name":"advpanda","email":"advaitsawant2003@gmail.com"},"_npmVersion":"10.9.0","description":"A GSAP-powered orbit carousel with curved motion paths for React — product showcase with animated side orbits","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^3.0.0","typescript":"^5.0.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","rollup-plugin-dts":"^5.0.0","@rollup/plugin-commonjs":"^29.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"gsap":">=3.11.0","react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-orbit-carousel_1.0.2_1772024200754_0.41315861531706766","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@advpanda/gsap-orbit-carousel","version":"1.0.3","keywords":["gsap","carousel","orbit","motion-path","react","slideshow","product-showcase"],"author":"","license":"MIT","_id":"@advpanda/gsap-orbit-carousel@1.0.3","maintainers":[{"name":"advpanda","email":"advaitsawant2003@gmail.com"}],"dist":{"shasum":"98a74eb6d955524f9d653896f756e9eae4100b75","tarball":"https://registry.npmjs.org/@advpanda/gsap-orbit-carousel/-/gsap-orbit-carousel-1.0.3.tgz","fileCount":7,"integrity":"sha512-eGBkjCF8ncfzvmp9nNrLpfGirPerV6FvrW5Ge7GifR/KolzztPCWOPKSGbXqjE60zP1eVXA6M7W1dxJybyC/xg==","signatures":[{"sig":"MEUCICVn7yoUJTEFw22nvnz//KcbDQmhvvXn+cXNOrdL53V5AiEAhbj69MwaT7fEXfDxM9ejY1DL14AK4NdZlGYSv6xPCgc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":140726},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","type-check":"tsc --noEmit"},"_npmUser":{"name":"advpanda","email":"advaitsawant2003@gmail.com"},"_npmVersion":"10.9.0","description":"A GSAP-powered orbit carousel with curved motion paths for React — product showcase with animated side orbits","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^3.0.0","typescript":"^5.0.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","rollup-plugin-dts":"^5.0.0","@rollup/plugin-commonjs":"^29.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"gsap":">=3.11.0","react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-orbit-carousel_1.0.3_1772040325456_0.10991776824486266","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@advpanda/gsap-orbit-carousel","version":"1.0.4","keywords":["gsap","carousel","orbit","motion-path","react","slideshow","product-showcase"],"author":"","license":"MIT","_id":"@advpanda/gsap-orbit-carousel@1.0.4","maintainers":[{"name":"advpanda","email":"advaitsawant2003@gmail.com"}],"dist":{"shasum":"c24d66362a7cb50f3e8c72b4b501bf35af760da5","tarball":"https://registry.npmjs.org/@advpanda/gsap-orbit-carousel/-/gsap-orbit-carousel-1.0.4.tgz","fileCount":7,"integrity":"sha512-EJvMRdo0EaIk91O4aqGn0WHvyWNkRghiZYMdllbfxRzFgOQboX3yfM9+Rzy3MvfpZ6tziWLyqhWbSrLY7AUJAA==","signatures":[{"sig":"MEUCIQDekFZYQWPYEgZUTj+HcR/hPMO5IlNTxqehmxSs8EhC+QIgc6XvwPslReFqfjn9FBesYcWA+FBTBS2LI2buczdVAzU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":139927},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","type-check":"tsc --noEmit"},"_npmUser":{"name":"advpanda","email":"advaitsawant2003@gmail.com"},"_npmVersion":"10.9.0","description":"A GSAP-powered orbit carousel with curved motion paths for React — product showcase with animated side orbits","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^3.0.0","typescript":"^5.0.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","rollup-plugin-dts":"^5.0.0","@rollup/plugin-commonjs":"^29.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"gsap":">=3.11.0","react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-orbit-carousel_1.0.4_1772044239188_0.9125961143252643","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@advpanda/gsap-orbit-carousel","version":"1.0.5","keywords":["gsap","carousel","orbit","motion-path","react","slideshow","product-showcase"],"author":"","license":"MIT","_id":"@advpanda/gsap-orbit-carousel@1.0.5","maintainers":[{"name":"advpanda","email":"advaitsawant2003@gmail.com"}],"dist":{"shasum":"2a713f7b32eebf822702dbb3fb941f609d42fcd2","tarball":"https://registry.npmjs.org/@advpanda/gsap-orbit-carousel/-/gsap-orbit-carousel-1.0.5.tgz","fileCount":7,"integrity":"sha512-FO5A/5Fh/6+kjg63wgaZ5/2qPxSHL6v+swt40WALCtc7D/G11KUKl6R4CR3PjgQklb+dxkW8H24s4NuZh3EFRQ==","signatures":[{"sig":"MEQCIBQJVE7d0fqL1Ceae8AS++A97hz0Z8QPKmff8O/nHT3xAiALjcY7cBEJ1jVMXZZf6s1c57Hqrfl4AjbDfzdXrB4NIw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":139878},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","type-check":"tsc --noEmit"},"_npmUser":{"name":"advpanda","email":"advaitsawant2003@gmail.com"},"_npmVersion":"10.9.0","description":"A GSAP-powered orbit carousel with curved motion paths for React — product showcase with animated side orbits","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^3.0.0","typescript":"^5.0.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","rollup-plugin-dts":"^5.0.0","@rollup/plugin-commonjs":"^29.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"gsap":">=3.11.0","react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-orbit-carousel_1.0.5_1772044802449_0.1419892997828216","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@advpanda/gsap-orbit-carousel","version":"1.0.6","keywords":["gsap","carousel","orbit","motion-path","react","slideshow","product-showcase"],"author":"","license":"MIT","_id":"@advpanda/gsap-orbit-carousel@1.0.6","maintainers":[{"name":"advpanda","email":"advaitsawant2003@gmail.com"}],"dist":{"shasum":"d222e03e1f200381e09d01873819219265c735ed","tarball":"https://registry.npmjs.org/@advpanda/gsap-orbit-carousel/-/gsap-orbit-carousel-1.0.6.tgz","fileCount":7,"integrity":"sha512-iHmVKEyeGojgrPRP0G3hovJ/400PKe+cJwWMlTzUHjHZ0v5deqkcuKYbfAP5EqDNOrLo5+KZClZz+9dPQ3iTZw==","signatures":[{"sig":"MEQCIFE6TfRp8MOAR1RHXtQFNXzsiZdsbMPG4uZp62pHYDO4AiBkdGR++JfGU/g3ajOYhDSdYEA50KEV0VUNDkIAIQRaFA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":139878},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","type-check":"tsc --noEmit"},"_npmUser":{"name":"advpanda","email":"advaitsawant2003@gmail.com"},"_npmVersion":"10.9.0","description":"A GSAP-powered orbit carousel with curved motion paths for React — product showcase with animated side orbits","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^3.0.0","typescript":"^5.0.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","rollup-plugin-dts":"^5.0.0","@rollup/plugin-commonjs":"^29.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"gsap":">=3.11.0","react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-orbit-carousel_1.0.6_1772114470415_0.1573308346056761","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"@advpanda/gsap-orbit-carousel","version":"1.0.7","description":"A GSAP-powered orbit carousel with curved motion paths for React — product showcase with animated side orbits","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","type-check":"tsc --noEmit"},"peerDependencies":{"gsap":">=3.11.0","react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^29.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-typescript":"^11.0.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","rollup":"^3.0.0","rollup-plugin-dts":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","tslib":"^2.6.0","typescript":"^5.0.0"},"keywords":["gsap","carousel","orbit","motion-path","react","slideshow","product-showcase"],"author":"","license":"MIT","_id":"@advpanda/gsap-orbit-carousel@1.0.7","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-xS7/BA60fvvib2+CQoze/uGKaioE71thkJLZe/+gc05bGiHO3RgQ5Jhu9j1VG3Q26i14L0OjOThwL1HA5ne8jw==","shasum":"e5262f432ec2d0a979fc2d96082bf53552491bb0","tarball":"https://registry.npmjs.org/@advpanda/gsap-orbit-carousel/-/gsap-orbit-carousel-1.0.7.tgz","fileCount":7,"unpackedSize":106731,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD29vXf2PR++wpSPb1XFhzmKLmcaWXvPb/UOhp+c9liyQIgbHRfBpg9Z+WFkJ/nqNfPrIIQvL5/kz+/ctqRkeE3Lc4="}]},"_npmUser":{"name":"advpanda","email":"advaitsawant2003@gmail.com"},"directories":{},"maintainers":[{"name":"advpanda","email":"advaitsawant2003@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gsap-orbit-carousel_1.0.7_1772114983467_0.9235162023708046"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-24T17:33:54.055Z","modified":"2026-02-26T14:09:43.726Z","1.0.0":"2026-02-24T17:33:54.320Z","1.0.1":"2026-02-24T18:23:09.276Z","1.0.2":"2026-02-25T12:56:40.889Z","1.0.3":"2026-02-25T17:25:25.608Z","1.0.4":"2026-02-25T18:30:39.315Z","1.0.5":"2026-02-25T18:40:02.615Z","1.0.6":"2026-02-26T14:01:10.554Z","1.0.7":"2026-02-26T14:09:43.626Z"},"license":"MIT","keywords":["gsap","carousel","orbit","motion-path","react","slideshow","product-showcase"],"description":"A GSAP-powered orbit carousel with curved motion paths for React — product showcase with animated side orbits","maintainers":[{"name":"advpanda","email":"advaitsawant2003@gmail.com"}],"readme":"# @advpanda/gsap-orbit-carousel\n\nA GSAP-powered React carousel with animated curved orbit paths.\n\n**What the package does:** handles the animation only — the curved SVG paths, GSAP motion along them, crossfade between slides, orbit circle flow, and auto-play timer.\n\n**What the user provides:** everything visual — main product images, orbit circle images, orbit labels, title text, background colors, and where to place the component.\n\n---\n\n## Installation\n\n```bash\nnpm install @advpanda/gsap-orbit-carousel gsap\n```\n\n> Peer dependencies: `react >=17`, `react-dom >=17`, `gsap >=3.11`\n\n---\n\nImportant Note : Only for 5 slides.\n\n## User Side Setup\n\n### 1. Define your slides\n\nEvery piece of content comes from you — images, labels, titles, colors.\n\n```tsx\nimport type { CarouselSlide } from \"@advpanda/gsap-orbit-carousel\";\n\nconst slides: CarouselSlide[] = [\n {\n id: \"product-1\",\n\n // Main big image shown in the centre\n image: \"/your-images/product-1.webp\",\n\n // Title shown in the bottom bar\n title: \"Your Product Name\",\n\n // Small circular image + label on the LEFT orbit curve\n leftOrbitItems: [\n {\n image: \"/your-images/ingredient-1.webp\",\n label: \"Ingredient One\",\n },\n ],\n\n // Small circular image + label on the RIGHT orbit curve\n rightOrbitItems: [\n {\n image: \"/your-images/ingredient-2.webp\",\n label: \"Ingredient Two\",\n },\n ],\n },\n\n {\n id: \"product-2\",\n image: \"/your-images/product-2.webp\",\n title: \"Second Product Name\",\n leftOrbitItems: [{ image: \"/your-images/ing-3.webp\", label: \"Ingredient Three\" }],\n rightOrbitItems: [{ image: \"/your-images/ing-4.webp\", label: \"Ingredient Four\" }],\n },\n\n {\n id: \"product-3\",\n image: \"/your-images/product-3.webp\",\n title: \"Third Product Name\",\n leftOrbitItems: [{ image: \"/your-images/ing-5.webp\", label: \"Ingredient Five\" }],\n rightOrbitItems: [{ image: \"/your-images/ing-6.webp\", label: \"Ingredient Six\" }],\n },\n];\n```\n\n### 2. Drop it anywhere in your layout\n\n```tsx\nimport { OrbitCarousel } from \"@advpanda/gsap-orbit-carousel\";\n\nexport default function YourSection() {\n return (\n \n );\n}\n```\n\nThat's it. The carousel renders full-screen (`100vh`) by default. Place it inside any section or page.\n\n---\n\n## All Props\n\n| Prop | Type | Required | Description |\n|---|---|---|---|\n| `slides` | `CarouselSlide[]` | ✅ | Your slide data — all images, labels, titles |\n| `autoPlayInterval` | `number` | ✅ | Auto-advance ms. `0` to disable |\n| `showTitle` | `boolean` | — | Show/hide the top-left title. Default `true` |\n| `showOrbits` | `boolean` | — | Show/hide the side orbit paths. Default `true` |\n| `showDots` | `boolean` | — | Show/hide dot indicators. Default `true` |\n| `showArrows` | `boolean` | — | Show/hide prev/next arrows. Default `true` |\n| `renderImage` | `(slide, index) => ReactNode` | — | Custom image renderer |\n| `renderTitle` | `(slide) => ReactNode` | — | Custom bottom bar content |\n| `onSlideChange` | `(index, slide) => void` | — | Fires on every slide change |\n| `className` | `string` | — | Extra class on the root element |\n| `style` | `CSSProperties` | — | Inline styles on the root element |\n\n---\n\n## CarouselSlide Type\n\n```ts\ninterface CarouselSlide {\n id: string; // unique key for each slide\n image: string; // your main product image URL\n title: string; // your product title\n leftOrbitItems: OrbitItem[]; // your left orbit circle\n rightOrbitItems: OrbitItem[]; // your right orbit circle\n}\n\ninterface OrbitItem {\n image: string; // your small circular thumbnail URL\n label: string; // your label text beside the circle\n}\n```\n\n---\n\n## Advanced Usage\n\n### Using Next.js ``\n\nIf you're on Next.js use `renderImage` to swap in the `` component:\n\n```tsx\nimport Image from \"next/image\";\nimport { OrbitCarousel } from \"@advpanda/gsap-orbit-carousel\";\n\nexport default function YourSection() {\n return (\n (\n \n )}\n />\n );\n}\n```\n\n### Custom bottom bar\n\nUse `renderTitle` to replace the default title pill with anything you want:\n\n```tsx\n (\n
\n {slide.title}\n Shop Now →\n
\n )}\n/>\n```\n\n### Listening to slide changes\n\n```tsx\n {\n console.log(\"Active:\", index, slide.title);\n }}\n/>\n```\n\n### Disable auto-play\n\n```tsx\n\n```\n\n### Hide parts of the UI\n\n```tsx\n\n```\n\n---\n\n## What the Package Does vs What You Provide\n\n| | Package | You |\n|---|---|---|\n| Curved SVG orbit paths | ✅ | |\n| GSAP motion animation | ✅ | |\n| Crossfade between slides | ✅ | |\n| Orbit circle flow effect | ✅ | |\n| Teleport trick (no jump glitch) | ✅ | |\n| Auto-play timer | ✅ | |\n| Main product images | | ✅ |\n| Orbit circle images | | ✅ |\n| Orbit labels / text | | ✅ |\n| Product titles | | ✅ |\n| Background colors | | ✅ |\n| Where to place it | | ✅ |\n\n---\n\n## Notes\n\n- No CSS file or Tailwind required — fully inline styles.\n- Works with Next.js App Router, Vite, CRA, or any React setup.\n- GSAP `MotionPathPlugin` is registered automatically — you don't need to do anything.\n- Add only 5 slides.","readmeFilename":"README.md"}