{"_id":"@ar-dacity/ardacity-scroll-reveal","_rev":"2-65c0e28d2d64f5866ac5623ef1dabac2","name":"@ar-dacity/ardacity-scroll-reveal","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ar-dacity/ardacity-scroll-reveal","version":"1.0.0","keywords":["react","ui","components","scroll","animation","reveal","gsap"],"author":{"name":"ArDacity"},"license":"MIT","_id":"@ar-dacity/ardacity-scroll-reveal@1.0.0","maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"dist":{"shasum":"3433d4074f4f83c13db25acf51670f1870bcf1be","tarball":"https://registry.npmjs.org/@ar-dacity/ardacity-scroll-reveal/-/ardacity-scroll-reveal-1.0.0.tgz","fileCount":7,"integrity":"sha512-HxbGER4H7LkHOSjKmEkRmFYLmEAMVYyZcTd0TGAeCRLgdTXuCiQZgHtc1h6DHF+Vk+bImL9c7MBAAyOI8HCkUw==","signatures":[{"sig":"MEYCIQC3umUBWEcHgD7LWPQsGl9fJX/Ethwp0KQoZ6oukEeNNgIhALCIE2AAcbyc/HazZLInaQp002pY4qUhFpsF9HILSp6/","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9703},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","postinstall":"node ./scripts/install.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"ruffledzest","email":"vibhanshalok@gmail.com"},"_npmVersion":"10.8.1","description":"Scroll reveal animations with blur and opacity effects for React applications","directories":{},"_nodeVersion":"20.12.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.3.3","@types/node":"^20.10.5","@types/react":"^18.2.45"},"peerDependencies":{"gsap":">=3.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/ardacity-scroll-reveal_1.0.0_1745440266416_0.20328183154664337","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ar-dacity/ardacity-scroll-reveal","version":"1.0.1","description":"Scroll reveal animations with blur and opacity effects for React applications","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prepublishOnly":"npm run build","postinstall":"node ./scripts/install.js"},"keywords":["react","ui","components","scroll","animation","reveal","gsap"],"author":{"name":"ArDacity"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","gsap":">=3.0.0"},"devDependencies":{"@types/node":"^20.10.5","@types/react":"^18.2.45","typescript":"^5.3.3"},"_id":"@ar-dacity/ardacity-scroll-reveal@1.0.1","gitHead":"ed35a3d5ae61321181dcee2d088244a2b1508662","_nodeVersion":"20.12.1","_npmVersion":"10.8.1","dist":{"integrity":"sha512-j2dEZaT5e/LWqanMWa5tvSFlRB/GCQaKmHO1sBJqCuO80D+plecj5NpAFCFLO7OSIrm67YN/2nETamsISd7C1g==","shasum":"e1c78d511c04563866dca9a23afa88f07ec632ad","tarball":"https://registry.npmjs.org/@ar-dacity/ardacity-scroll-reveal/-/ardacity-scroll-reveal-1.0.1.tgz","fileCount":7,"unpackedSize":10155,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID7sFLmcyd/Nb0CeRrerdGzD1IzagVWEFFy/qgGe3dcmAiEAhI1kBC/TJEfqsQrn1L3dgB4BeVhfkmTs7HcQ83mGqcY="}]},"_npmUser":{"name":"ruffledzest","email":"vibhanshalok@gmail.com"},"directories":{},"maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ardacity-scroll-reveal_1.0.1_1745442609950_0.47353525797240037"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-23T20:31:06.306Z","modified":"2025-04-23T21:10:10.332Z","1.0.0":"2025-04-23T20:31:06.632Z","1.0.1":"2025-04-23T21:10:10.136Z"},"author":{"name":"ArDacity"},"license":"MIT","keywords":["react","ui","components","scroll","animation","reveal","gsap"],"description":"Scroll reveal animations with blur and opacity effects for React applications","maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"readme":"# ArDacity Scroll Reveal\r\n\r\nA React component that provides smooth scroll-triggered animations with blur, opacity, and rotation effects.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @ar-dacity/ardacity-scroll-reveal\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add @ar-dacity/ardacity-scroll-reveal\r\n```\r\n\r\nThis package requires GSAP as a peer dependency. If you haven't already installed it, run:\r\n\r\n```bash\r\nnpm install gsap\r\n```\r\n\r\n## Usage\r\n\r\n```jsx\r\nimport ScrollReveal from './components/ArDacityUi/ScrollReveal/ScrollReveal';\r\n// Or simply:\r\nimport { ScrollReveal } from './components/ArDacityUi/ScrollReveal';\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <ScrollReveal\r\n        baseOpacity={0}\r\n        enableBlur={true}\r\n        baseRotation={5}\r\n        blurStrength={10}\r\n      >\r\n        When does a man die? When he is hit by a bullet? No! When he suffers a disease?\r\n        No! When he ate a soup made out of a poisonous mushroom?\r\n        No! A man dies when he is forgotten!\r\n      </ScrollReveal>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Component Props\r\n\r\n| Property | Type | Default | Description |\r\n|----------|------|---------|-------------|\r\n| children | ReactNode | — | The text or elements to be animated. If a string is provided, it will be split into words. |\r\n| scrollContainerRef | React.RefObject | window | Optional ref for the scroll container. If provided, GSAP will use this container for scroll triggers; otherwise, it defaults to the window. |\r\n| enableBlur | boolean | true | Enables the blur animation effect on the words. |\r\n| baseOpacity | number | 0.1 | The initial opacity value for the words before the animation. |\r\n| baseRotation | number | 3 | The starting rotation (in degrees) for the container before it animates to 0. |\r\n| blurStrength | number | 4 | The strength of the blur effect (in pixels) applied at the start of the animation. |\r\n| containerClassName | string | \"\" | Additional CSS class(es) to apply to the container element. |\r\n| textClassName | string | \"\" | Additional CSS class(es) to apply to the text element. |\r\n| rotationEnd | string | \"bottom bottom\" | The scroll trigger end point for the container rotation animation. |\r\n| wordAnimationEnd | string | \"bottom bottom\" | The scroll trigger end point for the word opacity and blur animations. The animation will complete when the bottom of the text reaches the bottom of the container. |\r\n\r\n## Customization\r\n\r\nYou can customize the animation effects using the props:\r\n\r\n- **Enable Blur**: Set `enableBlur={true|false}` to toggle the blur effect.\r\n- **Blur Strength**: Adjust the intensity of the blur effect with `blurStrength={4}` (higher values = stronger blur).\r\n- **Starting Opacity**: Control how transparent the text starts with `baseOpacity={0.1}` (0 = invisible, 1 = fully visible).\r\n- **Starting Rotation**: Set the initial rotation angle with `baseRotation={3}` (in degrees).\r\n\r\n## License\r\n\r\nMIT ","readmeFilename":"README.md"}