Stretch header

At the top of a detail page, keep pulling: the hero image scales up by the overpull, the title on it fades out, a +104 pill counts the pixels. Let go and it settles back with a little overshoot. It does not bounce and finish; it follows the finger.

What it is

The hero image of a detail page that grows when you pull past the top, with the title fading so the picture takes over, and a soft return when you let go. It is the small gesture that separates a native-feeling product page from a web page: the content answers the finger instead of ignoring it. Common in property, travel, food and portfolio apps — anywhere a single photo leads.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@叨叨AI (Douyin) · 第 8 集「8 个高级交互提升 App 和小程序的质感差别」· 04 下拉把顶图拉大 Stretch Header