{"_id":"@adviklabs/react-cinematic-effects","_rev":"6-3b4ae25b3c732f2ef3d5697e667e5fa1","name":"@adviklabs/react-cinematic-effects","dist-tags":{"latest":"1.4.0"},"versions":{"1.0.0":{"name":"@adviklabs/react-cinematic-effects","version":"1.0.0","keywords":["react","animation","accordion","slider","image-trail","cursor","hover","cinematic","effects","components","ui","adviklabs"],"author":{"url":"https://github.com/1983shiv","name":"Shiv Srivastava","email":"[EMAIL_ADDRESS]"},"license":"MIT","_id":"@adviklabs/react-cinematic-effects@1.0.0","maintainers":[{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"}],"homepage":"https://github.com/1983shiv/adviklabs-react-cinematic-effects#readme","bugs":{"url":"https://github.com/1983shiv/adviklabs-react-cinematic-effects/issues"},"dist":{"shasum":"889dcca176d236d69bc690bff80ad63d2b027063","tarball":"https://registry.npmjs.org/@adviklabs/react-cinematic-effects/-/react-cinematic-effects-1.0.0.tgz","fileCount":63,"integrity":"sha512-m3FN6r8mUO4L4pKEj70MDZxEv3CtPd0I/kRjGQ8ErIxwUliV8l/TDn9P3wWFeMK7ccSCV9Fp9qeuMwFCruP/rQ==","signatures":[{"sig":"MEYCIQDBMTFA8DvZG2EmZppJr66BcVUs0DI1dRKjStzqsVo2OwIhALP/AAX494HYflLchdgEXOf6L32wzZZdVE+N/6W3D4Ng","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":230610},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/index.css","./effects/image-trail":{"import":{"types":"./dist/effects/image-trail.d.ts","default":"./dist/effects/image-trail.js"},"require":{"types":"./dist/effects/image-trail.d.cts","default":"./dist/effects/image-trail.cjs"}},"./effects/sticky-stack":{"import":{"types":"./dist/effects/sticky-stack.d.ts","default":"./dist/effects/sticky-stack.js"},"require":{"types":"./dist/effects/sticky-stack.d.cts","default":"./dist/effects/sticky-stack.cjs"}},"./effects/accordion-slider":{"import":{"types":"./dist/effects/accordion-slider.d.ts","default":"./dist/effects/accordion-slider.js"},"require":{"types":"./dist/effects/accordion-slider.d.cts","default":"./dist/effects/accordion-slider.cjs"}}},"gitHead":"23472a09879b0b1b2fe9a716dc3d0d6888adc204","scripts":{"dev":"tsup --watch","build":"tsup","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"},"repository":{"url":"git+https://github.com/1983shiv/adviklabs-react-cinematic-effects.git","type":"git"},"_npmVersion":"10.9.4","description":"Drop-in, extensible cinematic UI effect components for React — accordion sliders, image trails, and more.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.21.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","vitest":"^4.1.5","react-dom":"^18.3.0","storybook":"^10.3.5","playwright":"^1.59.1","typescript":"^5.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitest/coverage-v8":"^4.1.5","@storybook/addon-a11y":"^10.3.5","@storybook/addon-docs":"^10.3.5","@storybook/react-vite":"^10.3.5","@storybook/addon-vitest":"^10.3.5","@chromatic-com/storybook":"^5.1.2","@vitest/browser-playwright":"^4.1.5","@storybook/addon-onboarding":"^10.3.5"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-cinematic-effects_1.0.0_1776999687788_0.49519337158226295","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@adviklabs/react-cinematic-effects","version":"1.0.1","keywords":["react","animation","accordion","slider","image-trail","cursor","hover","cinematic","effects","components","ui","adviklabs"],"author":{"url":"https://github.com/1983shiv","name":"Shiv Srivastava","email":"[EMAIL_ADDRESS]"},"license":"MIT","_id":"@adviklabs/react-cinematic-effects@1.0.1","maintainers":[{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"}],"homepage":"https://github.com/1983shiv/adviklabs-react-cinematic-effects#readme","bugs":{"url":"https://github.com/1983shiv/adviklabs-react-cinematic-effects/issues"},"dist":{"shasum":"a9af9e3e91910c7e079bf05a5135caf21184415a","tarball":"https://registry.npmjs.org/@adviklabs/react-cinematic-effects/-/react-cinematic-effects-1.0.1.tgz","fileCount":63,"integrity":"sha512-Fbz7jAh5bqnEpGHv9c2JWyAnfik62nlQ5O860RmrKsikqrv+lHu4U70QIiqv4FHn4oUAenpRvA0WkPb/utv2zw==","signatures":[{"sig":"MEUCIC2qwPX7i+BjwuUF0J698oaJHzUJJvUBSFoL88HZBV0IAiEAvfcuMnlYLW9FulsxQPf8M4D5awQvwdJ/qXOJxFtJXFQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":231335},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/index.css","./effects/image-trail":{"import":{"types":"./dist/effects/image-trail.d.ts","default":"./dist/effects/image-trail.js"},"require":{"types":"./dist/effects/image-trail.d.cts","default":"./dist/effects/image-trail.cjs"}},"./effects/sticky-stack":{"import":{"types":"./dist/effects/sticky-stack.d.ts","default":"./dist/effects/sticky-stack.js"},"require":{"types":"./dist/effects/sticky-stack.d.cts","default":"./dist/effects/sticky-stack.cjs"}},"./effects/accordion-slider":{"import":{"types":"./dist/effects/accordion-slider.d.ts","default":"./dist/effects/accordion-slider.js"},"require":{"types":"./dist/effects/accordion-slider.d.cts","default":"./dist/effects/accordion-slider.cjs"}}},"gitHead":"77352c7740be8579ac4d430c9dc43be4665b574b","scripts":{"dev":"tsup --watch","build":"tsup","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"},"repository":{"url":"git+https://github.com/1983shiv/adviklabs-react-cinematic-effects.git","type":"git"},"_npmVersion":"10.9.4","description":"Drop-in, extensible cinematic UI effect components for React — accordion sliders, image trails, and more.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.21.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","vitest":"^4.1.5","react-dom":"^18.3.0","storybook":"^10.3.5","playwright":"^1.59.1","typescript":"^5.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitest/coverage-v8":"^4.1.5","@storybook/addon-a11y":"^10.3.5","@storybook/addon-docs":"^10.3.5","@storybook/react-vite":"^10.3.5","@storybook/addon-vitest":"^10.3.5","@chromatic-com/storybook":"^5.1.2","@vitest/browser-playwright":"^4.1.5","@storybook/addon-onboarding":"^10.3.5"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-cinematic-effects_1.0.1_1778124829274_0.2690482540133612","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@adviklabs/react-cinematic-effects","version":"1.1.0","keywords":["react","animation","accordion","slider","image-trail","cursor","hover","cinematic","effects","components","ui","adviklabs"],"author":{"url":"https://github.com/1983shiv","name":"Shiv Srivastava","email":"[EMAIL_ADDRESS]"},"license":"MIT","_id":"@adviklabs/react-cinematic-effects@1.1.0","maintainers":[{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"}],"homepage":"https://github.com/1983shiv/adviklabs-react-cinematic-effects#readme","bugs":{"url":"https://github.com/1983shiv/adviklabs-react-cinematic-effects/issues"},"dist":{"shasum":"d650ab74bac10bedc6cd09a8262d8a3c4180e941","tarball":"https://registry.npmjs.org/@adviklabs/react-cinematic-effects/-/react-cinematic-effects-1.1.0.tgz","fileCount":75,"integrity":"sha512-/htsL4O3vSI28Uki3bVpl4/4e0amXWtg92JRV3nFewZFqLVpJrExuMcDLk3s29SSa+OrgioLp/c3yfF6Ct3nPA==","signatures":[{"sig":"MEUCIHzZX9Qr40d0myksaH29IS2orMSgIzSeYuyFexJMI9KAAiEA8zyB5FqyzStjxvT2JgdR2bIMVWuATCwGrdkvPSO9kKQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":302634},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/index.css","./effects/flip-cards":{"import":{"types":"./dist/effects/flip-cards.d.ts","default":"./dist/effects/flip-cards.js"},"require":{"types":"./dist/effects/flip-cards.d.cts","default":"./dist/effects/flip-cards.cjs"}},"./effects/image-trail":{"import":{"types":"./dist/effects/image-trail.d.ts","default":"./dist/effects/image-trail.js"},"require":{"types":"./dist/effects/image-trail.d.cts","default":"./dist/effects/image-trail.cjs"}},"./effects/sticky-stack":{"import":{"types":"./dist/effects/sticky-stack.d.ts","default":"./dist/effects/sticky-stack.js"},"require":{"types":"./dist/effects/sticky-stack.d.cts","default":"./dist/effects/sticky-stack.cjs"}},"./effects/accordion-slider":{"import":{"types":"./dist/effects/accordion-slider.d.ts","default":"./dist/effects/accordion-slider.js"},"require":{"types":"./dist/effects/accordion-slider.d.cts","default":"./dist/effects/accordion-slider.cjs"}}},"gitHead":"41f44887998571fd837b17b56b1dbe3c3602b487","scripts":{"dev":"tsup --watch","build":"tsup","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"},"repository":{"url":"git+https://github.com/1983shiv/adviklabs-react-cinematic-effects.git","type":"git"},"_npmVersion":"10.9.4","description":"Drop-in, extensible cinematic UI effect components for React — accordion sliders, image trails, and more.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.21.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","vitest":"^4.1.5","react-dom":"^18.3.0","storybook":"^10.3.6","playwright":"^1.59.1","typescript":"^5.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitest/coverage-v8":"^4.1.5","@storybook/addon-a11y":"^10.3.6","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@storybook/addon-vitest":"^10.3.6","@chromatic-com/storybook":"^5.1.2","@vitest/browser-playwright":"^4.1.5","@storybook/addon-onboarding":"^10.3.6"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-cinematic-effects_1.1.0_1778135428463_0.9057232034010305","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@adviklabs/react-cinematic-effects","version":"1.2.0","keywords":["react","animation","accordion","slider","image-trail","cursor","hover","cinematic","effects","components","ui","adviklabs"],"author":{"url":"https://github.com/1983shiv","name":"Shiv Srivastava","email":"[EMAIL_ADDRESS]"},"license":"MIT","_id":"@adviklabs/react-cinematic-effects@1.2.0","maintainers":[{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"}],"homepage":"https://github.com/1983shiv/adviklabs-react-cinematic-effects#readme","bugs":{"url":"https://github.com/1983shiv/adviklabs-react-cinematic-effects/issues"},"dist":{"shasum":"503a762acf1d4fd914005e1b3ce24be57bec99c7","tarball":"https://registry.npmjs.org/@adviklabs/react-cinematic-effects/-/react-cinematic-effects-1.2.0.tgz","fileCount":99,"integrity":"sha512-Y62GLekNq5XtB1MgGyGPsSL1l080qR1tO4HPGIY72M5jom5uB33uHaQXp3mLXE0d4aXACypCYhTiB6o5Fqs1pw==","signatures":[{"sig":"MEUCIDnAzbeLqIGTNelyvCrrkTfh7R8csoSfrx6oSkrqAHRmAiEA8lhDqf+OJLn2vqyO1FrnrvnZCxDlf+o8h8YO7ioOBvc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":377234},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/index.css","./effects/flip-cards":{"import":{"types":"./dist/effects/flip-cards.d.ts","default":"./dist/effects/flip-cards.js"},"require":{"types":"./dist/effects/flip-cards.d.cts","default":"./dist/effects/flip-cards.cjs"}},"./effects/color-shift":{"import":{"types":"./dist/effects/color-shift.d.ts","default":"./dist/effects/color-shift.js"},"require":{"types":"./dist/effects/color-shift.d.cts","default":"./dist/effects/color-shift.cjs"}},"./effects/image-trail":{"import":{"types":"./dist/effects/image-trail.d.ts","default":"./dist/effects/image-trail.js"},"require":{"types":"./dist/effects/image-trail.d.cts","default":"./dist/effects/image-trail.cjs"}},"./effects/sticky-stack":{"import":{"types":"./dist/effects/sticky-stack.d.ts","default":"./dist/effects/sticky-stack.js"},"require":{"types":"./dist/effects/sticky-stack.d.cts","default":"./dist/effects/sticky-stack.cjs"}},"./effects/circular-text":{"import":{"types":"./dist/effects/circular-text.d.ts","default":"./dist/effects/circular-text.js"},"require":{"types":"./dist/effects/circular-text.d.cts","default":"./dist/effects/circular-text.cjs"}},"./effects/accordion-slider":{"import":{"types":"./dist/effects/accordion-slider.d.ts","default":"./dist/effects/accordion-slider.js"},"require":{"types":"./dist/effects/accordion-slider.d.cts","default":"./dist/effects/accordion-slider.cjs"}}},"gitHead":"c68646c4c16a139172cf0fafdc7c34d605d0f7a1","scripts":{"dev":"tsup --watch","build":"tsup","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"},"repository":{"url":"git+https://github.com/1983shiv/adviklabs-react-cinematic-effects.git","type":"git"},"_npmVersion":"10.9.4","description":"Drop-in, extensible cinematic UI effect components for React — accordion sliders, image trails, and more.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.21.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","vitest":"^4.1.5","react-dom":"^18.3.0","storybook":"^10.3.6","playwright":"^1.59.1","typescript":"^5.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitest/coverage-v8":"^4.1.5","@storybook/addon-a11y":"^10.3.6","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@storybook/addon-vitest":"^10.3.6","@chromatic-com/storybook":"^5.1.2","@vitest/browser-playwright":"^4.1.5","@storybook/addon-onboarding":"^10.3.6"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-cinematic-effects_1.2.0_1778411368278_0.4633316948028743","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@adviklabs/react-cinematic-effects","version":"1.3.0","keywords":["react","animation","accordion","slider","image-trail","typewriter","cursor","hover","cinematic","effects","components","ui","adviklabs"],"author":{"url":"https://github.com/1983shiv","name":"Shiv Srivastava","email":"[EMAIL_ADDRESS]"},"license":"MIT","_id":"@adviklabs/react-cinematic-effects@1.3.0","maintainers":[{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"}],"homepage":"https://github.com/1983shiv/adviklabs-react-cinematic-effects#readme","bugs":{"url":"https://github.com/1983shiv/adviklabs-react-cinematic-effects/issues"},"dist":{"shasum":"594609e67349b230e7a8ce0ecd7f98afdfddbd42","tarball":"https://registry.npmjs.org/@adviklabs/react-cinematic-effects/-/react-cinematic-effects-1.3.0.tgz","fileCount":111,"integrity":"sha512-EqRCHAVzEU6sHW4fZdv6dX5fFpioOWizKOrLwHokzMpM6aVt/mzlwWt1tpQZBhHysWaoFRVBO+R3lUJTmC0t9Q==","signatures":[{"sig":"MEYCIQCKYh3ahwJFij1TfktMVNqs+v3n+zWTCFZQyQGdvkWtCwIhAPwW6ZC9TDTFkRn8HsIwaimaYoZYe2oukNH8KY2hGZuB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":478464},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/index.css","./effects/flip-cards":{"import":{"types":"./dist/effects/flip-cards.d.ts","default":"./dist/effects/flip-cards.js"},"require":{"types":"./dist/effects/flip-cards.d.cts","default":"./dist/effects/flip-cards.cjs"}},"./effects/color-shift":{"import":{"types":"./dist/effects/color-shift.d.ts","default":"./dist/effects/color-shift.js"},"require":{"types":"./dist/effects/color-shift.d.cts","default":"./dist/effects/color-shift.cjs"}},"./effects/image-trail":{"import":{"types":"./dist/effects/image-trail.d.ts","default":"./dist/effects/image-trail.js"},"require":{"types":"./dist/effects/image-trail.d.cts","default":"./dist/effects/image-trail.cjs"}},"./effects/type-writer":{"import":{"types":"./dist/effects/type-writer.d.ts","default":"./dist/effects/type-writer.js"},"require":{"types":"./dist/effects/type-writer.d.cts","default":"./dist/effects/type-writer.cjs"}},"./effects/sticky-stack":{"import":{"types":"./dist/effects/sticky-stack.d.ts","default":"./dist/effects/sticky-stack.js"},"require":{"types":"./dist/effects/sticky-stack.d.cts","default":"./dist/effects/sticky-stack.cjs"}},"./effects/circular-text":{"import":{"types":"./dist/effects/circular-text.d.ts","default":"./dist/effects/circular-text.js"},"require":{"types":"./dist/effects/circular-text.d.cts","default":"./dist/effects/circular-text.cjs"}},"./effects/accordion-slider":{"import":{"types":"./dist/effects/accordion-slider.d.ts","default":"./dist/effects/accordion-slider.js"},"require":{"types":"./dist/effects/accordion-slider.d.cts","default":"./dist/effects/accordion-slider.cjs"}}},"gitHead":"abe8d02d017d107e5d951297b685f04bdf666ebd","scripts":{"dev":"tsup --watch","build":"tsup","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"},"repository":{"url":"git+https://github.com/1983shiv/adviklabs-react-cinematic-effects.git","type":"git"},"_npmVersion":"10.9.4","description":"Drop-in, extensible cinematic UI effect components for React — accordion sliders, image trails, and more.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.21.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","vitest":"^4.1.5","react-dom":"^18.3.0","storybook":"^10.3.6","playwright":"^1.59.1","typescript":"^5.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitest/coverage-v8":"^4.1.5","@storybook/addon-a11y":"^10.3.6","@storybook/addon-docs":"^10.3.6","@storybook/react-vite":"^10.3.6","@storybook/addon-vitest":"^10.3.6","@chromatic-com/storybook":"^5.1.2","@vitest/browser-playwright":"^4.1.5","@storybook/addon-onboarding":"^10.3.6"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-cinematic-effects_1.3.0_1779340600616_0.30035299575540697","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"@adviklabs/react-cinematic-effects","version":"1.4.0","description":"Drop-in, extensible cinematic UI effect components for React — accordion sliders, image trails, and more.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./effects/accordion-slider":{"import":{"types":"./dist/effects/accordion-slider.d.ts","default":"./dist/effects/accordion-slider.js"},"require":{"types":"./dist/effects/accordion-slider.d.cts","default":"./dist/effects/accordion-slider.cjs"}},"./effects/image-trail":{"import":{"types":"./dist/effects/image-trail.d.ts","default":"./dist/effects/image-trail.js"},"require":{"types":"./dist/effects/image-trail.d.cts","default":"./dist/effects/image-trail.cjs"}},"./effects/sticky-stack":{"import":{"types":"./dist/effects/sticky-stack.d.ts","default":"./dist/effects/sticky-stack.js"},"require":{"types":"./dist/effects/sticky-stack.d.cts","default":"./dist/effects/sticky-stack.cjs"}},"./effects/flip-cards":{"import":{"types":"./dist/effects/flip-cards.d.ts","default":"./dist/effects/flip-cards.js"},"require":{"types":"./dist/effects/flip-cards.d.cts","default":"./dist/effects/flip-cards.cjs"}},"./effects/circular-text":{"import":{"types":"./dist/effects/circular-text.d.ts","default":"./dist/effects/circular-text.js"},"require":{"types":"./dist/effects/circular-text.d.cts","default":"./dist/effects/circular-text.cjs"}},"./effects/color-shift":{"import":{"types":"./dist/effects/color-shift.d.ts","default":"./dist/effects/color-shift.js"},"require":{"types":"./dist/effects/color-shift.d.cts","default":"./dist/effects/color-shift.cjs"}},"./effects/type-writer":{"import":{"types":"./dist/effects/type-writer.d.ts","default":"./dist/effects/type-writer.js"},"require":{"types":"./dist/effects/type-writer.d.cts","default":"./dist/effects/type-writer.cjs"}},"./effects/sticky-card-stack":{"import":{"types":"./dist/effects/sticky-card-stack.d.ts","default":"./dist/effects/sticky-card-stack.js"},"require":{"types":"./dist/effects/sticky-card-stack.d.cts","default":"./dist/effects/sticky-card-stack.cjs"}},"./styles.css":"./dist/index.css"},"sideEffects":["*.css"],"keywords":["react","animation","accordion","slider","image-trail","typewriter","cursor","hover","cinematic","effects","components","ui","adviklabs"],"repository":{"type":"git","url":"git+https://github.com/1983shiv/adviklabs-react-cinematic-effects.git"},"homepage":"https://github.com/1983shiv/adviklabs-react-cinematic-effects#readme","bugs":{"url":"https://github.com/1983shiv/adviklabs-react-cinematic-effects/issues"},"publishConfig":{"access":"public"},"author":{"name":"Shiv Srivastava","email":"[EMAIL_ADDRESS]","url":"https://github.com/1983shiv"},"license":"MIT","peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@types/react":"^18.3.0","@types/react-dom":"^18.3.0","react":"^18.3.0","react-dom":"^18.3.0","tsup":"^8.0.0","typescript":"^5.4.0","storybook":"^10.3.6","@storybook/react-vite":"^10.3.6","@chromatic-com/storybook":"^5.1.2","@storybook/addon-vitest":"^10.3.6","@storybook/addon-a11y":"^10.3.6","@storybook/addon-docs":"^10.3.6","@storybook/addon-onboarding":"^10.3.6","vitest":"^4.1.5","playwright":"^1.59.1","@vitest/browser-playwright":"^4.1.5","@vitest/coverage-v8":"^4.1.5"},"scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_id":"@adviklabs/react-cinematic-effects@1.4.0","gitHead":"d697d0e4be939e34d6bdeb0da7a8779cbe05f8c0","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-bF6sra+iY5VIplKDUbfmLvtO1TTazFTvXjuRYf3ZKrAVNQwx1jiyEkkwAP9AVi7944xFYXuOjbPkn85WjO6K3w==","shasum":"45990fd04fd2b4186a27d7c4d84aaa3dc8dcb613","tarball":"https://registry.npmjs.org/@adviklabs/react-cinematic-effects/-/react-cinematic-effects-1.4.0.tgz","fileCount":123,"unpackedSize":530143,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDPi8PIfiNmfXHgr+Xq4ybsSyxpvrW6NEbRC0VpKkLNcwIhAJ9DMr0ooFR98v54Iu/QZQYGBs1DTsl0YIqlPeuGsCWm"}]},"_npmUser":{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"},"directories":{},"maintainers":[{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-cinematic-effects_1.4.0_1780293020325_0.901407120856802"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-24T03:01:27.638Z","modified":"2026-06-01T05:50:20.691Z","1.0.0":"2026-04-24T03:01:27.924Z","1.0.1":"2026-05-07T03:33:49.438Z","1.1.0":"2026-05-07T06:30:29.146Z","1.2.0":"2026-05-10T11:09:28.425Z","1.3.0":"2026-05-21T05:16:40.758Z","1.4.0":"2026-06-01T05:50:20.545Z"},"bugs":{"url":"https://github.com/1983shiv/adviklabs-react-cinematic-effects/issues"},"author":{"name":"Shiv Srivastava","email":"[EMAIL_ADDRESS]","url":"https://github.com/1983shiv"},"license":"MIT","homepage":"https://github.com/1983shiv/adviklabs-react-cinematic-effects#readme","keywords":["react","animation","accordion","slider","image-trail","typewriter","cursor","hover","cinematic","effects","components","ui","adviklabs"],"repository":{"type":"git","url":"git+https://github.com/1983shiv/adviklabs-react-cinematic-effects.git"},"description":"Drop-in, extensible cinematic UI effect components for React — accordion sliders, image trails, and more.","maintainers":[{"name":"shiv-srivastava","email":"1983.shiv@gmail.com"}],"readme":"# @adviklabs/react-cinematic-effects\n\n> Drop-in, extensible cinematic UI effect components for React.\n\n[![npm version](https://img.shields.io/npm/v/@adviklabs/react-cinematic-effects.svg)](https://www.npmjs.com/package/@adviklabs/react-cinematic-effects)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@adviklabs/react-cinematic-effects)](https://bundlephobia.com/package/@adviklabs/react-cinematic-effects)\n[![license](https://img.shields.io/npm/l/@adviklabs/react-cinematic-effects)](./LICENSE.txt)\n\n\n## Features \n\n- 🎬 **AccordionSlider** — Narrow image panels that expand on hover/click (horizontal + vertical)\n- ✨ **ImageTrail** — Cursor leaves a trail of images/colours that fade out\n- 📌 **StickyStack** — Scroll-driven two-column feature section with a crossfading sticky visual panel\n- 🃏 **FlipCards** — Responsive 3D cards that flip to reveal more info on hover or click\n- 🔵 **CircularText** — Text rendered along a rotating SVG arc; spin, scroll-reactive, or static modes\n- 🎨 **ColorShift** — Scroll-driven background and text colour transitions between page sections\n- ⌨️ **TypeWriter** — Three-variant typewriter effect: phrase cycler, viewport-triggered code block, and staggered chat bubble sequence\n- 🗂️ **StickyCardStack** — Cards stack on top of each other as you scroll, creating a physical sense of layers\n- 🧩 **Extensible** — Add new effects by dropping a folder — no core changes needed\n- 📦 **Tree-shakable** — Import only the effects you use\n- 🎯 **TypeScript** — Full type definitions with IDE autocomplete\n- ♿ **Accessible** — `prefers-reduced-motion`, ARIA attributes, keyboard support\n- 🖥️ **SSR-safe** — Works with Next.js, Remix, and any SSR framework\n- 🪶 **Lightweight** — Zero runtime dependencies (only React peer dep)\n\n## Installation\n\n```bash\nnpm install @adviklabs/react-cinematic-effects\n```\n\n### Required: Import the stylesheet\n\nThe package ships its styles as a separate CSS file. Add this import **once** in your app's entry point (e.g. `app/layout.tsx` for Next.js, `main.tsx` for Vite):\n\n```ts\nimport '@adviklabs/react-cinematic-effects/styles.css';\n```\n\n> **Next.js note:** Because the CSS comes from `node_modules`, Next.js requires you to mark the package as transpilable. Add the following to your `next.config.ts`:\n>\n> ```ts\n> const nextConfig = {\n>   transpilePackages: ['@adviklabs/react-cinematic-effects'],\n> };\n> ```\n\n## Quick Start\n\n### AccordionSlider\n\n```tsx\nimport '@adviklabs/react-cinematic-effects/styles.css'; // required — add once at app entry\nimport { AccordionSlider } from '@adviklabs/react-cinematic-effects';\n\nconst items = [\n  {\n    id: '1',\n    backgroundSrc: '/images/strategy.jpg',\n    title: 'Brand Strategy',\n    collapsedLabel: 'Strategy',\n    number: '01',\n    description: 'Positioning, messaging, and identity systems.',\n  },\n  {\n    id: '2',\n    backgroundSrc: '/images/design.jpg',\n    title: 'Interface Design',\n    collapsedLabel: 'Design',\n    number: '02',\n    description: 'Components, layouts, and interaction patterns.',\n  },\n  {\n    id: '3',\n    backgroundSrc: '/images/dev.jpg',\n    title: 'Development',\n    collapsedLabel: 'Code',\n    number: '03',\n    description: 'TypeScript, edge-first architecture, CI/CD.',\n  },\n];\n\nexport default function Portfolio() {\n  return (\n    <AccordionSlider\n      items={items}\n      orientation=\"horizontal\"\n      trigger=\"hover\"\n      height=\"70vh\"\n      gap={8}\n      borderRadius={16}\n      transitionDuration={600}\n    />\n  );\n}\n```\n\n### Vertical variant\n\n```tsx\n<AccordionSlider\n  items={items}\n  orientation=\"vertical\"\n  trigger=\"click\"\n  collapsedHeight=\"60px\"\n  expandedHeight=\"240px\"\n/>\n```\n\n\n### FlipCards\n\nResponsive 3D cards that flip to reveal more info on hover or click. Great for feature highlights, team bios, or service overviews.\n\n```tsx\nimport '@adviklabs/react-cinematic-effects/styles.css'; // required — add once at app entry\nimport { FlipCards } from '@adviklabs/react-cinematic-effects';\n\nconst items = [\n  {\n    id: '1',\n    icon: '🩺',\n    title: 'Diagnosis',\n    subtitle: 'Accurate patient assessment',\n    description: 'Utilizing advanced imaging and lab tests, our team ensures every diagnosis is precise and timely for optimal care.',\n    linkLabel: 'Learn more',\n  },\n  {\n    id: '2',\n    icon: '💊',\n    title: 'Treatment',\n    subtitle: 'Personalized therapies',\n    description: 'From medication management to surgical procedures, we tailor treatments to each patient’s unique needs and conditions.',\n    linkLabel: 'Learn more',\n  },\n  {\n    id: '3',\n    icon: '🤝',\n    title: 'Patient Support',\n    subtitle: 'Continuous care',\n    description: 'Our support staff guides patients through recovery, offering education, counseling, and follow-up for lasting health.',\n    linkLabel: 'Learn more',\n  },\n  {\n    id: '4',\n    icon: '🔬',\n    title: 'Research',\n    subtitle: 'Innovative solutions',\n    description: 'We invest in medical research and clinical trials to bring the latest advancements and therapies to our patients.',\n    linkLabel: 'Learn more',\n  },\n];\n\nexport default function HealthcareHighlights() {\n  return (\n    <FlipCards\n      items={items}\n      trigger=\"hover\"\n      cardHeight=\"320px\"\n      gap={20}\n      borderRadius={20}\n    />\n  );\n}\n```\n\n### StickyStack\n\nThe \"sticky product + scrolling benefits\" pattern made popular by Stripe, Linear, and Apple. A sticky visual panel on one side crossfades as the user scrolls through feature cards on the other side.\n\n```tsx\nimport '@adviklabs/react-cinematic-effects/styles.css'; // required — add once at app entry\nimport { StickyStack } from '@adviklabs/react-cinematic-effects';\n\nconst features = [\n  {\n    id: '1',\n    number: '01',\n    title: 'Real-time monitoring',\n    description: 'Track uptime, latency, and error rates across all your services.',\n    visual: <img src=\"/feature-monitoring.png\" alt=\"Monitoring dashboard\" />, \n  },\n  {\n    id: '2',\n    number: '02',\n    title: 'Instant alerts',\n    description: 'Get notified the moment something goes wrong — via Slack, email, or PagerDuty.',\n    visual: <img src=\"/feature-alerts.png\" alt=\"Alert configuration\" />, \n  },\n  {\n    id: '3',\n    number: '03',\n    title: 'Detailed analytics',\n    description: 'Drill into historical data, P99 latency, and custom dashboards.',\n    visual: <img src=\"/feature-analytics.png\" alt=\"Analytics chart\" />, \n  },\n];\n\nexport default function Features() {\n  return (\n    <StickyStack\n      items={features}\n      visualSide=\"visual-left\"\n      accentColor=\"#4f46e5\"\n      transitionDuration={400}\n      cardGap={40}\n    />\n  );\n}\n```\n\n### Visual on the right\n\n```tsx\n<StickyStack\n  items={features}\n  visualSide=\"visual-right\"\n  accentColor=\"#e85d3a\"\n  inactiveOpacity={0.25}\n  stickyTop=\"80px\"\n/>\n```\n\n### CircularText\n\nText rendered along a rotating SVG arc. Works as badges, logo treatments, and section accents. Three modes: continuous CSS spin, scroll-reactive rotation, or static.\n\n```tsx\nimport '@adviklabs/react-cinematic-effects/styles.css'; // required — add once at app entry\nimport { CircularText } from '@adviklabs/react-cinematic-effects';\n\nexport default function Badge() {\n  return (\n    <CircularText\n      text=\"DESIGN \\u2022 BUILD \\u2022 SHIP \\u2022 SCALE \\u2022 \"\n      repeat={2}\n      size={320}\n      radius={120}\n      spinDuration={20}\n      mode=\"spin\"\n    >\n      <div style={{ textAlign: 'center' }}>\n        <div style={{ fontSize: 32, fontWeight: 600 }}>2026</div>\n        <div style={{ fontSize: 13, opacity: 0.5 }}>Est.</div>\n      </div>\n    </CircularText>\n  );\n}\n```\n\n#### Scroll-reactive variant\n\n```tsx\n<CircularText\n  text=\"SCROLL REACTIVE \\u2022 SCROLL REACTIVE \\u2022 \"\n  size={240}\n  radius={90}\n  mode=\"scroll\"\n  scrollSensitivity={0.5}\n  textColor=\"#a8748e\"\n>\n  <span style={{ fontSize: 28 }}>&#8595;</span>\n</CircularText>\n```\n\n#### Reverse spin\n\n```tsx\n<CircularText\n  text=\"FREE CONSULTATION \\u2022 FREE CONSULTATION \\u2022 \"\n  size={240}\n  radius={90}\n  spinDuration={12}\n  spinDirection=\"reverse\"\n  textColor=\"#e85d3a\"\n/>\n```\n\n### ColorShift\n\nScroll-driven background and text colour transitions. As each section enters the active viewport zone the container smoothly transitions to that section's colour palette. Uses `IntersectionObserver` — zero dependencies.\n\n```tsx\nimport '@adviklabs/react-cinematic-effects/styles.css'; // required — add once at app entry\nimport { ColorShift } from '@adviklabs/react-cinematic-effects';\n\nexport default function Page() {\n  return (\n    <ColorShift\n      sections={[\n        {\n          bg: '#0a0a0b',\n          text: '#eae7e2',\n          children: <HeroSection />,\n        },\n        {\n          bg: '#1a0d08',\n          text: '#f0e8df',\n          children: <WarmSection />,\n        },\n        {\n          bg: '#081a12',\n          text: '#dff0e8',\n          children: <ForestSection />,\n        },\n        {\n          bg: '#0d081a',\n          text: '#e0dff0',\n          children: <NightSection />,\n        },\n      ]}\n      transitionDuration={800}\n      triggerOffset={0.4}\n    />\n  );\n}\n```\n\n#### Dark-to-light flip mid-page\n\n```tsx\n<ColorShift\n  sections={[\n    { bg: '#0a0a0b', text: '#eae7e2', children: <StorySection /> },\n    { bg: '#f5f3ef', text: '#1a1a1f', children: <ActionSection /> },\n    { bg: '#0a0a0b', text: '#eae7e2', children: <ClosingSection /> },\n  ]}\n  transitionDuration={600}\n  transitionEasing=\"ease-in-out\"\n/>\n```\n\n\n### TypeWriter\n\nThree variants in one component — a phrase cycler for hero headings, a viewport-triggered code block typewriter, and a staggered chat bubble sequence.\n\n```tsx\nimport '@adviklabs/react-cinematic-effects/styles.css'; // required — add once at app entry\nimport { TypeWriter } from '@adviklabs/react-cinematic-effects';\n\n// Phrase cycler\nexport default function Hero() {\n  return (\n    <TypeWriter\n      variant=\"cycler\"\n      phrases={[\n        'We craft digital experiences.',\n        'We define modern brands.',\n        'We architect future products.',\n      ]}\n      typeSpeed={60}\n      deleteSpeed={30}\n      pauseFrames={40}\n      betweenPhraseDelay={400}\n      showCursor\n      cursorColor=\"#c8a97e\"\n      cursorWidth={3}\n    />\n  );\n}\n```\n\n#### Code block variant\n\n```tsx\n<TypeWriter\n  variant=\"code\"\n  codeText={`const greet = (name: string) => \\`Hello, \\${name}!\\`;`}\n  codeMinDelay={20}\n  codeMaxDelay={60}\n  codeIntersectionThreshold={0.5}\n/>\n```\n\n#### Chat sequence variant\n\n```tsx\n<TypeWriter\n  variant=\"chat\"\n  messages={[\n    { text: 'How do I add cinematic effects?', role: 'user', delay: 0 },\n    { text: 'Just install react-cinematic-effects!', role: 'bot', delay: 1200 },\n    { text: 'That easy?', role: 'user', delay: 2600 },\n    { text: 'That easy. 🚀', role: 'bot', delay: 3800 },\n  ]}\n  chatInitialOffset={500}\n/>\n```\n\n### ImageTrail\n\n```tsx\nimport '@adviklabs/react-cinematic-effects/styles.css'; // required — add once at app entry\nimport { ImageTrail } from '@adviklabs/react-cinematic-effects';\n\nexport default function Hero() {\n  return (\n    <ImageTrail\n      images={['/img/a.jpg', '/img/b.jpg', '/img/c.jpg', '/img/d.jpg']}\n      threshold={50}\n      trailWidth={160}\n      trailHeight={200}\n      fadeDuration={900}\n      poolSize={20}\n    >\n      <h1 style={{ fontSize: '8rem', textAlign: 'center' }}>\n        MOVE YOUR MOUSE\n      </h1>\n    </ImageTrail>\n  );\n}\n```\n\n### With colours instead of images\n\n```tsx\n<ImageTrail\n  colors={['#a8748e', '#748ea8', '#8ea874', '#a8a074']}\n  threshold={40}\n  rotationRange={15}\n>\n  <div style={{ minHeight: '60vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n    <h2>Hover here</h2>\n  </div>\n</ImageTrail>\n```\n\n\n### `<TypeWriter />`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `variant` | `'cycler' \\| 'code' \\| 'chat'` | `'cycler'` | Which typewriter variant to render |\n| `phrases` | `string[]` | `['We build websites.', …]` | Phrases to cycle through (cycler variant) |\n| `typeSpeed` | `number` | `60` | Milliseconds per character while typing (cycler & code) |\n| `deleteSpeed` | `number` | `30` | Milliseconds per character while deleting (cycler) |\n| `pauseFrames` | `number` | `40` | Animation frames to pause at phrase end before deleting (cycler) |\n| `betweenPhraseDelay` | `number` | `400` | Ms to wait between delete finish and next phrase (cycler) |\n| `showCursor` | `boolean` | `true` | Show blinking cursor (cycler) |\n| `cursorColor` | `string` | `'currentColor'` | Cursor colour (cycler) |\n| `cursorWidth` | `number` | `3` | Cursor bar width in px (cycler) |\n| `codeText` | `string` | JS snippet | Code string to type character-by-character (code) |\n| `codeMinDelay` | `number` | `20` | Minimum per-character delay in ms (code) |\n| `codeMaxDelay` | `number` | `60` | Maximum per-character delay in ms (code) |\n| `codeIntersectionThreshold` | `number` | `0.5` | Viewport visibility fraction before typing begins (code) |\n| `messages` | `ChatMessage[]` | demo conversation | Chat bubbles to display (chat) |\n| `chatInitialOffset` | `number` | `500` | Extra ms added to every message delay (chat) |\n\n#### `ChatMessage` shape\n\n| Field | Type | Description |\n|---|---|---|\n| `text` | `string` | Message text |\n| `role` | `'user' \\| 'bot'` | Controls visual alignment and styling |\n| `delay` | `number?` | Ms before this bubble appears — default `0` |\n\n### `<AccordionSlider />`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `items` | `AccordionSliderItem[]` | *required* | Panel data array |\n| `orientation` | `'horizontal' \\| 'vertical'` | `'horizontal'` | Layout direction |\n| `defaultActiveIndex` | `number` | `0` | Initial expanded panel |\n| `activeIndex` | `number` | — | Controlled active panel |\n| `onActiveChange` | `(index: number) => void` | — | Active change callback |\n| `trigger` | `'hover' \\| 'click'` | `'hover'` | Expand trigger |\n| `expandedFlex` | `number` | `5` | Expanded panel flex value |\n| `gap` | `number` | `8` | Gap between panels (px) |\n| `borderRadius` | `number` | `16` | Panel border radius (px) |\n| `height` | `string` | `'70vh'` | Container height |\n| `transitionDuration` | `number` | `600` | Transition duration (ms) |\n| `transitionEasing` | `string` | `'cubic-bezier(0.16, 1, 0.3, 1)'` | CSS easing |\n| `renderPanel` | `(item, index, isActive) => ReactNode` | — | Custom panel renderer |\n\n### `<ImageTrail />`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `children` | `ReactNode` | *required* | Content inside the trail region |\n| `images` | `string[]` | — | Image URLs for trail items |\n| `colors` | `string[]` | Default palette | Colour swatches (when no images) |\n| `poolSize` | `number` | `20` | Pre-allocated trail items |\n| `threshold` | `number` | `60` | Min cursor travel (px) to spawn |\n| `trailWidth` | `number` | `160` | Trail item width (px) |\n| `trailHeight` | `number` | `200` | Trail item height (px) |\n| `fadeDuration` | `number` | `800` | Fade-out duration (ms) |\n| `staggerDelay` | `number` | `300` | Delay before fade (ms) |\n| `initialScale` | `number` | `0.8` | Spawn scale factor |\n| `rotationRange` | `number` | `10` | Random rotation ± degrees |\n| `hideCursor` | `boolean` | `true` | Hide native cursor |\n| `renderTrailItem` | `(index, style) => ReactNode` | — | Custom trail item renderer |\n\n### `<StickyStack />`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `items` | `StickyStackItem[]` | *required* | Feature card data array |\n| `visualSide` | `'visual-left' \\| 'visual-right'` | `'visual-left'` | Side the sticky panel appears on |\n| `stickyTop` | `string` | `'100px'` | CSS `top` value for the sticky panel |\n| `activationMargin` | `string` | `'-20% 0px -20% 0px'` | IntersectionObserver root margin |\n| `cardGap` | `number` | `40` | Gap between feature cards (px) |\n| `inactiveOpacity` | `number` | `0.35` | Opacity of non-active cards (0–1) |\n| `accentColor` | `string` | `'#4f46e5'` | Accent colour for highlights & numbers |\n| `transitionDuration` | `number` | `400` | Crossfade animation duration (ms) |\n| `cardPadding` | `string` | `'40px 32px'` | CSS padding shorthand for each card |\n| `visualMinHeight` | `number` | `340` | Minimum height of the visual panel (px) |\n| `onActiveChange` | `(index: number) => void` | — | Fires when the active card changes |\n\n#### `StickyStackItem` shape\n\n| Field | Type | Description |\n|---|---|---|\n| `id` | `string` | Unique identifier |\n| `title` | `string` | Card heading |\n| `description` | `string` | Card body text |\n| `visual` | `ReactNode` | Content shown in the sticky panel (image, chart, illustration…) |\n| `number` | `string?` | Optional label shown above the title (e.g. `\"01\"`) |\n\n### `<CircularText />`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `text` | `string` | *required* | Text rendered along the circular arc |\n| `repeat` | `number` | `1` | Number of times to repeat the text string around the arc |\n| `radius` | `number` | `120` | Arc radius in SVG units (viewBox is 300×300, max 145) |\n| `size` | `number` | `320` | Rendered width and height of the component in px |\n| `fontSize` | `number` | `14` | Font size in SVG units |\n| `letterSpacing` | `string` | `'0.3em'` | CSS letter-spacing on the arc text |\n| `textColor` | `string` | `'currentColor'` | Text fill colour |\n| `fontWeight` | `number \\| string` | `500` | Font weight of the arc text |\n| `spinDuration` | `number` | `20` | Duration of one full rotation in seconds (spin mode only) |\n| `spinDirection` | `'normal' \\| 'reverse'` | `'normal'` | Clockwise or counter-clockwise rotation |\n| `mode` | `'spin' \\| 'scroll' \\| 'none'` | `'spin'` | Animation mode |\n| `scrollSensitivity` | `number` | `0.5` | Degrees of rotation per pixel scrolled (scroll mode only) |\n| `children` | `ReactNode` | — | Content rendered at the centre of the circle |\n\n### `<ColorShift />`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `sections` | `ColorShiftSection[]` | *required* | Ordered list of sections with their colour palettes and content |\n| `transitionDuration` | `number` | `800` | Duration of the background/text colour transition in ms |\n| `transitionEasing` | `string` | `'ease'` | CSS easing function for the colour transition |\n| `triggerOffset` | `number` | `0.4` | Fraction of the viewport (0–0.49) used as dead-band at top and bottom before a section activates |\n| `sectionMinHeight` | `string` | `'100dvh'` | CSS `min-height` applied to every section wrapper |\n\n#### `ColorShiftSection` shape\n\n| Field | Type | Description |\n|---|---|---|\n| `bg` | `string` | Background colour for this section (any valid CSS colour) |\n| `text` | `string` | Foreground / text colour for this section |\n| `children` | `ReactNode` | Section content |\n\nOverride any visual property from your own CSS:\n\n```css\n/* Global overrides */\n:root {\n  --rce-as-radius: 24px;\n  --rce-as-duration: 400ms;\n}\n\n/* Per-instance */\n.my-slider {\n  --rce-as-gap: 12px;\n  --rce-as-expanded-flex: 4;\n}\n```\n\n### StickyCardStack\n\nCards stack on top of each other as you scroll — like dealing cards onto a table. Each card pins in place, then the next one slides over it. Older cards gently scale down and fade as new cards cover them. Pure CSS sticky positioning powered — the scroll animation is an enhancement.\n\n```tsx\nimport '@adviklabs/react-cinematic-effects/styles.css'; // required — add once at app entry\nimport { StickyCardStack } from '@adviklabs/react-cinematic-effects';\n\nconst steps = [\n  {\n    id: '1',\n    number: 'Stage 01',\n    title: 'Foundation',\n    description: 'Core skills, mentorship, and building a portfolio of small wins. Curiosity outweighs ego. Every mistake is a lesson in disguise.',\n  },\n  {\n    id: '2',\n    number: 'Stage 02',\n    title: 'Specialisation',\n    description: 'Deep dive into one craft — frontend, infrastructure, or product thinking. You start saying no to things that distract from mastery.',\n  },\n  {\n    id: '3',\n    number: 'Stage 03',\n    title: 'Leadership',\n    description: 'You ship less code and grow more people. Reviews, RFCs, and 1:1s replace ticket queues. Your success is measured by your team\\'s output.',\n  },\n  {\n    id: '4',\n    number: 'Stage 04',\n    title: 'Strategy',\n    description: 'Roadmaps, OKRs, and cross-functional influence. You connect engineering decisions to business outcomes. The \"how\" matters less than the \"why\".',\n  },\n  {\n    id: '5',\n    number: 'Stage 05',\n    title: 'Legacy',\n    description: 'You build the thing that outlasts you — a platform, a culture, a community. Your name appears in commit logs less, but your impact compounds.',\n  },\n];\n\nexport default function Process() {\n  return <StickyCardStack items={steps} sectionLabel=\"Our process\" />;\n}\n```\n\n#### Without scroll animation\n\n```tsx\n<StickyCardStack\n  items={steps}\n  sectionLabel=\"Our process\"\n  scaleOnScroll={false}\n/>\n```\n\n#### Custom colours per card\n\n```tsx\n<StickyCardStack\n  items={[\n    { id: '1', number: '01', title: 'Ideate', description: '...', bgColor: '#0f172a', textColor: '#f8fafc' },\n    { id: '2', number: '02', title: 'Prototype', description: '...', bgColor: '#1e293b', textColor: '#f1f5f9' },\n    { id: '3', number: '03', title: 'Ship', description: '...', bgColor: '#334155', textColor: '#e2e8f0' },\n  ]}\n/>\n```\n\n### `<StickyCardStack />`\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `items` | `StickyCardStackItem[]` | *required* | Card data array |\n| `sectionLabel` | `string` | `'Our process'` | Label shown above the card stack |\n| `stickyTop` | `number` | `100` | CSS `top` value for the sticky positioned cards (px) |\n| `initialTopOffset` | `number` | `80` | Top offset for the first card (px) |\n| `peekOffset` | `number` | `20` | Additional top offset added per card (px) |\n| `cardMinHeight` | `number` | `320` | Minimum card height (px) |\n| `cardBorderRadius` | `number` | `24` | Card border radius (px) |\n| `cardPadding` | `string` | `'48px 40px'` | Card padding shorthand |\n| `cardMarginBottom` | `number` | `32` | Margin-bottom on each card (px) |\n| `cardShadow` | `string` | `'0 20px 60px rgba(0,0,0,0.06)'` | Card box-shadow value |\n| `scaleOnScroll` | `boolean` | `true` | Whether covered cards scale down on scroll |\n| `scaledScale` | `number` | `0.95` | Scale factor for covered cards |\n| `scaledOpacity` | `number` | `0.6` | Opacity for covered cards |\n\n#### `StickyCardStackItem` shape\n\n| Field | Type | Description |\n|---|---|---|\n| `id` | `string` | Unique identifier |\n| `number` | `string` | Step label (e.g. `'Step 01'`) |\n| `title` | `string` | Card heading |\n| `description` | `string` | Card body text |\n| `bgColor` | `string?` | Background colour override |\n| `textColor` | `string?` | Text colour override |\n\n## Adding a New Effect\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for the step-by-step guide.\n\n**TL;DR:** Create a folder under `src/effects/<name>/`, implement the component, add one re-export line in `src/index.ts`. Done.\n\n## Browser Support\n\n- Chrome (last 2 versions)\n- Firefox (last 2 versions)\n- Safari 15.4+\n- Edge (last 2 versions)\n- iOS Safari 15+ / Chrome Android 10+\n\n## License\n\nMIT © [Shiv Srivastava](https://github.com/1983shiv) — see [LICENSE.txt](./LICENSE.txt) for details.\n\n---\n\nBuilt by **Shiv Srivastava**  \nPart of the [AdvikLabs](https://adviklabs.com) ecosystem\n","readmeFilename":"README.md"}