MotionZoom

An image that zooms from its place to full screen; drag it away to close.

WebReact NativeOverlays

Try it

Preparing the example…

JavaScript is off. The code below is the complete example.

App.jsx

import { MotionZoom, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

// Small generated landscapes, so the example needs no image files.
function landscape(sky, hill, sun) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
    <rect width="300" height="200" fill="${sky}"/>
    <circle cx="220" cy="62" r="26" fill="${sun}"/>
    <path d="M0 150 Q80 90 160 140 T300 120 V200 H0Z" fill="${hill}"/>
    <path d="M0 175 Q110 130 200 170 T300 160 V200 H0Z" fill="#0e2e24"/>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

const photos = [
  landscape('#eaf6f0', '#43c58f', '#ffffff'),
  landscape('#cfe8dc', '#176b52', '#f4faf7'),
  landscape('#176b52', '#2e8f6d', '#eaf6f0'),
  landscape('#f4faf7', '#2e8f6d', '#43c58f'),
  landscape('#0e2e24', '#176b52', '#43c58f'),
  landscape('#43c58f', '#176b52', '#ffffff'),
];

export default function App({ margin = 24, radius = 14, spring = 'default' }) {
  return (
    <div className="stage">
      <div className="grid">
        {photos.map((photo) => (
          <MotionZoom
            key={photo}
            src={photo}
            width={300}
            height={200}
            margin={margin}
            transition={motionTokens.spring[spring]}
            style={{ borderRadius: radius }}
            className="photo"
          />
        ))}
      </div>
      <p className="hint">Click a photo. Drag it away, click or press Escape to close.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  cursor: zoom-in;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

Shortest usage

Photo.jsx

<MotionZoom
  src={photo.thumb}
  zoomSrc={photo.full}
  width={240}
  height={160}
  style={{ objectFit: 'cover', borderRadius: 12 }}
/>;

What it handles for you

A click, Enter or Space zooms the image from where it is to fill the screen inside margin.
The zoomed copy starts exactly as the thumbnail looks, with its object-fit crop and corner radius.
zoomSrc fades in once it has loaded.
A click, Escape or dragging away closes it; a quick throw closes too, and a short drag springs back.

Use it for

A photo grid.
A product gallery.
Images inside a blog post.

Props

Prop	Type	Default	Description
`src`	`string`		The image shown in place.
`zoomSrc`	`string`		A larger image shown once it has loaded; keep the same aspect ratio.
`margin`	`number`	`24`	Space kept around the zoomed image in pixels.
`disabled`	`boolean`	`false`	Turns zooming off.
`onZoomChange`	`(zoomed) => void`		Runs with `true` when zoomed and `false` when closed.
`backdropStyle`	`CSSProperties`		Inline style for the backdrop.
`transition`	`Transition`	`spring`	A timing curve `{ duration, easing }` or a spring `{ tempo: 'spring', spring }`. Springs keep their momentum when interrupted.

Other props go to the rendered element, so className, style and event handlers work as usual.

Web and React Native

The overlay exists only while zoomed (a top-layer dialog on the web), so the image can sit anywhere, even inside a paragraph. Other props go to the img.

On React Native pass source and zoomSource; the overlay is a transparent Modal.

Used in these examples

Photo feedSwipe through photos, jump with thumbnails, open any photo full screen and pull up its details.MotionPagerMotionHighlightMotionZoomMotionSheet