Motion
One moment, three personalities.
The same moment, in all three personalities at once. A personality is a setting, so a product picks one and every component follows.
A list arriving. Roles: enter and sequence.
CalmThings fade. Nothing travels, shakes, or bounces.
- Target size
- Number of choices
- Response time
SnappyShort, straight, quick moves. No bounce.
- Target size
- Number of choices
- Response time
PlayfulThings grow in, overshoot, and celebrate big.
- Target size
- Number of choices
- Response time
How they differ
| Calm | Snappy | Playful | |
|---|---|---|---|
| Something appears | Fades in place | Rises 12 px, straight | Grows from 90% and rises 24 px |
| A button press | Shrinks to 98%, slowly | Shrinks to 95%, at once | Squashes to 88% and springs back |
| A wrong answer | Changes color only | Shakes 12 px | Shakes 24 px |
| A celebration | Pops to 103% | Pops to 112% | Pops to 120%, sparks fly 48 px |
| Bounce | None | None | Overshoots by about a quarter |
| Items in a group | 120 ms apart | 30 ms apart | 80 ms apart |
A check in the build fails if any two personalities become too alike in any role. If your device is set to reduce motion, all three columns will show the reduced version.