{"_id":"@allwells/react-scroll-reveal","_rev":"5-d531fbec572e66052ca73a9548006f6d","name":"@allwells/react-scroll-reveal","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@allwells/react-scroll-reveal","version":"1.0.0","keywords":["react","scroll","animation","reveal","intersection-observer","typescript","gsap","framer-motion","headless-ui"],"author":{"name":"The Web Architect","email":"aleenfestus@gmail.com"},"license":"MIT","_id":"@allwells/react-scroll-reveal@1.0.0","maintainers":[{"name":"allwells","email":"aleenfestus@gmail.com"}],"homepage":"https://github.com/allwells/react-scroll-reveal#readme","bugs":{"url":"https://github.com/allwells/react-scroll-reveal/issues"},"dist":{"shasum":"51e30a951f1bb5e04870d3397b32d5cee61968ce","tarball":"https://registry.npmjs.org/@allwells/react-scroll-reveal/-/react-scroll-reveal-1.0.0.tgz","fileCount":19,"integrity":"sha512-EZk9BCXdWDSwxEbS7dtRLP1uzgvYAXE7FuNkg77x5Wn3EbOmoVgUxRj2xogaj3tgIViOzwNs+Taf9dljgA+Bkg==","signatures":[{"sig":"MEUCIQCViiawRA36f7f0CoNaQoVN4q8Nb6JDkycZd43hJa4yZAIgZrcfSx+jb2pPyPogkS5DW00zjIcF/yeKH3+Sr3QGyZI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":121898},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=14.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./client":{"types":"./dist/client.d.ts","import":"./dist/client.mjs","require":"./dist/client.js"}},"gitHead":"8fa0241b454932490ce5a5a2f928d16aadcfd7a2","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup","release":"npm run build && changeset publish","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"allwells","actor":{"name":"allwells","type":"user","email":"aleenfestus@gmail.com"},"email":"aleenfestus@gmail.com"},"repository":{"url":"git+https://github.com/allwells/react-scroll-reveal.git","type":"git"},"_npmVersion":"11.0.0","description":"Production-ready, type-safe scroll animation library for React","directories":{},"sideEffects":false,"_nodeVersion":"20.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","tsup":"^8.1.0","react":"^18.3.1","eslint":"^8.57.0","ts-jest":"^29.1.5","prettier":"^3.3.2","react-dom":"^18.3.1","typescript":"^5.5.3","@types/jest":"^29.5.12","@types/node":"^20.14.10","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","eslint-plugin-react":"^7.34.3","@testing-library/react":"^16.0.0","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.6","@typescript-eslint/parser":"^7.16.0","eslint-plugin-react-hooks":"^4.6.2","@typescript-eslint/eslint-plugin":"^7.16.0"},"peerDependencies":{"gsap":">=3.0.0","react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=6.0.0","@headlessui/react":">=1.0.0"},"peerDependenciesMeta":{"gsap":{"optional":true},"framer-motion":{"optional":true},"@headlessui/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-scroll-reveal_1.0.0_1751336382822_0.6770798125501156","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@allwells/react-scroll-reveal","version":"1.0.1","keywords":["react","scroll","animation","reveal","intersection-observer","typescript","gsap","framer-motion","headless-ui"],"author":{"name":"The Web Architect","email":"aleenfestus@gmail.com"},"license":"MIT","_id":"@allwells/react-scroll-reveal@1.0.1","maintainers":[{"name":"allwells","email":"aleenfestus@gmail.com"}],"homepage":"https://github.com/allwells/react-scroll-reveal#readme","bugs":{"url":"https://github.com/allwells/react-scroll-reveal/issues"},"dist":{"shasum":"71afa2c6e239428a32800641ac3b3182c21e6dfb","tarball":"https://registry.npmjs.org/@allwells/react-scroll-reveal/-/react-scroll-reveal-1.0.1.tgz","fileCount":19,"integrity":"sha512-gutWDOjRcnenDB+bcDT2XRHTYOcnaarXc8BCgkjRQCIgnH+k+skV1gv1isbaRQZBKUmzQFFA7PU0218wfRuJ6g==","signatures":[{"sig":"MEUCIHPHE3E0OW2ZBZp2KYqjH0PDAmx3kPVocxiRUIkBblyhAiEA6MCUeJZCY8Brt16v6GIQ5kp5cO+pcKAr3MLt9VgSzm4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":121974},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=14.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./client":{"types":"./dist/client.d.ts","import":"./dist/client.mjs","require":"./dist/client.js"}},"gitHead":"292863051296b74a4d5d17c24f560931e6b12858","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup","release":"npm run build && changeset publish","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"allwells","actor":{"name":"allwells","type":"user","email":"aleenfestus@gmail.com"},"email":"aleenfestus@gmail.com"},"repository":{"url":"git+https://github.com/allwells/react-scroll-reveal.git","type":"git"},"_npmVersion":"11.0.0","description":"Production-ready, type-safe scroll animation library for React","directories":{},"sideEffects":false,"_nodeVersion":"20.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","tsup":"^8.1.0","react":"^18.3.1","eslint":"^8.57.0","ts-jest":"^29.1.5","prettier":"^3.3.2","react-dom":"^18.3.1","typescript":"^5.5.3","@types/jest":"^29.5.12","@types/node":"^20.14.10","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","eslint-plugin-react":"^7.34.3","@testing-library/react":"^16.0.0","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.6","@typescript-eslint/parser":"^7.16.0","eslint-plugin-react-hooks":"^4.6.2","@typescript-eslint/eslint-plugin":"^7.16.0"},"peerDependencies":{"gsap":">=3.0.0","react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=6.0.0","@headlessui/react":">=1.0.0"},"peerDependenciesMeta":{"gsap":{"optional":true},"framer-motion":{"optional":true},"@headlessui/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-scroll-reveal_1.0.1_1751336824088_0.6715366633587136","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@allwells/react-scroll-reveal","version":"1.0.2","keywords":["react","scroll","animation","reveal","intersection-observer","typescript","gsap","framer-motion","headless-ui"],"author":{"name":"The Web Architect","email":"aleenfestus@gmail.com"},"license":"MIT","_id":"@allwells/react-scroll-reveal@1.0.2","maintainers":[{"name":"allwells","email":"aleenfestus@gmail.com"}],"homepage":"https://github.com/allwells/react-scroll-reveal#readme","bugs":{"url":"https://github.com/allwells/react-scroll-reveal/issues"},"dist":{"shasum":"031b9994986890dd88e5efce5967658ff2e0512b","tarball":"https://registry.npmjs.org/@allwells/react-scroll-reveal/-/react-scroll-reveal-1.0.2.tgz","fileCount":19,"integrity":"sha512-H/8j2qxan5ruDJa8LHlkMPXgEyKJ5Zpo926SLKqZGYFndy8XCGwV5S8jilY5BC3rA1IQt9VEUzxd7pxpSPAHTw==","signatures":[{"sig":"MEUCIQDznvhg4OymY1/rTKJizzIc8qrybIpr1N7wO+RNiJX+sgIgSIB0ZcZ67yqqzZvCOLTt127gn3vJF+/EHPJtfdqxUno=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":121974},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=14.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./client":{"types":"./dist/client.d.ts","import":"./dist/client.mjs","require":"./dist/client.js"}},"gitHead":"7c967b4b24c6a018039461e3819b2635dae2ae44","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup","release":"npm run build && changeset publish","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"allwells","actor":{"name":"allwells","type":"user","email":"aleenfestus@gmail.com"},"email":"aleenfestus@gmail.com"},"repository":{"url":"git+https://github.com/allwells/react-scroll-reveal.git","type":"git"},"_npmVersion":"11.0.0","description":"Production-ready, type-safe scroll animation library for React","directories":{},"sideEffects":false,"_nodeVersion":"20.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","tsup":"^8.1.0","react":"^18.3.1","eslint":"^8.57.0","ts-jest":"^29.1.5","prettier":"^3.3.2","react-dom":"^18.3.1","typescript":"^5.5.3","@types/jest":"^29.5.12","@types/node":"^20.14.10","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","eslint-plugin-react":"^7.34.3","@testing-library/react":"^16.0.0","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.6","@typescript-eslint/parser":"^7.16.0","eslint-plugin-react-hooks":"^4.6.2","@typescript-eslint/eslint-plugin":"^7.16.0"},"peerDependencies":{"gsap":">=3.0.0","react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=6.0.0","@headlessui/react":">=1.0.0"},"peerDependenciesMeta":{"gsap":{"optional":true},"framer-motion":{"optional":true},"@headlessui/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-scroll-reveal_1.0.2_1751338174518_0.8589496788001383","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@allwells/react-scroll-reveal","version":"1.0.3","keywords":["react","scroll","animation","reveal","intersection-observer","typescript","gsap","framer-motion","headless-ui"],"author":{"name":"The Web Architect","email":"aleenfestus@gmail.com"},"license":"MIT","_id":"@allwells/react-scroll-reveal@1.0.3","maintainers":[{"name":"allwells","email":"aleenfestus@gmail.com"}],"homepage":"https://github.com/allwells/react-scroll-reveal#readme","bugs":{"url":"https://github.com/allwells/react-scroll-reveal/issues"},"dist":{"shasum":"20e6f248d3dc8917b28accdabda113b43f9b4129","tarball":"https://registry.npmjs.org/@allwells/react-scroll-reveal/-/react-scroll-reveal-1.0.3.tgz","fileCount":19,"integrity":"sha512-tFcODh8FR8v9BLg3dcSQBdc8yEgdrAqomKORSkKaom+5K1C6fSm2XxgMh7tKDoddVj0a3h+KtsPTO674onMDjQ==","signatures":[{"sig":"MEUCIFyefxyXAeXFeBpIHmTtXmlRtfg8u4B85b9LzMQMoQF7AiEA8L1af9m/Du/9+K0GktN17V5m6EEz/VjYBRYOZFltYo8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":121964},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=14.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./client":{"types":"./dist/client.d.ts","import":"./dist/client.mjs","require":"./dist/client.js"}},"gitHead":"71ebe12127e7af70195e670f0b327e335314f57f","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup","release":"npm run build && changeset publish","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"allwells","actor":{"name":"allwells","type":"user","email":"aleenfestus@gmail.com"},"email":"aleenfestus@gmail.com"},"repository":{"url":"git+https://github.com/allwells/react-scroll-reveal.git","type":"git"},"_npmVersion":"11.0.0","description":"Production-ready, type-safe scroll animation library for React","directories":{},"sideEffects":false,"_nodeVersion":"20.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","tsup":"^8.1.0","react":"^18.3.1","eslint":"^8.57.0","ts-jest":"^29.1.5","prettier":"^3.3.2","react-dom":"^18.3.1","typescript":"^5.5.3","@types/jest":"^29.5.12","@types/node":"^20.14.10","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","eslint-plugin-react":"^7.34.3","@testing-library/react":"^16.0.0","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.6","@typescript-eslint/parser":"^7.16.0","eslint-plugin-react-hooks":"^4.6.2","@typescript-eslint/eslint-plugin":"^7.16.0"},"peerDependencies":{"gsap":">=3.0.0","react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=6.0.0","@headlessui/react":">=1.0.0"},"peerDependenciesMeta":{"gsap":{"optional":true},"framer-motion":{"optional":true},"@headlessui/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-scroll-reveal_1.0.3_1751339908851_0.6574394859736974","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@allwells/react-scroll-reveal","version":"1.0.4","description":"Production-ready, type-safe scroll animation library for React","author":{"name":"The Web Architect","email":"aleenfestus@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/allwells/react-scroll-reveal.git"},"homepage":"https://github.com/allwells/react-scroll-reveal#readme","bugs":{"url":"https://github.com/allwells/react-scroll-reveal/issues"},"keywords":["react","scroll","animation","reveal","intersection-observer","typescript","gsap","framer-motion","headless-ui"],"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./client":{"types":"./dist/client.d.ts","import":"./dist/client.mjs","require":"./dist/client.js"}},"sideEffects":false,"scripts":{"build":"tsup","dev":"tsup --watch","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","prepublishOnly":"npm run build","release":"npm run build && changeset publish"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=6.0.0","gsap":">=3.0.0","@headlessui/react":">=1.0.0"},"peerDependenciesMeta":{"framer-motion":{"optional":true},"gsap":{"optional":true},"@headlessui/react":{"optional":true}},"devDependencies":{"@changesets/cli":"^2.27.7","@testing-library/jest-dom":"^6.4.6","@testing-library/react":"^16.0.0","@types/jest":"^29.5.12","@types/node":"^20.14.10","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@typescript-eslint/eslint-plugin":"^7.16.0","@typescript-eslint/parser":"^7.16.0","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-plugin-react":"^7.34.3","eslint-plugin-react-hooks":"^4.6.2","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","prettier":"^3.3.2","react":"^18.3.1","react-dom":"^18.3.1","ts-jest":"^29.1.5","tsup":"^8.1.0","typescript":"^5.5.3"},"engines":{"node":">=14.0.0"},"publishConfig":{"access":"public"},"_id":"@allwells/react-scroll-reveal@1.0.4","gitHead":"66e7be003737ebbcf50495d7c4f14e56cee70edd","_nodeVersion":"20.18.1","_npmVersion":"11.0.0","dist":{"integrity":"sha512-XtTK3E/bJQBCpB9WR1XmXMbNJorU6TMXY34tUJ9/6gyagi15QqG7LwmgJRSAmvgE4a0f2UgcYE8PFPOSQD1azQ==","shasum":"1a1319a2e4e80cf2df47b6b78085b319ba73588f","tarball":"https://registry.npmjs.org/@allwells/react-scroll-reveal/-/react-scroll-reveal-1.0.4.tgz","fileCount":19,"unpackedSize":122014,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIERMZMnLwKDg2SeR6dAwh82iinbh+tWizhB+tNtnP9zkAiAro2WtzYsf6q5v1ZxgW1tYIYP33z9L7bNVH9hE3h4n5Q=="}]},"_npmUser":{"name":"allwells","email":"aleenfestus@gmail.com","actor":{"name":"allwells","email":"aleenfestus@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"allwells","email":"aleenfestus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-scroll-reveal_1.0.4_1751341114387_0.2138977857253921"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-01T02:19:42.735Z","modified":"2025-07-01T03:38:34.732Z","1.0.0":"2025-07-01T02:19:42.992Z","1.0.1":"2025-07-01T02:27:04.285Z","1.0.2":"2025-07-01T02:49:34.722Z","1.0.3":"2025-07-01T03:18:29.023Z","1.0.4":"2025-07-01T03:38:34.587Z"},"bugs":{"url":"https://github.com/allwells/react-scroll-reveal/issues"},"author":{"name":"The Web Architect","email":"aleenfestus@gmail.com"},"license":"MIT","homepage":"https://github.com/allwells/react-scroll-reveal#readme","keywords":["react","scroll","animation","reveal","intersection-observer","typescript","gsap","framer-motion","headless-ui"],"repository":{"type":"git","url":"git+https://github.com/allwells/react-scroll-reveal.git"},"description":"Production-ready, type-safe scroll animation library for React","maintainers":[{"name":"allwells","email":"aleenfestus@gmail.com"}],"readme":"# React Scroll Reveal\n\nA production-ready, type-safe scroll animation library for React applications. Reveal elements with beautiful animations as they enter the viewport using IntersectionObserver, with support for GSAP, Framer Motion, and Headless UI.\n\n[![npm version](https://img.shields.io/npm/v/@allwells/react-scroll-reveal.svg)](https://www.npmjs.com/package/@allwells/react-scroll-reveal)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@allwells/react-scroll-reveal)](https://bundlephobia.com/package/@allwells/react-scroll-reveal)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Features\n\n- 🎨 **20+ Built-in Animations** - Fade, slide, zoom, rotate, flip, and more\n- 🚀 **Multiple Animation Engines** - Choose between Framer Motion, GSAP, or Headless UI\n- 📦 **Tree-Shakable** - Only bundle what you use\n- 🔒 **Fully Type-Safe** - Written in TypeScript with strict typing\n- ⚡ **Performance Optimized** - Efficient IntersectionObserver usage with batching\n- 🌐 **SSR Compatible** - Works with Next.js, Gatsby, and other SSR frameworks\n- ♿ **Accessibility First** - Respects prefers-reduced-motion\n- 🎛️ **Highly Configurable** - Global config, custom animations, and fine control\n- 🪝 **Hooks API** - Use animations programmatically\n- 📱 **Responsive** - Works on all devices and screen sizes\n\n## Installation\n\n```bash\nnpm install @allwells/react-scroll-reveal framer-motion gsap @headlessui/react\n# or\nyarn add @allwells/react-scroll-reveal framer-motion gsap @headlessui/react\n# or\npnpm add @allwells/react-scroll-reveal framer-motion gsap @headlessui/react\n```\n\n## Quick Start\n\n```tsx\nimport { ScrollReveal } from '@allwells/react-scroll-reveal';\n\nfunction App() {\n return (\n \n

Hello World!

\n \n );\n}\n```\n\n## Animation Types\n\n| Animation | Description |\n|-----------|-------------|\n| `fade` | Simple fade in |\n| `fadeUp` | Fade in from bottom |\n| `fadeDown` | Fade in from top |\n| `fadeLeft` | Fade in from right |\n| `fadeRight` | Fade in from left |\n| `slideUp` | Slide in from bottom |\n| `slideDown` | Slide in from top |\n| `slideLeft` | Slide in from right |\n| `slideRight` | Slide in from left |\n| `zoom` | Scale from 0.8 to 1 |\n| `zoomIn` | Scale from 0 to 1 |\n| `zoomOut` | Scale from 1.2 to 1 |\n| `rotate` | Rotate 180 degrees |\n| `rotateLeft` | Rotate from -90 degrees |\n| `rotateRight` | Rotate from 90 degrees |\n| `flip` | 3D flip on Y axis |\n| `flipX` | 3D flip on X axis |\n| `flipY` | 3D flip on Y axis |\n| `blur` | Blur effect |\n| `bounce` | Bounce animation |\n\n## Basic Usage\n\n### Simple Animation\n\n```tsx\n\n
This will fade in
\n\n```\n\n### With Options\n\n```tsx\n\n \n

Animated Card

\n

This slides up every time it enters the viewport

\n \n\n```\n\n### Custom Animation\n\n```tsx\n\n
Custom animated element
\n\n```\n\n## Global Configuration\n\nWrap your app with `ScrollRevealProvider` to set default options:\n\n```tsx\nimport { ScrollRevealProvider } from '@allwells/react-scroll-reveal';\n\nfunction App() {\n return (\n \n \n \n );\n}\n```\n\n## Using Different Animation Engines\n\n### Framer Motion (Default)\n\n```tsx\n\n
Animated with Framer Motion
\n\n```\n\n### GSAP\n\n```tsx\n\n
Animated with GSAP
\n\n```\n\n### Headless UI\n\n```tsx\n\n
Animated with Headless UI Transition
\n\n```\n\n## Hooks API\n\n### useScrollReveal\n\nFor programmatic control:\n\n```tsx\nimport { useScrollReveal } from '@allwells/react-scroll-reveal';\n\nfunction Component() {\n const ref = useRef(null);\n const { isInView, hasAnimated, reveal, hide, reset } = useScrollReveal({\n ref,\n threshold: 0.1,\n once: true\n });\n\n return (\n
\n {isInView ? 'In view!' : 'Not in view'}\n \n \n \n
\n );\n}\n```\n\n### useScrollRevealControls\n\nControl multiple elements:\n\n```tsx\nimport { useScrollRevealControls } from '@allwells/react-scroll-reveal';\n\nfunction Controller() {\n const controls = useScrollRevealControls();\n\n return (\n
\n \n \n
\n );\n}\n```\n\n## Advanced Examples\n\n### Staggered Animations\n\n```tsx\nfunction StaggeredList({ items }) {\n return (\n
\n {items.map((item, index) => (\n \n {item.text}\n \n ))}\n
\n );\n}\n```\n\n### Combining Animations\n\n```tsx\nimport { combineAnimations, animationPresets } from '@allwells/react-scroll-reveal';\n\nconst customAnimation = combineAnimations(\n animationPresets.fade,\n animationPresets.slideUp,\n { initial: { scale: 0.8 }, animate: { scale: 1 } }\n);\n\n\n
Combined animations
\n\n```\n\n### Responsive Animations\n\n```tsx\nfunction ResponsiveReveal({ children }) {\n const isMobile = useMediaQuery('(max-width: 768px)');\n \n return (\n \n {children}\n \n );\n}\n```\n\n## API Reference\n\n### ScrollReveal Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `children` | `ReactNode` | - | Content to animate |\n| `animationType` | `AnimationType` | `'fade'` | Predefined animation |\n| `customAnimation` | `CustomAnimation` | - | Custom animation config |\n| `delay` | `number` | `0` | Delay in milliseconds |\n| `duration` | `number` | `600` | Duration in milliseconds |\n| `once` | `boolean` | `true` | Animate only once |\n| `threshold` | `number \\| number[]` | `0.1` | IntersectionObserver threshold |\n| `rootMargin` | `string` | `'0px'` | IntersectionObserver margin |\n| `disabled` | `boolean` | `false` | Disable animations |\n| `engine` | `'framer' \\| 'gsap' \\| 'headless'` | `'framer'` | Animation engine |\n| `className` | `string` | - | CSS class name |\n| `style` | `CSSProperties` | - | Inline styles |\n| `onReveal` | `() => void` | - | Callback on reveal |\n| `onHide` | `() => void` | - | Callback on hide |\n\n### useScrollReveal Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `ref` | `RefObject` | - | Element reference |\n| `threshold` | `number \\| number[]` | `0.1` | Visibility threshold |\n| `rootMargin` | `string` | `'0px'` | Root margin |\n| `once` | `boolean` | `true` | Trigger only once |\n| `disabled` | `boolean` | `false` | Disable observer |\n| `root` | `Element \\| null` | `null` | Custom root element |\n\n## Performance Tips\n\n1. **Use `once={true}`** for elements that don't need to re-animate\n2. **Batch animations** with similar configurations using the provider\n3. **Disable on mobile** if performance is a concern:\n ```tsx\n \n ```\n4. **Use appropriate thresholds** - higher values (0.3-0.5) for important content\n5. **Limit simultaneous animations** - stagger delays for lists\n\n## Browser Support\n\n- Chrome/Edge: ✅ Full support\n- Firefox: ✅ Full support\n- Safari: ✅ Full support (iOS 12.2+)\n- IE11: ❌ Not supported (IntersectionObserver polyfill required)\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## License\n\nMIT © The Web Architect\n\n## Acknowledgments\n\nBuilt with:\n- [Framer Motion](https://www.framer.com/motion/)\n- [GSAP](https://greensock.com/gsap/)\n- [Headless UI](https://headlessui.dev/)\n- [TypeScript](https://www.typescriptlang.org/)","readmeFilename":"README.md"}