Sticky Header Condense
The display title scrolls away and a compact bar takes over, gaining its surface and rule on the way.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState, type UIEvent } from "react";
import { animate, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Sticky Header Condense
*
* The large screen title scrolls away and a compact bar takes over:
* the bar loses height, gains a surface and a rule, and the small titleAbout this pattern
The header treatment that gives a content screen its full height back. As the reader scrolls past the display title, the bar loses height, fades in a surface and a hairline rule, and the compact title rises into the space the back button leaves. The mechanism that matters is what is not happening: the two titles are separate elements at fixed sizes that cross over, never one heading being scaled down, because scaled type reads blurry mid-flight and cheap at the end. Height is a genuine size change here, so it runs as a short eased tween rather than a spring — a spring would overshoot the bar past its own resting height and take the rule with it. The threshold has hysteresis, which is what stops a trackpad hovering on the boundary from flickering the bar open and shut.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
The oversized screen title gives way to a compact bar title as the list scrolls under it.
Related patterns
- Profile Header ParallaxThe cover drifts at a fraction of the scroll while the avatar rides up and docks into the title bar.
- Expandable Detail CardA compact card that expands in place into a detail view — image and title travel continuously.
- Gallery Lightbox OpenThe pressed thumbnail flies out of the grid into the large view while the backdrop dims behind it.