How it works
The gesture pipeline is simple state tracking. On pointerdown you record the start position; on pointermove you measure the downward drag distance and map it to three synchronized outputs: the header scales up (1 plus a coefficient of the pull, capped around 1.4x), the overlay title fades (opacity drops to zero by roughly 40 percent of the max pull), and the content shell nudges down slightly. The rubber-band feel comes from a damping function applied to the raw distance - once the pull passes a threshold, each additional pixel counts for a fraction of one, so resistance grows with depth.
Release hands everything to spring transitions: the header returns with a slight overshoot curve so it swings back like released elastic rather than snapping to zero. Performance stays clean because the drag path only touches transform and opacity - never height, never layout properties - so the gesture holds 60 frames per second even while the browser paints nothing new each frame.
How to use this prompt
Any scrolling page with a hero image benefits: profiles, article headers, product pages, galleries. Send the prompt with your header structure and scroll container so the AI wires the boundary detection correctly. In production the trigger is usually scroll-past-top; this demo uses a direct drag for clarity, and the mapping logic is identical - just tell the AI which trigger you want.
Tips for better results
Keep the stretch coefficient between 0.3 and 0.5 and cap total scale at 1.5x; beyond that it reads cartoonish. Fade the title faster than the image scales so text never appears stretched. Add will-change: transform to the header so the first drag does not stutter on layer promotion. If the page uses native scrolling, add overscroll-behavior: contain to the scroll container, or the browser's own pull-to-refresh will fight your gesture.