Motion UIComponentsComponent

Shrink header

A fixed header that condenses from full-height and transparent into a compact solid bar on scroll.

npx shadcn@latest add @motion/shrink-header
Install guideMotionScore

API reference

Components

<ShrinkHeader />

Fixed header root that publishes condense progress to its parts.

children?

ReactNode

Header children: ShrinkHeaderFill and ShrinkHeaderRow.

condenseDistance?

number = DEFAULT_CONDENSE_DISTANCE

Scroll distance (px) over which the header condenses. Default 220.

tallHeight?

number = DEFAULT_TALL_HEIGHT

Constant header height (px) at the top. Default 104.

compactHeight?

number = DEFAULT_COMPACT_HEIGHT

Fill visual height (px) when condensed. Default 54.

className?

string

Merged onto the <header> element.

<ShrinkHeaderFill />

Background fill layer that scales and fades in as the header condenses.

className?

string

Merged onto the fill element.

style?

CSSProperties

Merged onto the fill inline style.

<ShrinkHeaderRow />

Content row that recentres against the shrinking fill.

children?

ReactNode

Row contents: wordmark, nav and CTA.

className?

string

Merged onto the row element.

Hooks

useCondenseProgress

Raw condense progress (0 at top, 1 when fully condensed).

useCondenseProgress(): MotionValue<number>