Example
Jelly button, taken apart
A press that squashes and springs back — the canonical playful micro-interaction, with every spring value exposed so you can feel what each one does.
From the Motion track
The jelly button is the "hello world" of tasteful motion: on press it scales slightly wider and shorter, then springs back with a small overshoot that settles in about 400ms. It's a perfect first thing to take apart because the feel lives entirely in three numbers — stiffness, damping, and mass.
Open the lesson and drive the controls beside the demo, then hit Open all snippets in the playground to change the spring and watch the personality shift from snappy to wobbly. It animates only transform, respects prefers-reduced-motion, and stays a real, keyboard-operable <button>.