Gestural affordance / peek

Partly revealing the next card, panel, or row action so the visible edge hints that you can swipe or drag.

show a bit of the next cardhint that you can swipethe next item sticking outpartly reveal the hidden actionhow do people know this slidesswipe hintwhy is that card cut off at the edgegestural affordence

See it

Live demo coming soon

What it is

A peek leaves part of offscreen content or an action visible so the cropped edge advertises a gesture. The sliver of the next carousel card says swipe sideways; a row shifted just enough to expose Archive says this item can move. It is a signifier for an interaction that otherwise has no visible control. Netflix leaves a sliver of the next title showing in every row for this reason, and iOS Mail teaches swipe by letting the row slide under your thumb until Archive appears behind it.

Use it when swiping, dragging, or pulling reveals useful secondary content, especially on first encounter. A persistent partial edge works for carousels and sheets. A one-time, small nudge can teach a row action after the relevant item appears.

The gotcha is ambiguity. A clipped card can look like a layout bug, and a row that twitches without revealing anything meaningful teaches nothing. Show enough of the destination to identify it, make the full gesture actually work, and keep a visible button for essential actions. Do not repeatedly animate the hint after someone has used or dismissed it.

Ask AI for it

Add a gestural peek to this horizontal card list. Size each card so 16px to 24px of the next card remains visible at rest, use CSS scroll-snap-type: x mandatory on the scroller and scroll-snap-align: start on each card, and preserve the page gutter with scroll-padding. On first encounter only, move the list 12px toward the next card and back over 300ms, then persist a dismissed flag after the first swipe. Skip that motion under prefers-reduced-motion, keep Previous and Next buttons visible, and label them for screen readers.

You might have meant

affordancediscoverabilitycarouselbottom sheetdrag and drop with drop target