This project is made with the help of Claude (1M context).

MousePadJS

Pointer intelligence for the web.

Gestures, cursor effects, and trackpad smarts — unified across mouse, touch, pen, and trackpad. Tiny, TypeScript-first.

Why MousePadJS?

Hammer.js is abandoned. interact.js is heavy. use-gesture is React-only. Modern apps need a tiny, framework-agnostic library built on Pointer Events that just handles the full input picture — including trackpad nuance like pinch-to-zoom and mouse-vs-trackpad detection.

MousePadJS does that in 2.9KB, zero deps.

Quick Start

npm install @buildwithdarsh/mousepadjs

import MousePad from '@buildwithdarsh/mousepadjs';

MousePad.init();

// Gestures — works on mouse, trackpad, touch, and pen
const g = MousePad.gesture(card);
g.on('tap',       (e) => console.log(e.x, e.y));
g.on('doubletap', (e) => zoomIn(e));
g.on('longpress', (e) => showMenu(e));
g.on('swipe',     (e) => console.log(e.direction));
g.on('pan',       (e) => translate(e.dx, e.dy));
g.on('pinch',     (e) => setScale(e.scale));
g.on('rotate',    (e) => setAngle(e.angle));

// Cursor effects
MousePad.magnet(btn,  { range: 120, strength: 0.4 });
MousePad.tilt(card,   { max: 15, scale: 1.04 });
MousePad.follow(cursor, { ease: 0.15 });

// Global cursor tracker
MousePad.cursor.on('move',   ({ x, y, speed }) => ...);
MousePad.cursor.on('idle',   () => hideChrome());
MousePad.cursor.on('active', () => showChrome());

// Trackpad detection
MousePad.trackpad.on('pinch', ({ dy }) => zoom(dy));
if (MousePad.trackpad.isTrackpad) enableSmoothScroll();

API

Gestures — MousePad.gesture(el, opts?)

Unified recognizer for a single element. Returns a Gesture instance with an event emitter.

| Event | Fires when | Payload | |---|---|---| | tap | Quick press & release | { x, y, pointerType } | | doubletap | Two taps within 300ms | same as tap | | longpress | Held still ≥ 500ms | { x, y, duration, pointerType } | | pan | Drag movement | { dx, dy, tx, ty, vx, vy, speed } | | swipe | Fast pan + release | { direction, distance, velocity, duration } | | pinch | Two-finger zoom | { scale, center } | | rotate | Two-finger rotate | { angle, center } |

Options: tapMaxDistance, tapMaxDuration, doubleTapMaxGap, longPressDuration, swipeMinVelocity, swipeMinDistance.

Cursor tracker — MousePad.cursor

| Event | Payload | |---|---| | move | { x, y, vx, vy, speed } | | idle | — | | active | — |

Properties: x, y, vx, vy, speed, idle. Method: setIdleTimeout(ms).

Cursor effects

| Helper | What it does | |---|---| | MousePad.magnet(el, opts) | Pulls element toward cursor when within range. | | MousePad.follow(el, opts) | Element follows cursor with easing. | | MousePad.tilt(el, opts) | 3D tilt-on-hover inside the element's own box. |

All helpers return a destroy function.

Trackpad — MousePad.trackpad

| Event | Payload | |---|---| | wheel | { dx, dy, kind, pinch: false } | | pinch | { dx, dy, kind, pinch: true } (ctrl+wheel = trackpad pinch) | | kind | 'mouse' \| 'trackpad' \| 'touch' \| 'unknown' |

Properties: kind, isTrackpad, isMouse.

License

MIT © Darsh Gupta