Back to Motion Prompt examples
UI component names · #15
Stepper (+/−)
Plus and minus buttons that change a number by one. Pressing + three times raises the number from 1 to 4, and pressing − three times brings it back to 1; the number pops on each press.
Choosing & switchingstepperquantitynumber-inputincrementdecrementplus-minusspin-button
Full motion specification
How the movement works
Use it for small whole numbers changed one at a time, such as quantity or number of guests.
- 014.5 s cycle on a 542×191 card. A 200×60 box (radius 12) at (171, 52): "−" in the left 60 px, a blue "+" in the right 60 px, and a bold 30 px number in the middle.
- 02Clicks: + at 0.9, 1.35, 1.8 s (1 → 4), − at 2.8, 3.25, 3.7 s (4 → 1).
- 03The pressed segment is tinted light blue from 0.05 s before to 0.15 s after each click.
- 04Number: on each press its scale goes linearly from 1.18 back to 1 over 0.25 s, and it is blue meanwhile.
Prompt
Make the quantity field a stepper: + and − change it by one, and the number pops slightly for 0.25 s on each press.