How it works
The multi-pointer tracker keeps a map of active pointers. When a second pointer lands, the current pair distance is stored as the baseline; every pointermove recomputes the distance and converts its delta into a column count, clamped between two and six. Exiting is symmetric: any pointerup or pointercancel removes that finger, and the gesture ends when fewer than two remain. Column changes trigger a reflow that is negligible at single-digit card counts, and a short transform pulse on the grid container smooths the perceived step. The wheel path is simpler - one preventDefault plus a column increment per notch.
How to use this prompt
Suited to galleries, file managers, dashboard widgets, product grids - anywhere users should choose their own zoom level of information. Tell your AI how many density steps you want and what density maps to (columns versus card size), and insist on the Ctrl plus scroll fallback for desktop, or half your audience has no way in.
Tips for better results
Damp the pinch mapping - scale the delta by roughly a third before rounding, or tiny finger jitter cycles columns wildly. Suppress the browser's own zoom with touch-action: none on the container, and on iOS Safari also cancel the gesturestart event. Real products with large grids should pair column changes with FLIP animations so cards glide to new slots instead of teleporting. Finally, honor pointercancel: a finger sliding off the screen edge is far more common than a clean lift, and missing it leaves the gesture permanently stuck.