Motion

Short, interruptible motion that confirms what happened and never makes anyone wait.

Notifications

Fig. 1 Press, toggle, open. Try each with a mouse, then with the keyboard: keyboard changes skip the motion.

Fast in, faster out

Every transition uses one strong ease-out curve. It covers most of the distance in the first few frames, so the interface answers at once, then settles gently. Exits run shorter than entrances, because once someone is done, the thing should get out of the way.

The curve is --ease-out, shared by every component.

Fig. 2 Ease-out against linear. Most of the change lands in the first third of the time.

Hover and color changes100–150ms

Button press150ms

Popup enter · exit150 · 100ms

Tab indicator, checkbox mark220ms

Drawer450ms

Fig. 3 How long each kind of motion takes.

Grow from the trigger

Menus, popovers, selects, and tooltips fade in and grow from 97% at the edge that opened them, so the eye follows where they came from. Buttons shrink a little while pressed with a pointer, and switches slide their thumb. Larger surfaces such as drawers take longer because they travel farther.

The keyboard and reduced motion

Someone moving by keyboard has already decided, so a popup opened from the keyboard appears at once, and keyboard toggles switch immediately. With reduced motion turned on, components keep their fades and drop the movement and scaling.

Build it

Press feedback lives in Button’s own classes, limited to pointer presses:

button.tsx

Popups share the same entrance and exit:

popover.tsx

styles/jzb-theme.css