Back to Motion Prompt examples
UI component names · #05
Dropdown (select)
Click a field to drop a list of options below it. Clicking the field opens four options below it; picking "Nagoya" closes the list and fills the field.
Opening & overlaysdropdowndropdown-menuselectpickercomboboxoptionsform
Full motion specification
How the movement works
Use it in a form when people pick one value from a fixed list.
- 014.5 s cycle on a 542×191 card. A 260×38 field (radius 8) shows a placeholder and a chevron; the cursor clicks it at 1.0 s.
- 02Open amount: 0→1 over 1.0–1.25 s with easeOutCubic. The list (white 260×112, shadow blur 18) fades in while dropping 6 px. The chevron turns 180° and the field border becomes 2 px blue.
- 03Four options 26 px apart (Tokyo, Osaka, Nagoya, Fukuoka in Japanese). As the cursor moves down, Osaka is highlighted light blue from 1.55 s and Nagoya from 1.95 s.
- 04Click on Nagoya at 2.3 s: the list closes over 2.3–2.45 s (1 − easeInOutCubic); the placeholder fades out over 2.2–2.3 s and "Nagoya" fades in over 2.32–2.42 s.
- 05Reset: Nagoya fades out over 3.9–4.08 s, then the placeholder returns over 4.1–4.3 s, so the two texts never overlap.
Prompt
Make the prefecture field a dropdown: open the options below it in 0.25 s and close it with the value filled in once one is picked.