{"_id":"3dscroll","_rev":"9-b155554a12469d69fa89da7054d48333","name":"3dscroll","dist-tags":{"latest":"1.0.8"},"versions":{"1.0.0":{"name":"3dscroll","version":"1.0.0","keywords":[],"author":"","license":"ISC","_id":"3dscroll@1.0.0","maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"dist":{"shasum":"5efee8bd57e2b3421ba0ad06237f0eb441862845","tarball":"https://registry.npmjs.org/3dscroll/-/3dscroll-1.0.0.tgz","fileCount":3,"integrity":"sha512-362GBIJ3/GsexodHtnEUF7hcofl8PWB94qqDEXyfypt3eiH0QANca5wIWJR+nwOXwNWrYlADI4i5j4B8qUFPGg==","signatures":[{"sig":"MEUCIQD9V84NZgWB3/8tNd2cwXWNHFHsVNWgJlDcol5K/dYOMwIgC8JngRLE5uYcGg+KTe+wZicjpHSDzHq7be7P7/M0RV8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2879},"main":"./src/index.js","type":"module","gitHead":"7a9451640fb1ba739987040a8098fffb808e96b3","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"3diesel","email":"ojasvisharmacs@gmail.com"},"_npmVersion":"11.2.0","description":"","directories":{},"_nodeVersion":"20.17.0","dependencies":{"gsap":"^3.13.0","three":"^0.178.0","@react-three/drei":"^10.6.0","@react-three/fiber":"^9.2.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3dscroll_1.0.0_1753283409096_0.3901100545391931","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"3dscroll","version":"1.0.1","keywords":[],"author":"","license":"ISC","_id":"3dscroll@1.0.1","maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"dist":{"shasum":"56b7146c2433e38e8f06f6bf86edc85357996cf4","tarball":"https://registry.npmjs.org/3dscroll/-/3dscroll-1.0.1.tgz","fileCount":4,"integrity":"sha512-jK9v4K+Ga+SDRDc5JL/3OcIVCUOUE1jUZBpnRAJxatp5kmiE6zzCfJQZUZQm+aS/gu4s8P9tsiloCzM8KgIjLg==","signatures":[{"sig":"MEUCIBnsjDEGBVNNV1r5SibfUdz5yq1zD2ym1y4V4fi9VocKAiEA2P3BqqI0OsOJLu5eOo30ZyXt6crapwYWCBVFeSxooyo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4868},"main":"./src/index.js","type":"module","gitHead":"7a9451640fb1ba739987040a8098fffb808e96b3","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"3diesel","email":"ojasvisharmacs@gmail.com"},"_npmVersion":"11.2.0","description":"A plug-and-play **React + Three.js** scroll animation component for 3D `.glb` models.","directories":{},"_nodeVersion":"20.17.0","dependencies":{"gsap":"^3.13.0","three":"^0.178.0","@react-three/drei":"^10.6.0","@react-three/fiber":"^9.2.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3dscroll_1.0.1_1753283727595_0.6225941372759545","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"3dscroll","version":"1.0.2","keywords":[],"author":"","license":"ISC","_id":"3dscroll@1.0.2","maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"dist":{"shasum":"fb9bcc49975c355c06b453f0b2dd3a38dce5a845","tarball":"https://registry.npmjs.org/3dscroll/-/3dscroll-1.0.2.tgz","fileCount":4,"integrity":"sha512-Pb0PFIa6r+PYwNS7Ddte7voHhrHVeY3UULtWOf/tXuALs6qqjFnXHxUPTigDD7/Kq9wCLkrFfQPIeYrkbEIK5Q==","signatures":[{"sig":"MEUCIBt0aZJbjD70w28pPUfD24vgYWNePctkPn152e7RRv6GAiEAzPQgVEILMLetFnCTdbwM5rqjW592mTNLKdP0ehmLIFs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4886},"main":"./src/index.mjs","type":"module","gitHead":"7a9451640fb1ba739987040a8098fffb808e96b3","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"3diesel","email":"ojasvisharmacs@gmail.com"},"_npmVersion":"11.2.0","description":"A plug-and-play **React + Three.js** scroll animation component for 3D `.glb` models.","directories":{},"_nodeVersion":"20.17.0","dependencies":{"gsap":"^3.13.0","three":"^0.178.0","@react-three/drei":"^10.6.0","@react-three/fiber":"^9.2.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3dscroll_1.0.2_1753287333259_0.8936129215619857","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"3dscroll","version":"1.0.3","keywords":["react","three","r3f","scroll"],"author":"","license":"ISC","_id":"3dscroll@1.0.3","maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"dist":{"shasum":"4b4686f12aa0cdf230c54206023e5abad530598b","tarball":"https://registry.npmjs.org/3dscroll/-/3dscroll-1.0.3.tgz","fileCount":4,"integrity":"sha512-7/k9hguOJbxj7+1Zx1ToCbshShgR8FlDtgU5qVoREjZ/03mXMW2ArFOYRurpJQFDKVRwJZ+35vB0qnLPcblK9w==","signatures":[{"sig":"MEUCIQCplXpvvNG5M0IkZ/PIiyq82YZoTbO2+lCkTPq6EetLRgIgBIdHR5y+pv2Kq/Y8nxWFkOSpPtwgEPFyocPXYyEMi+A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12139},"main":"dist/index.js","type":"module","module":"dist/index.js","gitHead":"7a9451640fb1ba739987040a8098fffb808e96b3","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c"},"_npmUser":{"name":"3diesel","email":"ojasvisharmacs@gmail.com"},"_npmVersion":"11.2.0","description":"A scroll-based 3D animation component for React.","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.18.0","@babel/core":"^7.24.7","@babel/preset-react":"^7.24.7","rollup-plugin-babel":"^4.4.0","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"gsap":">=3.0.0","react":">=18.0.0","three":">=0.140.0","@react-three/drei":">=9.0.0","@react-three/fiber":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3dscroll_1.0.3_1753288958569_0.37412766649709406","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"3dscroll","version":"1.0.4","keywords":["react","three","r3f","scroll"],"author":"","license":"ISC","_id":"3dscroll@1.0.4","maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"dist":{"shasum":"bfb667a09a3146d41501d83dbd7d0e208b7bc532","tarball":"https://registry.npmjs.org/3dscroll/-/3dscroll-1.0.4.tgz","fileCount":4,"integrity":"sha512-tMHqkjosth9gX26O8sFwLC6pabBbj86Zj2ubBQIahyhG0bAob4tVwch0lM4e8B9SC8CLVPCA8XmXsvvrxN2YTQ==","signatures":[{"sig":"MEYCIQD0YEly6ZPsquVhynfeEyB4hUD/kPVhKiDKPNud14+s+QIhAObZYaJKji03/XAo5In6Y7tH4s9kc3sHfNf3kAquvEYC","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12139},"main":"dist/index.js","type":"module","module":"dist/index.js","gitHead":"7a9451640fb1ba739987040a8098fffb808e96b3","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c"},"_npmUser":{"name":"3diesel","email":"ojasvisharmacs@gmail.com"},"_npmVersion":"11.2.0","description":"A scroll-based 3D animation component for React.","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.18.0","@babel/core":"^7.24.7","@babel/preset-react":"^7.24.7","rollup-plugin-babel":"^4.4.0","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"gsap":">=3.0.0","react":">=18.0.0","three":">=0.140.0","@react-three/drei":">=9.0.0","@react-three/fiber":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3dscroll_1.0.4_1753289395576_0.22926937161006","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"3dscroll","version":"1.0.5","keywords":["react","three","r3f","scroll"],"author":"","license":"ISC","_id":"3dscroll@1.0.5","maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"dist":{"shasum":"6abe284b0007cdbad78ad7e01462ea030adb7270","tarball":"https://registry.npmjs.org/3dscroll/-/3dscroll-1.0.5.tgz","fileCount":4,"integrity":"sha512-+AbDG9YvWvlSIdM/Djeg9bM8x2s/y7efCLkbgkRSU7bftEzKtEagSck0oAOm34iOp29SYeHrHlW2fMRf0vNbbQ==","signatures":[{"sig":"MEYCIQDrlCJtrWeGmulJ3mjw1YpWSoAQCLF6YdlcVg96v2+PHgIhANICUvkZL1wKDVD0pTmPDI9gOQnDM2RP39KoEDHL4HSK","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12063},"main":"dist/index.js","type":"module","module":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c"},"_npmUser":{"name":"3diesel","email":"ojasvisharmacs@gmail.com"},"_npmVersion":"11.2.0","description":"A scroll-based 3D animation component for React.","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.18.0","@babel/core":"^7.24.7","@babel/preset-react":"^7.24.7","rollup-plugin-babel":"^4.4.0","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"gsap":">=3.0.0","react":">=18.0.0","three":">=0.140.0","@react-three/drei":">=9.0.0","@react-three/fiber":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3dscroll_1.0.5_1753294983906_0.25196068408326955","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"3dscroll","version":"1.0.6","_id":"3dscroll@1.0.6","maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"dist":{"shasum":"869ad0956ac7e819d78e7c3521b294b1bad9947d","tarball":"https://registry.npmjs.org/3dscroll/-/3dscroll-1.0.6.tgz","fileCount":6,"integrity":"sha512-8figjBG1jWjMsj19s3HOOWJAA6kp/CsMlA+IDM3JWSRbV/ROujYVVzDUIaefzer20xwVsvH0iQsPUR3H/5N1UQ==","signatures":[{"sig":"MEQCIED9aC5GnXoWzt87i0S7liEb9oeXG+M363UXyIrZcGfHAiAz2Lc2ZMOQVw7UEewPvgkd2KE6qvJ+AFFHfNB/9SJH9w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14742},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && rollup -c"},"_npmUser":{"name":"3diesel","email":"ojasvisharmacs@gmail.com"},"_npmVersion":"11.2.0","description":"A scroll-based 3D animation component for React.","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3dscroll_1.0.6_1753304632041_0.03066320270225331","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"3dscroll","version":"1.0.7","keywords":["react","three","r3f","scroll","typescript"],"author":"","license":"ISC","_id":"3dscroll@1.0.7","maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"dist":{"shasum":"c12a345a9f04508b9194ad38989b149aa85f5602","tarball":"https://registry.npmjs.org/3dscroll/-/3dscroll-1.0.7.tgz","fileCount":6,"integrity":"sha512-ZChGSHWdVeSMPIJll2Ttd3Fx5+tarkDEpRNwndb4xl5pDq5jS8LN7vdmz4nb3Gwoc0d0bqwaB+JRtacm4raoOw==","signatures":[{"sig":"MEYCIQCNuH5hHJwcFL8V5eouPcnO6T6n785fRUAiZTEbpK/pPwIhANG7b/UweEWgx2HVP9gQKoKKRiaQm3sRD6/mouAph7ON","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13257},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && rollup -c"},"_npmUser":{"name":"3diesel","email":"ojasvisharmacs@gmail.com"},"_npmVersion":"11.2.0","description":"A scroll-based 3D animation component for React.","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.18.0","typescript":"^5.5.2","@babel/core":"^7.24.7","@types/react":"^18.3.3","@babel/preset-react":"^7.24.7","@rollup/plugin-babel":"^6.0.4","@babel/preset-typescript":"^7.24.7","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"gsap":">=3.0.0","react":">=18.0.0","three":">=0.140.0","@react-three/drei":">=9.0.0","@react-three/fiber":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3dscroll_1.0.7_1753305300207_0.47899804354111053","host":"s3://npm-registry-packages-npm-production"}},"1.0.8":{"name":"3dscroll","version":"1.0.8","description":"A scroll-based 3D animation component for React.","type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc && rollup -c","test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","three.js","react-three-fiber","r3f","scroll-based animation","3d scroll animation","scroll 3d model","gltf","glb","react component","scroll animation","gsap","typescript"],"author":"","license":"ISC","peerDependencies":{"@react-three/drei":">=9.0.0","@react-three/fiber":">=8.0.0","gsap":">=3.0.0","react":">=18.0.0","three":">=0.140.0"},"devDependencies":{"@babel/core":"^7.24.7","@babel/preset-react":"^7.24.7","@babel/preset-typescript":"^7.24.7","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-node-resolve":"^15.2.3","@types/react":"^18.3.3","rollup":"^4.18.0","typescript":"^5.5.2"},"_id":"3dscroll@1.0.8","_nodeVersion":"20.17.0","_npmVersion":"11.2.0","dist":{"integrity":"sha512-c21Kyn/LOd2K8u3PkaUNjin+LLiFqfdWnSI0D7l/ewfB+4TrXvYFOSQj+vvCTIdozRvxdRQjDyPKS9YwdOvD4w==","shasum":"18c681c1e0579f3effbd3051786fc9d26a483f0b","tarball":"https://registry.npmjs.org/3dscroll/-/3dscroll-1.0.8.tgz","fileCount":6,"unpackedSize":13837,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCXeIzO6mOVNHF9HIKDGqvGWwXNfn+RAcHt2L3hDaQoggIgfA+CD79JTAj//lgs3QGPhhkkiLZkL6TSL95Yjiza7P0="}]},"_npmUser":{"name":"3diesel","email":"ojasvisharmacs@gmail.com"},"directories":{},"maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3dscroll_1.0.8_1753513989212_0.011040580175520898"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-23T15:10:09.040Z","modified":"2025-07-26T07:13:09.637Z","1.0.0":"2025-07-23T15:10:09.277Z","1.0.1":"2025-07-23T15:15:27.754Z","1.0.2":"2025-07-23T16:15:33.731Z","1.0.3":"2025-07-23T16:42:38.753Z","1.0.4":"2025-07-23T16:49:55.785Z","1.0.5":"2025-07-23T18:23:04.125Z","1.0.6":"2025-07-23T21:03:52.247Z","1.0.7":"2025-07-23T21:15:00.395Z","1.0.8":"2025-07-26T07:13:09.419Z"},"license":"ISC","keywords":["react","three.js","react-three-fiber","r3f","scroll-based animation","3d scroll animation","scroll 3d model","gltf","glb","react component","scroll animation","gsap","typescript"],"description":"A scroll-based 3D animation component for React.","maintainers":[{"name":"3diesel","email":"ojasvisharmacs@gmail.com"}],"readme":"# 3dscroll\r\n\r\n> 📹 Watch the tutorial → [x.com/DieselSharma/status/1949003509309080062](https://x.com/DieselSharma/status/1949003509309080062)\r\n\r\nA plug-and-play **React + Three.js** scroll animation component for 3D `.glb` models.\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n- 🚀 Scroll-based 3D transitions  \r\n- 🎯 Animate position, rotation, scale, and opacity  \r\n- ⚙️ Fully customizable with `phases` array  \r\n- 🧩 Built with [`three`](https://www.npmjs.com/package/three), [`@react-three/fiber`](https://www.npmjs.com/package/@react-three/fiber), [`@react-three/drei`](https://www.npmjs.com/package/@react-three/drei), and [`gsap`](https://www.npmjs.com/package/gsap)\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install 3dscroll\r\n```\r\n\r\n---\r\n\r\n## 🚀 Usage\r\n\r\n```jsx\r\n\"use client\";\r\nimport { ThreeScene } from \"3dscroll\";\r\n\r\nexport default function App() {\r\n  const phases = [\r\n    { position: [0, 0, -15], rotation: [0, 0, 0], scale: 1, opacity: 1 },\r\n    { position: [0, 5, -15], rotation: [0, 0, 0], scale: 1.5, opacity: 0.5 },\r\n    { position: [0, 0, -15], rotation: [0, 0, 0], scale: 2, opacity: 0.2 },\r\n    { position: [0, 5, -15], rotation: [0, 0, 0], scale: 1, opacity: 1 },\r\n  ];\r\n\r\n  return (\r\n    <div style={{ background: \"black\", minHeight: \"100vh\" }}>\r\n      <ThreeScene\r\n        modelPath=\"/model.glb\"\r\n        phases={phases}\r\n        phaseSize={2} // optional, default is 2\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n## 📁 Props\r\n\r\n| Prop        | Type     | Description                                               |\r\n|-------------|----------|-----------------------------------------------------------|\r\n| `modelPath` | `string` | Path to your `.glb` model (must be placed in `public/`)   |\r\n| `phases`    | `array`  | Animation steps for `position`, `rotation`, `scale`, `opacity` |\r\n| `phaseSize` | `number` | Scroll height multiplier per phase *(default = 2)*        |\r\n\r\n---\r\n\r\n## 🔧 Built With\r\n\r\n- [`three`](https://www.npmjs.com/package/three)  \r\n- [`@react-three/fiber`](https://www.npmjs.com/package/@react-three/fiber)  \r\n- [`@react-three/drei`](https://www.npmjs.com/package/@react-three/drei)  \r\n- [`gsap`](https://www.npmjs.com/package/gsap)  \r\n- `react`, `typescript`, and `rollup` for bundling\r\n\r\n---\r\n\r\n## 🧠 Author\r\n\r\nMade with ❤️ by [@3diesel](https://github.com/3diesel)  \r\nFollow on [Twitter/X](https://x.com/DieselSharma)\r\n\r\n---\r\n","readmeFilename":"README.md"}