100%
drag to pan · scroll to zoom

Pan, zoom, and scroll for any JS runtime

Physics-based momentum and bounce. Web, React, React Native — one core engine, thin adapters.

npm install @panscale/core @panscale/web
Get StartedMore Demos
✓Physics-based momentum & bounce
✓Snap scrolling & pagination
✓Pinch-to-zoom with proper gesture handling
✓Works with images, canvas, WebGL, any element
✓TypeScript-first, tree-shakeable
✓Zero dependencies (core)

Packages

@panscale/core

Runtime-agnostic engine — momentum, bounce, snap, constraints.

Docs →npm
@panscale/web

DOM adapter — mouse, touch, wheel, pointer, gesture events.

Docs →npm
@panscale/react

React hooks and components for pan/zoom views.

Docs →npm
@panscale/react-native

React Native adapter with Animated transforms.

Docs →npm

Quick start

import { createWebScaler } from "@panscale/web";

const scaler = createWebScaler(element, {
  contentWidth: 1600,
  contentHeight: 900,
  zooming: true,
  bouncing: true,
  callback: (values) => {
    content.style.transform =
      `matrix(${values.zoom},0,0,${values.zoom},${values.translateX},${values.translateY})`;
  },
});