Shake to Undo — Free DeviceMotion API Shake Gesture Snippet

Shake-to-undo is the classic mobile gesture — popularized by iOS's system-wide "shake to undo" — where physically shaking the device reverses the last action. This snippet wires up the real devicemotion event and a genuine acceleration-delta shake detector, following the same honesty pattern as canvas audio frequency bars: feature-detect the real API, use it when available, and fail into a fallback that is fully functional rather than a degraded placeholder.

Real acceleration-delta shake detection

Every devicemotion event carries accelerationIncludingGravity, an {x, y, z} reading in m/s². A single reading can't detect a shake — shaking means the *change* between consecutive readings is large. The handler computes delta = |x - lastX| + |y - lastY| + |z - lastZ| between the current and previous reading, and only counts it as a shake when delta exceeds SHAKE_THRESHOLD — genuine motion-derived detection, not a timer or a fake trigger. A 1-second cooldown (lastShakeTime) stops one violent shake from firing the undo repeatedly.

Why three different code paths exist

DeviceMotion has three distinct real-world states this snippet handles explicitly: (1) the API doesn't exist at all — most desktop browsers — detected with typeof DeviceMotionEvent === 'undefined'; (2) it exists but iOS 13+ gates it behind DeviceMotionEvent.requestPermission(), which can only be called from a real user gesture like a tap, never on page load; (3) it exists and needs no explicit permission (most Android browsers), so listening can start immediately. Each path is feature-detected rather than assumed, and each fails toward the same visible, working fallback.

The fallback is not a lesser path

The tap button calls the exact same doUndo(source) function the real shake gesture calls — it isn't a "sorry, no shake for you" message, it's the complete undo interaction, just triggered by a tap instead of an accelerometer reading. This matters because DeviceMotion is denied constantly in practice: desktop has no sensor, many browsers block it by default for privacy, and users often decline the iOS permission prompt. A demo (or a real feature) that goes dead in those cases looks broken; one where the fallback *is* the feature does not.

A live motion meter for feedback

Rather than a shake being invisible until it fires, meterFill's width is driven by the same delta value every event, scaled against the threshold — so on a supporting device you can see motion energy building toward the shake threshold in real time, turning an otherwise invisible sensor reading into visible feedback.

Customizing it

Tune SHAKE_THRESHOLD and the cooldown window for stricter or looser detection, swap doUndo for your real undo logic, or pair this with a notification permission prompt pattern for other gated-permission APIs.