Collapsing Large-Title Bar

Design an iOS-style navigation header that starts as a large title at the top of a scroll view and collapses into a compact inline title as content moves upward.

The same screen has to work in both moments: the expanded state feels roomy and anchored to the page, while the collapsed state frees space and keeps the title available during reading or browsing.

Treat the transition as part of the experience, not a separate screen. The title, back affordance, and any trailing actions should shift position and emphasis as the header compresses.

Make the scroll relationship feel intentional. The header should react to content movement in a way that matches native iOS navigation behavior, with no jump between states.

Use a title that is long enough to expose the collapse behavior clearly; short titles can make the transition look broken or unfinished.