Open Source

mousepad.js

Pointer intelligence for the web. mousepad.js unifies gestures (tap, double-tap, long-press, swipe, pan, pinch, rotate), cursor effects (magnet, 3D tilt, follow), precise trackpad detection, and idle tracking across mouse, touch, pen, and trackpad — on top of Pointer Events in 2.9KB gzipped with zero dependencies and strict TypeScript types.

TypeScriptPointer EventsGesturesTrackpad DetectionMagnetic Buttons3D Tilt CardsCursor EffectsIdle DetectionZero DependenciesESM + UMDOpen SourceMIT License

Visit Live Site

The Problem

Challenge

Modern web apps juggle mouse, trackpad, touch, and pen — but the tooling hasn't kept up. Hammer.js is abandoned, interact.js is heavy and opinionated, use-gesture is React-only, and the browser gives you no way to tell a mouse wheel from a trackpad swipe or a pinch-to-zoom from a scroll. Teams reinvent gesture detection, cursor effects, and input-type heuristics in every project — usually badly, and never with a single consistent event model. What was missing: a tiny, framework-agnostic library built on Pointer Events that handles the full input picture, including trackpad nuance.

Our Approach

Strategy

We built mousepad.js on the unified Pointer Events API so every gesture — tap, double-tap, long-press, swipe, pan, pinch, rotate — works identically across mouse, trackpad, touch, and pen. For cursor effects, `MousePad.magnet` pulls buttons toward the cursor with spring easing, `MousePad.tilt` gives cards 3D rotation with a radial spotlight (pure CSS transforms, GPU-composited), and `MousePad.follow` runs a smooth trailing cursor. The trackpad detector inspects `WheelEvent.deltaMode` and delta granularity to distinguish mouse wheels from trackpad swipes, and surfaces pinch-to-zoom as a separate typed event. A global cursor tracker emits `move`, `idle`, and `active` events for auto-hiding chrome (video controls, UI overlays). The landing page is a live playground: move the cursor to see trail + velocity + input kind detection in real time, gesture any element with a streaming event console, and hover magnetic buttons backed by spring physics.

The Solution

Result

A 2.9KB gzipped, MIT-licensed pointer library with zero runtime dependencies. Ships ESM, UMD, and full TypeScript declarations. One API (`MousePad`) covers gestures, magnetic buttons, 3D tilt cards, trackpad detection, idle detection, and a global cursor stream. Deployed on Vercel at mousepadjs.techzunction.com with a self-hosting documentation site that exercises every feature — gestures, trackpad detection, 3D tilt cards, magnetic CTAs, idle state — directly in the browser.

Screenshots