Touch Gestures
Advanced multi-touch gesture recognition with pan, pinch, rotate, tap, swipe support and momentum physics
Pro features
What the Pro version adds to this component.
Multi-Touch Support
Pan, pinch, rotate, tap, swipe with up to 10 simultaneous touch points
Desktop Fallback
Full mouse drag support for desktop browsers with gesture simulation
Pinch to Zoom
Smooth pinch gestures with configurable scale limits and momentum
Rotation Gestures
Two-finger rotation with optional angle snapping
Haptic Feedback
Optional vibration feedback with customizable intensity
Visual Indicators
Touch point indicators and gesture type display for debugging
Installation
Install via CLI
npx @moontra/moonui-cli add touch-gesturesUsage
Touch & Gesture Me!
Pan • Pinch • Rotate
Waiting for a gesture…
Examples
Pinch to Zoom Image
Interactive image zoom with scale limits and smooth transitions. `onPinch` feeds the live scale readout, and `containerClassName` styles the gesture container itself — TouchGestures has no plain `className` prop.
Rotate Gesture with Snap
Rotation gestures with angle snapping. `onRotate` writes the current angle straight into the badge under each tile, so the snap increments are observable.
Tap, Double Tap & Long Press
Comprehensive tap gesture recognition. Each card reports which of the three gestures fired, so the 300ms double-tap window and the 500ms long-press hold are both verifiable in place.
Advanced Features: Preview, Indicators & Momentum
Enable visual feedback, touch indicators, and momentum scrolling