# Motion Parallax Header

Long report or case-study page whose hero collapses into a bar with the title, review status and current section.

- id: `motion-parallax-header`
- Page: https://agentic-ui-kit.com/components/motion-parallax-header
- Live preview: https://agentic-ui-kit.com/live/component/motion-parallax-header

## Install

```bash
agentic-ui add motion-parallax-header
npx shadcn@4.17.0 add @agentic-ui/motion-parallax-header
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-linked-parallax, scroll-driven-timeline, layered-depth, condensing-sticky-bar, scroll-spy-sections, personality-depth-policy, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** knowledge, saas, marketing, travel, operations
- **Interaction:** scroll, click, keyboard-navigation
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Long report or case-study page whose hero collapses into a bar with the title, review status and current section., Documentation or knowledge-base article with a decorative header and section links that follow the scroll., Destination or product detail page where a layered illustration adds depth without moving the content.
- **Avoid when:** Dense operational dashboards or data tables where the header must stay fixed and compact from the first pixel., Pages shorter than one viewport, where there is nothing to collapse or track., Vestibular-sensitive contexts that must stay motion-free even without reduced motion set; use profile none, which keeps the condensed bar.
- **Preserve when adapting:** depth-cap-per-personality, static-fallback-keeps-condensed-bar, inert-hidden-bar, scroll-spy-aria-current
- **Replace when adapting:** layer-artwork, hero-copy-and-facts, section-list
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion