{"id":50959120,"url":"https://github.com/poyrazavsever/reactive-image","last_synced_at":"2026-06-18T11:31:58.958Z","repository":{"id":323145334,"uuid":"1090868633","full_name":"poyrazavsever/reactive-image","owner":"poyrazavsever","description":"reactive-image is a lightweight and flexible image component library for React and Next.js. It introduces a variant-based system that makes it easy to add interactive visual behaviors such as hover transitions, zoom effects, click-to-expand modals, and motion-based animations.","archived":false,"fork":false,"pushed_at":"2025-12-18T09:45:54.000Z","size":752,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-21T16:58:33.644Z","etag":null,"topics":["animation","component","image","image-animation","image-component","motion","nextjs","react","react-image","reactive-image"],"latest_commit_sha":null,"homepage":"https://reactive-image.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/poyrazavsever.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-06T08:46:09.000Z","updated_at":"2025-12-18T09:45:58.000Z","dependencies_parsed_at":"2025-12-15T17:00:44.271Z","dependency_job_id":null,"html_url":"https://github.com/poyrazavsever/reactive-image","commit_stats":null,"previous_names":["poyrazavsever/reactive-image"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/poyrazavsever/reactive-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/poyrazavsever","download_url":"https://codeload.github.com/poyrazavsever/reactive-image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34489036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","component","image","image-animation","image-component","motion","nextjs","react","react-image","reactive-image"],"created_at":"2026-06-18T11:31:56.349Z","updated_at":"2026-06-18T11:31:58.937Z","avatar_url":"https://github.com/poyrazavsever.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"./public/tr/logo/logo.png\" width=\"64\" height=\"64\"\u003e\n\n# Reactive Image\n\n**Reactive Image** - A powerful, interactive, and customizable visual component collection for React applications. Delivers stunning animations and smooth transitions to enhance user experience.\n\n![Version](https://img.shields.io/badge/version-1.2.0-blue.svg)\n![License](https://img.shields.io/badge/license-ISC-green.svg)\n![React](https://img.shields.io/badge/react-%E2%89%A518.0.0-blue.svg)\n![TypeScript](https://img.shields.io/badge/typescript-%E2%89%A55.0.0-blue.svg)\n![Size](https://img.shields.io/badge/size-~15kb-lightgrey.svg)\n\n## Features\n\n### **8 Powerful Interactive Variants**\n\n- **HoverSwitch** - Image switching on mouse hover\n- **ZoomOnHover** - Mouse-driven zoom effects\n- **TiltOnHover** - 3D tilt and perspective effects\n- **ClickExpand** - Click-to-expand modal viewing\n- **PanReveal** - Cinematic slide, mask, and spotlight reveals\n- **KenBurnsSequence** - Cinematic zoom/pan storyboards for hero blocks\n- **PolaroidStack** - Fan-out polaroid stacks that lift on hover/touch\n- **ScrollReactive** - Scroll-driven fades, parallax, scale, and tilt transforms\n\n### **Performance Focused**\n\n- Optimized animations with modern CSS transforms\n- RequestAnimationFrame-based smooth motion\n- Lazy loading support\n- Minimal bundle size (~15kb)\n\n### **Fully Customizable**\n\n- 42+ different animation types\n- CSS-in-JS or external stylesheet support\n- Custom timing and easing functions\n- Flexible sizing for responsive design\n\n### **Multi-Platform Support**\n\n- Special optimization for touch devices\n- Gyroscope support (mobile devices)\n- Keyboard navigation (accessibility)\n- Compatible with all modern browsers\n\n### **Developer Friendly**\n\n- **Full TypeScript** support and type safety\n- Comprehensive API reference and documentation\n- React 18+ and Next.js compatibility\n- ESM and CommonJS export support\n\n### **Accessibility**\n\n- ARIA labels and roles\n- Screen reader compatibility\n- Keyboard navigation support\n- `prefers-reduced-motion` support\n\n## Quick Start\n\n### Installation\n\n```bash\n# npm\nnpm install reactive-image\n\n# yarn\nyarn add reactive-image\n\n# pnpm\npnpm add reactive-image\n\n# bun\nbun add reactive-image\n```\n\n### Basic Usage\n\n```jsx\nimport { ReactiveImage } from \"reactive-image\";\n\nfunction App() {\n  return (\n    \u003cReactiveImage\n      variant=\"zoomOnHover\"\n      src=\"/image.jpg\"\n      alt=\"Beautiful landscape\"\n      zoomScale={1.3}\n      animation=\"elastic\"\n    /\u003e\n  );\n}\n```\n\n## Variants and Examples\n\n### 1. HoverSwitch - Image Switching\n\nTransitions between different images when mouse hovers over the element.\n\n```jsx\n// Slide animation\n\u003cReactiveImage\n  variant=\"hoverSwitch\"\n  src=\"/image1.jpg\"\n  hoverSrc=\"/image2.jpg\"\n  alt=\"Before and after\"\n  animation=\"slide\"\n  slideDirection=\"right\"\n  timing={{ duration: 400, easing: \"ease-out\" }}\n/\u003e\n\n// 3D rotation effect\n\u003cReactiveImage\n  variant=\"hoverSwitch\"\n  src=\"/front-face.jpg\"\n  hoverSrc=\"/back-face.jpg\"\n  alt=\"Card flip\"\n  animation=\"rotateY\"\n  timing={{ duration: 600 }}\n/\u003e\n\n// Crossfade transition\n\u003cReactiveImage\n  variant=\"hoverSwitch\"\n  src=\"/day.jpg\"\n  hoverSrc=\"/night.jpg\"\n  alt=\"Day night transition\"\n  animation=\"crossfade\"\n  preloadHover={true}\n/\u003e\n```\n\n**Available Animations:**\n\n- `slide` - Horizontal/vertical sliding\n- `crossfade` - Smooth transition\n- `zoom` - Zoom-in transition\n- `blur` - Blur effect\n- `rotateY` - 3D rotation\n- `slideUp/slideDown` - Vertical sliding\n- `scaleRotate` - Scaling + rotation\n\n### 2. ZoomOnHover - Zoom Effects\n\nVarious zoom animations and customizations.\n\n```jsx\n// Basic zoom\n\u003cReactiveImage\n  variant=\"zoomOnHover\"\n  src=\"/product.jpg\"\n  alt=\"Product detail\"\n  zoomScale={1.25}\n  animation=\"scale\"\n  origin=\"center\"\n/\u003e\n\n// Mouse-following zoom\n\u003cReactiveImage\n  variant=\"zoomOnHover\"\n  src=\"/map.jpg\"\n  alt=\"Interactive map\"\n  zoomScale={1.5}\n  origin=\"cursor\"\n  followCursor={true}\n  animation=\"scale\"\n/\u003e\n\n// Elastic bounce effect\n\u003cReactiveImage\n  variant=\"zoomOnHover\"\n  src=\"/artwork.jpg\"\n  alt=\"Art piece\"\n  zoomScale={1.4}\n  animation=\"elastic\"\n  timing={{ duration: 600 }}\n  rotation={5}\n/\u003e\n\n// 3D perspective zoom\n\u003cReactiveImage\n  variant=\"zoomOnHover\"\n  src=\"/modern-design.jpg\"\n  alt=\"Modern design\"\n  animation=\"perspective\"\n  zoomScale={1.3}\n  rotation={15}\n/\u003e\n```\n\n**Zoom Types:**\n\n- `scale` - Simple scaling\n- `scaleRotate` - Scaling with rotation\n- `scaleBlur` - With blur effect\n- `scaleFade` - With opacity change\n- `perspective` - 3D perspective\n- `elastic` - Elastic bounce\n- `bounce` - Bounce effect\n- `pulse` - Pulse effect\n\n### 3. TiltOnHover - 3D Tilt Effects\n\nRealistic 3D tilt and perspective animations.\n\n```jsx\n// Basic tilt effect\n\u003cReactiveImage\n  variant=\"tiltOnHover\"\n  src=\"/card.jpg\"\n  alt=\"Interactive card\"\n  tiltMax={15}\n  animation=\"basic\"\n  axis=\"both\"\n/\u003e\n\n// Tilt with light reflection\n\u003cReactiveImage\n  variant=\"tiltOnHover\"\n  src=\"/premium-product.jpg\"\n  alt=\"Premium product\"\n  tiltMax={12}\n  animation=\"glare\"\n  glare={{\n    enabled: true,\n    maxOpacity: 0.4,\n    position: \"mouse\"\n  }}\n/\u003e\n\n// Magnetic attraction effect\n\u003cReactiveImage\n  variant=\"tiltOnHover\"\n  src=\"/interactive.jpg\"\n  alt=\"Magnetic effect\"\n  animation=\"magnetic\"\n  tiltMax={10}\n  enableTouch={true}\n/\u003e\n\n// Gyroscope support (mobile)\n\u003cReactiveImage\n  variant=\"tiltOnHover\"\n  src=\"/mobile.jpg\"\n  alt=\"Mobile optimized\"\n  gyroscope={true}\n  tiltMax={20}\n  axis=\"both\"\n/\u003e\n```\n\n**Tilt Animations:**\n\n- `basic` - Basic 3D tilt\n- `glare` - Light reflection effect\n- `scale` - Scaling with tilt\n- `perspective` - Advanced 3D depth\n- `magnetic` - Magnetic attraction\n- `float` - Floating effect + shadow\n- `parallax` - Multi-layer movement\n- `bounce/elastic` - Flexible return\n\n### 4. ClickExpand - Modal Expansion\n\nClick-to-expand modal viewing.\n\n```jsx\n// Spring pop animation\n\u003cReactiveImage\n  variant=\"clickExpand\"\n  src=\"/gallery.jpg\"\n  alt=\"Gallery image\"\n  modalAnimation=\"springPop\"\n  backdrop=\"blur\"\n  caption=\"Beautiful landscape photo\"\n  modalSize=\"lg\"\n/\u003e\n\n// Glassmorphism effect\n\u003cReactiveImage\n  variant=\"clickExpand\"\n  src=\"/artwork.jpg\"\n  alt=\"Art piece\"\n  modalAnimation=\"rotateIn\"\n  backdrop=\"glass\"\n  caption=\"Modern art collection\"\n  customBackdrop={{\n    backgroundColor: \"rgba(100, 50, 150, 0.15)\",\n    backdropFilter: \"blur(20px) saturate(200%)\"\n  }}\n/\u003e\n\n// 3D flip entrance animation\n\u003cReactiveImage\n  variant=\"clickExpand\"\n  src=\"/portfolio.jpg\"\n  alt=\"Portfolio work\"\n  modalAnimation=\"flipIn\"\n  backdrop=\"dark\"\n  modalSize=\"xl\"\n  animationDuration={400}\n/\u003e\n```\n\n**Modal Animations:**\n\n- `scaleFade` - Scaling + fade\n- `slideUp/slideDown` - Up/down sliding\n- `springPop` - Spring bounce\n- `zoomBounce` - Zoom + bounce\n- `rotateIn` - Rotate entrance\n- `flipIn` - 3D flip\n\n### 5. PanReveal - Cinematic Reveals\n\nLayer two visuals and reveal them with directional slides, masks, or spotlight focus.\n\n```jsx\n// Slide reveal\n\u003cReactiveImage\n  variant=\"panReveal\"\n  src=\"/before.jpg\"\n  secondarySrc=\"/after.jpg\"\n  alt=\"Before vs after\"\n  animation=\"slide\"\n  direction=\"right\"\n  panAmount={40}\n  timing={{ duration: 600, easing: \"cubic-bezier(0.22, 0.61, 0.36, 1)\" }}\n/\u003e\n\n// Spotlight tour\n\u003cReactiveImage\n  variant=\"panReveal\"\n  src=\"/city-day.jpg\"\n  secondarySrc=\"/city-night.jpg\"\n  alt=\"City transformation\"\n  animation=\"spotlight\"\n  maskSize={45}\n  followCursor\n  gradientColor=\"rgba(255,255,255,0.35)\"\n/\u003e\n```\n\n**PanReveal Controls**\n\n- `animation`: `slide`, `mask`, `spotlight`\n- `direction`: `left`, `right`, `up`, `down`, `diagonal` (slide only)\n- `secondarySrc`: optional alternate asset\n- `panAmount`, `maskShape`, `maskSize`, `followCursor`, `timing`\n\n### 6. KenBurnsSequence - Cinematic Hero Sequences\n\nPlay curated zoom + pan timelines that make hero sections feel alive.\n\n```jsx\n// Dramatic preset\n\u003cReactiveImage\n  variant=\"kenBurnsSequence\"\n  src=\"/hero.jpg\"\n  alt=\"Cinematic hero\"\n  animation=\"dramatic\"\n  crossfadeDuration={1100}\n  overlayGradient=\"linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.55))\"\n  pauseOnHover\n/\u003e\n\n// Custom frame stack\nconst canyonFrames = [\n  { zoom: 1.12, panX: -12, panY: 8, duration: 4800 },\n  { zoom: 1.22, panX: 6, panY: -4, rotate: 0.8, duration: 5200 },\n  { zoom: 1.15, panX: 2, panY: 10, rotate: -0.5, duration: 5000 },\n];\n\n\u003cReactiveImage\n  variant=\"kenBurnsSequence\"\n  src=\"/canyon.jpg\"\n  alt=\"Custom timeline\"\n  frames={canyonFrames}\n  crossfadeDuration={1000}\n  pauseOnHover={false}\n  loop={false}\n  enableTouch\n/\u003e\n```\n\n**KenBurns Controls**\n\n- Presets: `classic`, `slowPan`, `dramatic`\n- `frames`: custom timeline overrides\n- `crossfadeDuration`, `pauseOnHover`, `autoplay`, `loop`, `overlayGradient`, `enableTouch`\n\n### 7. PolaroidStack - Fan-Out Photo Stacks\n\nLayered polaroid-style cards that spread apart on hover or touch.\n\n```jsx\n\u003cReactiveImage\n  variant=\"polaroidStack\"\n  src=\"/cover.jpg\"\n  alt=\"Travel collage\"\n  stack={[\n    { src: \"/detail-1.jpg\" },\n    { src: \"/detail-2.jpg\" },\n  ]}\n  spreadAngle={28}\n  offsetStep={16}\n  lift={18}\n  shadow=\"strong\"\n/\u003e\n```\n\n**PolaroidStack Controls**\n\n- `stack`: additional cards under the primary `src`\n- `stackDepth`: limit how many cards render\n- `spreadAngle`, `offsetStep`, `lift`, `rotationJitter`\n- `shadow`: `soft | medium | strong`\n- `aspectRatio`, `enableTouch`, `onStackEnter/Leave`\n\n### 8. ScrollReactive - Scroll-Tied Motion\n\nDrive parallax, fades, scales, or tilt with scroll progress (exposed as `--ri-scroll-progress` for theming).\n\n```jsx\n\u003cReactiveImage\n  variant=\"scrollReactive\"\n  src=\"/hero.jpg\"\n  alt=\"Scroll reactive hero\"\n  animation=\"tilt\"\n  parallaxOffset={80}\n  scaleFrom={0.9}\n  rotate={10}\n  opacityFrom={0.4}\n  triggerOffset={120}\n  once\n/\u003e\n```\n\n**ScrollReactive Controls**\n\n- `animation`: `fadeIn`, `parallax`, `scale`, `tilt`\n- `parallaxOffset`, `scaleFrom`, `rotate`, `opacityFrom`\n- `triggerOffset`, `once`, `enableTouch`\n- Lifecycle: `onEnter`, `onExit`, `onProgress`\n\n## Advanced Customization\n\n### Custom Timing Settings\n\n```jsx\n\u003cReactiveImage\n  variant=\"zoomOnHover\"\n  timing={{\n    duration: 500, // Animation duration (ms)\n    delay: 100, // Start delay (ms)\n    easing: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\", // Custom easing\n  }}\n/\u003e\n```\n\n### CSS Customization\n\n```jsx\n// With Tailwind CSS\n\u003cReactiveImage\n  variant=\"tiltOnHover\"\n  className=\"w-64 h-64 mx-auto\"\n  imgClassName=\"rounded-xl shadow-lg\"\n  tiltClassName=\"shadow-2xl\" // Added during tilt\n/\u003e;\n\n// With Styled Components\nconst StyledImage = styled(ReactiveImage)`\n  border-radius: 16px;\n  overflow: hidden;\n\n  \u0026:hover {\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  }\n`;\n```\n\n### Event Callbacks\n\n```jsx\n\u003cReactiveImage\n  variant=\"hoverSwitch\"\n  onAnimationStart={() =\u003e {\n    console.log('Animation started');\n    // Analytics tracking\n    gtag('event', 'image_hover', { image_id: 'hero-image' });\n  }}\n  onAnimationEnd={() =\u003e {\n    console.log('Animation completed');\n  }}\n/\u003e\n\n// Custom callbacks for tilt\n\u003cReactiveImage\n  variant=\"tiltOnHover\"\n  onTiltStart={({ tiltX, tiltY }) =\u003e {\n    console.log('Tilt started:', { tiltX, tiltY });\n  }}\n  onTiltMove={({ mouseX, mouseY, tiltX, tiltY }) =\u003e {\n    // Real-time mouse tracking\n    updateParallaxLayers(mouseX, mouseY);\n  }}\n/\u003e\n```\n\n## Mobile and Touch Support\n\n```jsx\n// Optimization for touch devices\n\u003cReactiveImage\n  variant=\"zoomOnHover\"\n  enableTouch={true}        // Enable touch events\n  zoomScale={1.15}         // Smaller scale for mobile\n  timing={{ duration: 200 }} // Fast response\n/\u003e\n\n// Gyroscope support\n\u003cReactiveImage\n  variant=\"tiltOnHover\"\n  gyroscope={true}         // Use device orientation\n  tiltMax={25}            // Higher angle for gyroscope\n  axis=\"both\"             // Movement on both axes\n/\u003e\n```\n\n## Framework Integrations\n\n### Next.js App Router\n\n```jsx\n// app/components/Gallery.tsx\nimport { ReactiveImage } from \"reactive-image\";\n\nexport default function Gallery() {\n  return (\n    \u003cdiv className=\"grid grid-cols-3 gap-4\"\u003e\n      \u003cReactiveImage\n        variant=\"clickExpand\"\n        src=\"/images/photo1.jpg\"\n        alt=\"Gallery photo\"\n        modalAnimation=\"springPop\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Vite + React\n\n```jsx\n// src/components/ProductShowcase.jsx\nimport { ReactiveImage } from \"reactive-image\";\n\nexport function ProductShowcase({ products }) {\n  return (\n    \u003csection className=\"product-grid\"\u003e\n      {products.map((product) =\u003e (\n        \u003cReactiveImage\n          key={product.id}\n          variant=\"hoverSwitch\"\n          src={product.image}\n          hoverSrc={product.hoverImage}\n          alt={product.name}\n          animation=\"zoom\"\n        /\u003e\n      ))}\n    \u003c/section\u003e\n  );\n}\n```\n\n## Performance Tips\n\n### 1. **Image Optimization**\n\n```jsx\n// Use WebP and modern formats\n\u003cReactiveImage\n  variant=\"zoomOnHover\"\n  src=\"/optimized.webp\"\n  alt=\"Optimized image\"\n  loading=\"lazy\" // Lazy loading\n  decoding=\"async\" // Async decode\n/\u003e\n```\n\n### 2. **Preloading Strategies**\n\n```jsx\n// Preload for critical images\n\u003cReactiveImage\n  variant=\"hoverSwitch\"\n  src=\"/hero.jpg\"\n  hoverSrc=\"/hero-alt.jpg\"\n  preloadHover={true} // Preload hover image\n  disableLazy={true} // Disable lazy loading for critical images\n/\u003e\n```\n\n### 3. **Animation Optimization**\n\n```jsx\n// Optimal settings for performance\n\u003cReactiveImage\n  variant=\"tiltOnHover\"\n  tiltMax={10} // Avoid excessively high angles\n  timing={{\n    duration: 150, // Short duration for fast response\n    reset: 300, // Fast reset\n  }}\n  containZoom={true} // Prevent layout shift\n/\u003e\n```\n\n## Browser Compatibility\n\n| Browser              | Minimum Version | Feature Support                    |\n| -------------------- | --------------- | ---------------------------------- |\n| **Chrome**           | 80+             | Full support (including gyroscope) |\n| **Firefox**          | 75+             | Full support (limited gyroscope)   |\n| **Safari**           | 13+             | iOS gyroscope support              |\n| **Edge**             | 80+             | Full support                       |\n| **Samsung Internet** | 13+             | Mobile optimization                |\n\n### Progressive Enhancement\n\n```jsx\n// Fallback for older browsers\n\u003cReactiveImage\n  variant=\"zoomOnHover\"\n  src=\"/image.jpg\"\n  alt=\"Description\"\n  // Animation in modern browsers, normal img in older ones\n  style={{\n    transition: \"transform 0.2s ease\", // Fallback CSS\n  }}\n/\u003e\n```\n\n## API Reference\n\n### General Props\n\n| Prop           | Type                          | Default  | Description                            |\n| -------------- | ----------------------------- | -------- | -------------------------------------- |\n| `src`          | `string`                      | -        | **Required.** Image URL                |\n| `alt`          | `string`                      | -        | **Required.** Alt text (accessibility) |\n| `variant`      | `VariantName`                 | -        | Animation type                         |\n| `className`    | `string`                      | -        | Container CSS class                    |\n| `imgClassName` | `string`                      | -        | Image CSS class                        |\n| `style`        | `CSSProperties`               | -        | Inline styles                          |\n| `loading`      | `\"eager\" \\| \"lazy\"`           | `\"lazy\"` | Loading strategy                       |\n| `decoding`     | `\"auto\" \\| \"sync\" \\| \"async\"` | `\"auto\"` | Decode strategy                        |\n\n### HoverSwitch Props\n\n| Prop             | Type                                  | Default       | Description               |\n| ---------------- | ------------------------------------- | ------------- | ------------------------- |\n| `hoverSrc`       | `string`                              | -             | Image to show on hover    |\n| `animation`      | `HoverSwitchAnimation`                | `\"crossfade\"` | Transition animation type |\n| `slideDirection` | `\"left\" \\| \"right\" \\| \"up\" \\| \"down\"` | `\"right\"`     | Slide direction           |\n| `timing`         | `TimingConfig`                        | `{}`          | Animation timing          |\n| `preloadHover`   | `boolean`                             | `true`        | Preload hover image       |\n| `enableTouch`    | `boolean`                             | `false`       | Touch support             |\n\n### ZoomOnHover Props\n\n| Prop           | Type            | Default    | Description            |\n| -------------- | --------------- | ---------- | ---------------------- |\n| `zoomScale`    | `number`        | `1.15`     | Zoom ratio             |\n| `animation`    | `ZoomAnimation` | `\"scale\"`  | Zoom animation type    |\n| `origin`       | `ZoomOrigin`    | `\"center\"` | Transform origin point |\n| `followCursor` | `boolean`       | `false`    | Follow mouse cursor    |\n| `containZoom`  | `boolean`       | `false`    | Prevent overflow       |\n\n### TiltOnHover Props\n\n| Prop        | Type                   | Default   | Description                  |\n| ----------- | ---------------------- | --------- | ---------------------------- |\n| `tiltMax`   | `number`               | `10`      | Maximum tilt angle (degrees) |\n| `animation` | `TiltAnimation`        | `\"basic\"` | Tilt animation type          |\n| `axis`      | `\"both\" \\| \"x\" \\| \"y\"` | `\"both\"`  | Tilt axis                    |\n| `glare`     | `GlareConfig`          | `{}`      | Light reflection settings    |\n| `gyroscope` | `boolean`              | `false`   | Gyroscope support            |\n\n### ClickExpand Props\n\n| Prop              | Type             | Default       | Description              |\n| ----------------- | ---------------- | ------------- | ------------------------ |\n| `modalAnimation`  | `ModalAnimation` | `\"scaleFade\"` | Modal entrance animation |\n| `backdrop`        | `BackdropType`   | `\"dim\"`       | Background effect        |\n| `modalSize`       | `ModalSize`      | `\"auto\"`      | Modal size               |\n| `caption`         | `string`         | -             | Image caption            |\n| `closeOnEsc`      | `boolean`        | `true`        | Close on ESC key         |\n| `closeOnBackdrop` | `boolean`        | `true`        | Close on backdrop click  |\n\n## Development and Contributing\n\n### Local Development Environment\n\n```bash\n# Clone the repository\ngit clone https://github.com/poyrazavsever/reactive-image.git\ncd reactive-image\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build package\nnpm run build:package\n\n# Build entire project\nnpm run build\n```\n\n### Project Structure\n\n```\nreactive-image/\n├── packages/\n│   └── reactive-image/           # Main library\n│       ├── src/\n│       │   ├── variants/         # Animation variants\n│       │   │   ├── HoverSwitch/\n│       │   │   ├── ZoomOnHover/\n│       │   │   ├── TiltOnHover/\n│       │   │   └── ClickExpand/\n│       │   ├── types.ts          # TypeScript types\n│       │   └── index.ts\n│       └── package.json\n├── apps/\n│   └── docs/                     # Documentation site\n└── app/                          # Demo application\n```\n\n### Adding New Variants\n\n1. **Create new folder:** `packages/reactive-image/src/variants/NewVariant/`\n2. **Required files:**\n   ```\n   NewVariant/\n   ├── index.ts           # Exports\n   ├── types.ts           # TypeScript types\n   ├── NewVariant.tsx     # Main component\n   ├── hooks.ts           # React hooks\n   ├── animations.ts      # CSS animations\n   └── README.md          # Documentation\n   ```\n3. **Add to main files:** `ReactiveImage.tsx` and `types.ts`\n\n### Testing\n\n```bash\n# Run all tests\nnpm test\n\n# Type checking\nnpm run tsc:check\n\n# Linting\nnpm run lint\n```\n\n### Contributing Guidelines\n\n- **Clean Code:** Follow ESLint and Prettier rules\n- **TypeScript:** Ensure full type safety\n- **Performance:** Animations should run at 60fps\n- **Accessibility:** Include ARIA labels and keyboard support\n- **Documentation:** Add documentation for new features\n- **Tests:** Write tests for critical functions\n\n## Community and Support\n\n### Bug Reports\n\nReport bugs through [GitHub Issues](https://github.com/poyrazavsever/reactive-image/issues).\n\n### Feature Requests\n\nUse [Discussions](https://github.com/poyrazavsever/reactive-image/discussions) for new feature suggestions.\n\n### Documentation\n\nVisit the [documentation site](https://reactive-image-docs.vercel.app) for detailed API reference and examples.\n\n### Showcase\n\nIf you're using Reactive Image in your project, share it in the [showcase](https://github.com/poyrazavsever/reactive-image/discussions/categories/showcase) section!\n\n## License\n\nThis project is licensed under **ISC License**. See [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- **Framer Motion** - For animation inspiration\n- **React Spring** - For physics-based animations\n- **Tailwind CSS** - For styling system examples\n- **React Community** - For continuous growth and support\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**If you like this project, don't forget to star it on GitHub!**\n\n[Star on GitHub](https://github.com/poyrazavsever/reactive-image) • [Documentation](https://reactive-image-docs.vercel.app) • [Demo](https://reactive-image-demo.vercel.app)\n\n**Developer:** [Poyraz Avsever](https://github.com/poyrazavsever)  \n**License:** ISC • **Version:** 1.0.0\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoyrazavsever%2Freactive-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpoyrazavsever%2Freactive-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoyrazavsever%2Freactive-image/lists"}