Motion lab / 5 rounds

Can you copy 5 hidden animation curves by eye alone?

The top ball moves with a hidden easing curve. Drag the two handles until the orange ball moves exactly like it. No graph of the answer until you submit.

Round 1 / 5 · watch the top ball

target
yours
targetyour curve

Watch both balls travel together. Where does the top one hurry, hesitate, or overshoot?

Your curve · drag the handles

time →progress ↑

Your five curves

Rule of thumb from the Material motion guidelines: small UI changes sit around 100 to 300 ms, and things that leave the screen should be faster than things that arrive. The curve decides how long it feels.

Sources: easing definitions from easings.net (Andrey Sitnik, Ivan Solovev) and the W3C CSS Easing Functions Level 1 specification; standard curve from Material Design 3 motion tokens. Score is 100 minus the average gap between the two position curves, sampled 80 times.