Back to Motion Prompt examples
UI component names · #01
Modal dialog
A window opens in the middle while the page behind dims. Clicking "Open" dims the whole page and a small window scales up slightly into the centre; clicking × closes it.
Opening & overlaysmodalmodal-dialogdialogpopupoverlaybackdroplightboxconfirm
Full motion specification
How the movement works
Use it when the user must stop and deal with one thing, such as a confirmation or a short form.
- 014.5 s cycle on a 542×191 card. The cursor reaches the "Open" button (120×36, lower left) at 0.95 s and clicks at 1.0 s.
- 02Open amount a: 0→1 over 1.0–1.32 s with easeOutCubic. A full-card scrim rgba(18,20,28) at opacity 0.42·a.
- 03Window: white 280×140, radius 12, centred at (271, 97), shadow blur 24, offset y 8, alpha 0.25. Scale 0.9 + 0.1·a, opacity a.
- 04Inside: a bold title bar, two text lines, a blue 88×30 button at lower right and × at top right.
- 05Close: the cursor moves to × by 3.0 s and clicks at 3.3 s; a is multiplied by (1 − easeInOutCubic over 3.3–3.58 s).
Prompt
When the delete button is pressed, show a confirmation in a modal dialog. Dim the page about 40% and fade it in over 0.3 s with a slight scale-up.