Back to Motion Prompt examples
UI component names · #03
Bottom sheet
A panel slides up from the bottom of the screen. A finger taps "View details" and a panel rises from the bottom; dragging its handle down closes it.
Opening & overlaysbottom-sheetsheetmodal-sheetmobileslide-updrag-to-dismisspanel
Full motion specification
How the movement works
Use it on mobile to show details or choices while keeping the current screen in view.
- 014.5 s cycle on a 542×191 card. A finger (semi-transparent circle, radius 17, white rim) taps the "View details" pill (170×36, bottom centre) at 1.0 s.
- 02Open amount: 0→1 over 1.05–1.45 s with easeOutCubic. Full-card scrim rgba(18,20,28) at opacity 0.36·a.
- 03Sheet: white, 136 tall, top corners radius 18, top edge at y = 191 − 136·a. Shadow blur 22, offset y −4. A 52×6 grab handle at top centre.
- 04Inside: a bold title bar and two rows with 26×26 icons.
- 05Close: the finger lands on the handle (271, 68) at 2.75 s and drags down over 3.0–3.6 s; a is multiplied by (1 − easeInOutCubic over 3.0–3.6 s), so the sheet follows the finger off the bottom.
Prompt
Show the details in a bottom sheet when "View details" is tapped: 40% of the screen tall, rising over 0.4 s, closing when dragged down.