Image Zoom

"use client"

import {
  Image,
  ImageZoom,
} from "@animate-ui/react/primitives/effects/image-zoom"

export default function ImageZoomDemo() {
  return (
    <ImageZoom
      aria-label="Black porcelain mug, zoomable"
      className="rounded-2xl border bg-white"
      width={256}
      height={256}
    >
      <Image
        src="/demos/mug.webp"
        alt="Black porcelain mug with a square handle and natural clay accents"
        width={256}
        height={256}
      />
    </ImageZoom>
  )
}

View code

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import { Image, ImageZoom } from '@animate-ui/react/primitives/effects/image-zoom';

export function ProductPhoto() {
  return (
    <ImageZoom width={320} height={320} aria-label="Product photo, zoomable">
      <Image src="/product.webp" alt="The product" />
    </ImageZoom>
  );
}

Image renders an img by default; pass as to use your framework's image component (as={NextImage}).

AnimationCopy Anchor Link

• Hovering zooms in to zoomScale on a spring, from the point under the pointer; moving the pointer pans the zoom.
• Clicking (or tapping on touch screens) toggles the zoom. The cursor shows whether a click zooms in or out.
• Under reduced motion, the zoom jumps instead of scaling.

API ReferenceCopy Anchor Link

ImageZoomCopy Anchor Link

ImageCopy Anchor Link

CreditsCopy Anchor Link

• Inspired by Jurre's Hover Zoom Framer component.