MotionZoom

Una imagen que se amplía desde su sitio a pantalla completa; arrástrala para cerrarla.

WebReact NativeSuperposiciones

Pruébalo

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo completo.

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;
}

Uso mínimo

Photo.jsx

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

Lo que resuelve por ti

Un clic, Intro o Espacio amplía la imagen desde donde está hasta llenar la pantalla dentro de margin.
La copia ampliada empieza exactamente con el aspecto de la miniatura, con su recorte object-fit y su radio de esquina.
zoomSrc aparece con un fundido cuando ha cargado.
Un clic, Escape o arrastrarla la cierran; un lanzamiento rápido también, y un arrastre corto vuelve con un resorte.

Úsalo para

Una cuadrícula de fotos.
Una galería de productos.
Imágenes dentro de una entrada de blog.

Props

Prop	Tipo	Por defecto	Descripción
`src`	`string`		La imagen que se muestra en su sitio.
`zoomSrc`	`string`		Una imagen más grande que se muestra cuando ha cargado; mantén la misma proporción.
`margin`	`number`	`24`	Espacio que se deja alrededor de la imagen ampliada, en píxeles.
`disabled`	`boolean`	`false`	Desactiva el zoom.
`onZoomChange`	`(zoomed) => void`		Se ejecuta con `true` al ampliar y con `false` al cerrar.
`backdropStyle`	`CSSProperties`		Estilo en línea del fondo.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

Las demás props van al elemento renderizado, así que className, style y los manejadores de eventos funcionan como siempre.

Web y React Native

La superposición solo existe mientras hay zoom (un dialog de la capa superior en la web), así que la imagen puede estar en cualquier sitio, incluso dentro de un párrafo. Las demás props van al img.

En React Native pasa source y zoomSource; la superposición es un Modal transparente.

Se usa en estos ejemplos

Feed de fotosPasa fotos deslizando, salta con las miniaturas, abre cualquier foto a pantalla completa y sube sus detalles.MotionPagerMotionHighlightMotionZoomMotionSheet