vocab.design

interaction · web-platform

Pointer lock

also called mouse lock (mdn), mouse look (community), cursor lock (community)

Hiding the cursor and reading only its movement deltas, so input keeps flowing past the edges of the screen instead of stopping at them.

An ordinary pointer has a position, and a position has edges. Push the mouse right for long enough and the cursor arrives at the side of the screen and stops, while your hand keeps going and the interface hears nothing more. For anything where the movement itself is the input rather than the place it lands, that ceiling is the whole problem. Pointer lock removes it: the cursor is hidden and detached from the display, and the events keep coming as pure deltas, movementX and movementY, for as long as the hand keeps moving. There is no position to run out of because there is no longer a position at all.

The lineage is games and 3D. Mouse look in a first person view, orbiting a model in a CAD tool, and panning a canvas that is larger than any screen all want the same thing: turn by this much, not point at that spot. The scrubby slider is the same trade made small, and it runs into the same wall, since a value dragged far enough eventually reaches the edge of the window and stops changing. Locking the pointer is the honest fix for an unbounded scrub, which is why serious editing tools reach for it on their number fields and their colour wheels.

The API is deliberately awkward, because a page that can hide your cursor and swallow every movement is a page that can trap you. element.requestPointerLock() has to be called from a user gesture, the browser shows its own notice the first time, and Escape always releases the lock without the page being able to prevent it. That last rule is why an interface built on it must say so: draw a reticle where the cursor used to be, so the reader can see that the pointer is somewhere else now, and print the escape convention on the screen rather than hoping people guess. Locking is also asynchronous and can fail, so the correct place to switch a view into its locked mode is the pointerlockchange event, never the line after the request.

Two practicalities decide whether the result feels good. The deltas are raw device movement, which means they are not scaled by the operating system’s acceleration curve in the same way a cursor is, so a sensitivity multiplier and a way to change it are part of the feature rather than a nicety. And nothing that only works while locked can be the only route to an action, because a trackpad, a touchscreen, and any assistive pointing device either cannot lock or cannot supply steady deltas. Keyboard steps, a numeric field, or a plain slider have to sit behind the gesture.

Which word?

If you wantsay
input is relative movement, not a screen positionpointer lock
a drag must keep its grip after leaving the elementpointer capture

Related

See also: Orbit

Sources