HomeComputer ScienceSwipe-to-Dismiss Gesture Physics

Swipe-to-Dismiss Gesture Physics

Interactive 3D simulator of the swipe-to-dismiss gesture used in mobile card lists: drag a card, release it, and watch the real fling/spring-back decision — distance threshold OR velocity threshold — play out with constant-deceleration fling and critically-damped spring-back physics.

Computer Science3DEasy60 FPS📱 Mobile-adapted⇄ 2D version
mobile-ux-ui-patterns ↗ Open standalone

Mobile list rows — an email you swipe to archive, a chat you swipe to mute — all run the same gesture-recognition decision under the hood: at the moment your finger lifts, the platform checks whether the drag crossed a distance threshold OR the release velocity crossed a fling threshold, and either one alone is enough to commit the dismiss. This simulator renders a real card stack with an InstancedMesh backdrop, lets you drag the front card with your pointer exactly as you would on a phone, and on release runs the actual decision the way Android's ViewConfiguration and iOS's UIPanGestureRecognizer do it — a constant-deceleration fling out of frame if dismissed, or a critically-damped spring back to center if not, with live distance, velocity, settle-time and projected-fling-distance readouts so you can see exactly which test fired.

⚙ Under the hood

Drag a mobile list card and release it: watch the real swipe-to-dismiss decision — a distance threshold OR a velocity threshold — trigger either a constant-deceleration fling off-screen or a critically-damped spring back to center, with live drag distance, velocity, settle-time and fling-distance readouts.

mobile-uxgesture-recognitionswipekinematicsspring-dampingtouch-interaction

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)