Reactive Image

🚀 A modern React image component library with interactive animations

Reactive Image provides beautiful, performant image animations for modern web applications. Built with TypeScript, optimized for performance, and designed for accessibility.

Features

• 8 Animation Variants: HoverSwitch, ZoomOnHover, TiltOnHover, ClickExpand, PanReveal, KenBurnsSequence, PolaroidStack, ScrollReactive
• 42+ Animation Types: Wide variety of effects and transitions
• Performance Optimized: GPU acceleration, lazy loading, image preloading
• TypeScript First: Full type safety and IntelliSense support
• Accessible: ARIA attributes, keyboard navigation, screen reader friendly
• Responsive: Mobile-friendly with touch support
• Zero Dependencies: Only requires React as peer dependency

Installation

npm install reactive-image
# or
yarn add reactive-image
# or
pnpm add reactive-image

Quick Start

import { ReactiveImage } from "reactive-image";

// Hover to switch between images
<ReactiveImage
  variant="hoverSwitch"
  src="/image1.jpg"
  hoverSrc="/image2.jpg"
  alt="Hover switch example"
/>

// Zoom effect on hover
<ReactiveImage
  variant="zoomOnHover"
  src="/image.jpg"
  alt="Zoom example"
  zoomScale={1.2}
/>

// 3D tilt effect
<ReactiveImage
  variant="tiltOnHover"
  src="/image.jpg"
  alt="Tilt example"
  animation="glare"
/>

// Click to expand modal
<ReactiveImage
  variant="clickExpand"
  src="/image.jpg"
  alt="Expand example"
  modalAnimation="scaleFade"
/>

// Pan reveal between two visuals
<ReactiveImage
  variant="panReveal"
  src="/wide.jpg"
  secondarySrc="/detail.jpg"
  alt="Pan reveal example"
  animation="spotlight"
  panAmount={40}
/>

// Ken Burns hero sequence
<ReactiveImage
  variant="kenBurnsSequence"
  src="/hero.jpg"
  alt="Ken Burns example"
  animation="dramatic"
  crossfadeDuration={1200}
/>

// Polaroid stack
<ReactiveImage
  variant="polaroidStack"
  src="/cover.jpg"
  alt="Polaroid collage"
  stack={[{ src: "/detail-1.jpg" }, { src: "/detail-2.jpg" }]}
  spreadAngle={28}
  shadow="strong"
/>

// Scroll reactive parallax
<ReactiveImage
  variant="scrollReactive"
  src="/story.jpg"
  alt="Scroll reactive hero"
  animation="tilt"
  parallaxOffset={80}
  scaleFrom={0.9}
/>

Animation Variants

HoverSwitch (8 animations)

Switch between two images on hover with smooth transitions.

• fade, crossfade, slide, slideUp, slideDown, zoom, blur, rotateY, scaleRotate

ZoomOnHover (10 animations)

Zoom and transform effects triggered by mouse hover.

• scale, scaleRotate, scaleBlur, scaleFade, scaleSlide, perspective, pulse, bounce, elastic

TiltOnHover (9 animations)

3D tilt effects that follow mouse movement.

• basic, glare, scale, perspective, bounce, elastic, magnetic, float, parallax

ClickExpand (9 animations)

Modal overlay activated by clicking the image.

• scaleFade, slideUp, slideDown, slideLeft, slideRight, springPop, zoomBounce, rotateIn, flipIn

PanReveal (3 animations)

Pan between crops or reveal an alternate image with cinematic wipes.

• slide, mask, spotlight

KenBurnsSequence (3 animations)

Play a cinematic sequence of zoom/pan keyframes—perfect for hero sections or carousels.

• Presets: classic, slowPan, dramatic
• Provide custom frames for bespoke timelines
• Control crossfadeDuration, pauseOnHover, autoplay, loop, overlayGradient, enableTouch

PolaroidStack (fan-out stack)

Fan-out polaroid-style cards on hover/touch.

• Controls: stack, stackDepth, spreadAngle, offsetStep, lift, shadow, rotationJitter, aspectRatio, enableTouch

ScrollReactive (4 animations)

Scroll-driven transforms for inline visuals and hero blocks.

• animation: fadeIn, parallax, scale, tilt
• Controls: parallaxOffset, scaleFrom, rotate, opacityFrom, triggerOffset, once, lifecycle callbacks (onEnter, onExit, onProgress)

Performance

• GPU Acceleration: All animations use CSS transforms and will-change properties
• 60fps Animations: Smooth performance on modern devices
• Optimized Loading: Smart image preloading and lazy loading support
• Bundle Size: ~54KB minified (no external dependencies)

Browser Support

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

TypeScript

This library is built with TypeScript and includes comprehensive type definitions.

import type { ReactiveImageProps, HoverSwitchProps } from "reactive-image";

License

MIT © Poyraz Avsever

Links

• 📖 Documentation
• 🎮 Interactive Demos
• 🐛 Issues