Kit parts

Gimbal key

A floating action button on a sprung arm. A round foot is fixed to the surface; the key sits on a short rod above it, hinged where the rod meets the foot. The page’s own movement, the list scrolling behind it, kicks the arm off level; it wobbles, then the spring pulls it back and it settles level once the page is still. The key underneath never stops being a real button: the tilt is a picture of the mechanism, not a reason to press it differently.

On this page

Anatomy
Variants
States
Props and options
Usage notes
Accessibility
Related parts

Anatomy

The spring is three pure functions: gimbalNudge turns a scroll delta into a push on the arm’s velocity; gimbalStep moves a damped harmonic oscillator on (angle, velocity) one dt forward, pulled back toward zero by its own stiffness and slowed by its own damping, underdamped enough that a hard push really does wobble before it settles; gimbalSettled says when both are small enough to call it level and still. Under prefers-reduced-motion the loop is never started: a nudge changes nothing, because the mechanism only ever changes a state, never plays a motion of its own.

Variants

A narrower card

States

Level
Tilted
Settling
Focus

Props and options

Name	Kind	Description
for	attribute	The box whose scroll drives it. Left off, the window’s own scroll drives it instead.
nudge(px)	method	Push the arm as if the page had moved that far. For a box with nothing to scroll, or a test.
angle · settled	property	The current tilt in radians, and whether it has come to rest level.
data-gimbal-nudge	attribute
gimbalNudge · gimbalStep · gimbalSettled	function	The spring, pure: a push, one step of it settling, and whether it has come to rest.

Usage notes

Scroll the list of runs: the key tilts on its arm as the list moves and settles level the moment it stops. No room to scroll on a small screen? Press Shake the page for the same push.

It is a real button underneath: Tab reaches it, Enter and Space press it, and a screen reader hears its name whatever the arm is doing.
The tilt is drawn, never announced: nothing about the angle is read out, because it changes what the key looks like, not what it does.
Named with aria-label when it shows only a glyph, like any icon-only key; the foot and the rod are aria-hidden, decoration around the one control.
Under reduced motion the spring is never stepped: the key is simply drawn level, always, because the mechanism only changes a state, never plays a motion.