# Parallax Header

Hero photo for detail pages that stretches when you pull down and drifts away as you scroll, condensing into a compact bar. Solid, glass or colour-tinted bar styles.

> Composed · Pro · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/parallax-header
```

## Import

```tsx
import { useParallaxHeader, useParallaxHeaderContext, ParallaxHeaderHero, ParallaxHeaderBar, ParallaxHeaderButton, ParallaxHeader } from "@/components/ui/parallax-header/parallax-header";
```

## Variants

- `hotel` — Hotel gallery: `npx @lumioui/cli add pro/parallax-header-hotel`
- `playlist` — Artwork tinted: `npx @lumioui/cli add pro/parallax-header-playlist`
- `product` — Product photo: `npx @lumioui/cli add pro/parallax-header-product`
- `profile` — Profile cover: `npx @lumioui/cli add pro/parallax-header-profile`

## Props

### ParallaxHeader

| Prop | Type | Notes |
| --- | --- | --- |
| `state` | `ParallaxHeaderState` | From `useParallaxHeader()`. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### ParallaxHeaderHero

| Prop | Type | Notes |
| --- | --- | --- |
| `source?` | `ImageSourcePropType` | Photo that fills the hero. |
| `alt?` | `string` | Spoken description of the photo. |
| `media?` | `React.ReactNode` | Custom hero media (a gallery pager, a tinted artwork field) — rides  the same stretch and parallax as a photo. |
| `scrim?` | `boolean` | Bottom scrim so overlay copy survives bright photos. Default true when  there are overlay children. |
| `dim?` | `number` | How dark the hero gets as it scrolls away (0–1). Default 0.4. |
| `light?` | `boolean | string` | Pull light. true (default) — pulling down brightens the photo. A colour  — also lights it from above in that hue (sample it from the photo).  false — no pull light. |
| `className?` | `string` | — |
| `contentClassName?` | `string` | Classes for the overlay copy block pinned to the hero's bottom. |
| `children?` | `React.ReactNode` | Overlay copy (title, meta) — fades out as the hero scrolls away. |

### ParallaxHeaderBar

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Compact title — fades and rises in as the bar condenses. |
| `subtitle?` | `string` | Second line under the compact title. |
| `left?` | `React.ReactNode` | Leading slot — usually a back `ParallaxHeader.Button`. |
| `right?` | `React.ReactNode` | Trailing slot — share, save. |
| `surface?` | `"solid" | "glass" | "tint"` | Condensed surface: canvas + hairline, glass, or a content tint.  Default "solid". |
| `tint?` | `string` | Fill for `surface="tint"` — a colour sampled from the artwork. |
| `hue?` | `string` | The photo's hue handed to the condensed bar: a quiet wash over its  surface and, in dark, a lit hairline along its bottom edge. |
| `className?` | `string` | — |

### ParallaxHeaderButton

| Prop | Type | Notes |
| --- | --- | --- |
| `icon` | `IconName` | — |
| `accessibilityLabel` | `string` | Required — icon-only control. |
| `onPress?` | `() => void` | — |
| `active?` | `boolean` | Toggle state (save, like) — fills the glyph. |
| `activeColor?` | `keyof ColorTokens` | Glyph colour while active. Default "primaryText". |
| `className?` | `string` | — |

## Icons rendered

- `chevron-left` — /icons.html?i=chevron-left

Source: https://lumioui.com/components/parallax-header