Profile Header Parallax
The cover drifts at a fraction of the scroll while the avatar rides up and docks into the title bar.
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 } from "react";
import {
animate,
motion,
useReducedMotion,
useScroll,
useTransform,
} from "motion/react";About this pattern
Depth is the point: the cover keeps a share of the scroll instead of leaving with it, so the profile reads as content sliding over art rather than one flat sheet moving. Every value — the cover's lag and zoom, the avatar's size and travel, the bar's fade — is a projection of the scroll position, which means the header is always exactly where the reader left it, with nothing easing toward a target it was told about after the fact. The avatar hands its monogram between two fixed type sizes as it shrinks, so no glyph is ever scaled by the disc that carries it, and the bar it lands in is opaque, so content passes behind rather than through. Scroll is read from the component's own pane rather than the window, which is what lets the same header work inside a card, a modal or a preview stage.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Profile page
The profile banner lags behind the timeline and the name settles into the navigation bar.
Related patterns
- Sticky Header CondenseThe display title scrolls away and a compact bar takes over, gaining its surface and rule on the way.
- Story Ring ProgressA segmented ring traces around the avatar, one arc per clip, then goes quiet.
- Account SwitchThe chosen avatar travels up into the header slot while the one it replaces goes back down into the list.