Bottom Sheet with Detents

Design a mobile bottom sheet that snaps between three detents: peek, half, and full screen. It should feel native to touch, with clear grab affordance and motion that explains where the sheet can land.

The sheet sits above the current screen and the background dims as it expands. The dimming should help separate the sheet from what’s behind it without making the underlying screen feel lost.

This is a navigation pattern, so the sheet needs to support moving from lightweight preview to deeper interaction without forcing a full page transition. Each detent should feel intentional, not like a random stop.

Focus on how content density changes across the three positions. The same sheet may need to reveal only a teaser at peek, a useful subset at half, and the full task or destination at full height.

Make the drag handle and top edge visually distinct enough that people know the sheet can be pulled before they try to scroll the content inside it.