mousepad.js — pointer intelligence for the web

One API, every input

Everything the pointer can do.

Backed by Pointer Events — mouse, trackpad, touch, pen all flow through the same API.

✣

Gestures

tap, doubletap, longpress, pan, swipe, pinch, rotate — unified across inputs.

const g = MousePad.gesture(el);
g.on('swipe', e => e.direction);

✦

Cursor tracker

Global position, velocity, and idle state. React to the cursor from anywhere.

MousePad.cursor.on('move',
  ({x, y, speed}) => ...);

➤

Magnetic buttons

One call, and your button pulls toward the cursor with configurable strength + easing.

MousePad.magnet(btn, {
  range: 140, strength: 0.5
});

◎

3D tilt cards

Tilt-on-hover with perspective, scale, and easing. GPU-composited.

MousePad.tilt(card, {
  max: 15, scale: 1.04
});

◌

Trackpad detect

Heuristic distinguishes mouse from trackpad from wheel events. Unified pinch-zoom stream.

MousePad.trackpad.isTrackpad
MousePad.trackpad.on('pinch', ...);

◐

Idle detection

Fires when the cursor hasn't moved. Perfect for auto-hiding chrome or pausing heavy animation.

cursor.on('idle',   () => hideUI());
cursor.on('active', () => showUI());

Install

2.9KB gzipped. Zero runtime dependencies. Ships ESM, UMD, and TypeScript declarations.

npm install @techzunction/mousepad.js

import MousePad from '@techzunction/mousepad.js';

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 utilities
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 + precise wheel
MousePad.trackpad.on('pinch', ({dy}) => zoom(dy));
if (MousePad.trackpad.isTrackpad) enableSmoothScroll();

Gestures

Tap, double-tap, long-press, swipe, pan, pinch, rotate — all on the same element. Works on trackpad (click + drag), touch screens, and pen. Every gesture logs below.

tap · double-tap · long-press
swipe (flick fast) · pan (drag)

Gesture me

tap

Magnetic buttons

Hover near any button — it leans toward the cursor with spring easing. Range and strength are configurable per element.

3D tilt cards

Cursor position inside the card drives rotation, perspective, scale, and a radial spotlight — entirely CSS transforms, GPU-composited.

Pointer Events

One API for mouse, trackpad, touch, and pen.

Tiny

2.9KB gzipped. Every feature opt-in.

Typed

TypeScript-strict. Every option documented.

Zero deps

No runtime dependencies. Nothing to audit.

Trackpad detection

Scroll over the boxes below. The library reads WheelEvent.deltaMode + delta granularity to distinguish mouse wheels from trackpad swipes. Pinch-to-zoom on a trackpad comes through as a separate event.

Input kind

waiting…

Scroll inside any box to detect.

Last wheel Δ

—

dx, dy from the last wheel event.

Pinch zoom

—

Trackpad pinch (Ctrl+wheel) is separated.

Idle detection

Stop moving your cursor for 2 seconds. The state flips to idle. Classic use case: auto-hide video controls or cursor UI.

ACTIVE

Last move: just now

Event console

Every gesture, trackpad event, and idle state change streams here.

0 events