[ Kine UI ]
GitHub
REGISTRY: PINCH_TO_ZOOM

Pinch To Zoom

> Bring both hands into the frame. Pinch your thumb and index fingers together on each hand, then pull apart or push together to dynamically scale the DOM element.

Live Preview

> The preview requires mounting the webcam tracking engine. Click below to initialize.

Installation

system.out
$
npx @opendevsociety/kine-ui@latest add pinch-to-zoom

Example Usage

import { PinchToZoom } from "@/components/kine/gestures/PinchToZoom";

export default function GalleryImage() {
  return (
    <div className="w-full h-screen flex items-center justify-center">
      {/* Wrap any standard DOM element to enable spatial scaling */}
      <PinchToZoom minScale={0.5} maxScale={5} zoomSpeed={3}>
        <img src="/assets/art.jpg" alt="Gallery artwork" />
      </PinchToZoom>
    </div>
  );
}