Motion
Motion is W4's voice: precise, quick, a little playful, never in the way. It has two jobs: tell you what is going on, and make the game feel well made.
Principles
- Nothing teleports. Things that appear, move, resize or leave are animated.
- Input is never blocked. You can act during any animation, and animations retarget smoothly from where they are.
- Your action answers at once. The first reaction to a click comes within a tenth of a second.
- Enter with care, leave quickly. Things arrive a little slower than they go.
- One hero motion at a time. Ambient motion is always the quietest thing on screen.
Springs and curves
Things you touch use springs: a small overshoot that settles, and a motion that keeps its speed if you interrupt it. Things that appear on their own use a long, soft ease-out. Fades never overshoot. Straight linear motion is only for spinners and scrolling credits.
What to expect
| Moment | Feel |
|---|---|
| Hover on a control | swells a few per cent and brightens in about 150 ms, with a soft tick |
| Press | dips at once while held, springs back on release |
| Tooltip | appears after the pointer rests 0.4 s, fades in with a short slide |
| Panels and dialogs | fade and settle in, around a quarter of a second |
| Lists and grids | items arrive one after another, 30 to 50 ms apart |
| Numbers | count to their new value instead of jumping |
| Result title | slams in with a brief shake and bloom, then the cards follow |
Nothing you wait on animates longer than about 400 ms.
Loading
A wait is never silent.
- Over about a tenth of a second, something shows a sign of life.
- Over a second, a progress bar or spinner appears with words.
- The words name the step: "Reading the map", "Loading models 14 of 51", "Waiting for 2 players".
- A known fraction is a real bar that eases toward the true value and never goes backwards. An unknown length is a spinner or indeterminate bar, never a fake percentage.
- A stuck step is admitted after a few seconds, and an error offers Retry.
- In multiplayer loads every player has a bar and a ready tick.
- Lists that are loading show shimmering placeholders so the layout does not jump.
Skippable and cheap
Esc or a click finishes a transition at once. Animation only runs while something is moving, so a still screen costs nothing. See Accessibility for the reduce motion setting.