Parallax Header

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/parallax-header

Usage

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

Also exported: useParallaxHeader, useParallaxHeaderContext, ParallaxHeaderHero, ParallaxHeaderBar, ParallaxHeaderButton.

Examples

Hotel gallery

A lodge listing whose hero is a swipeable gallery with a page counter.

Artwork tinted

A playlist page on an artwork-tinted field.

Product photo

A footwear product page.

Profile cover

A photographer's profile with a landscape cover.

API reference

ParallaxHeader

Prop Type Default
state* ParallaxHeaderState

From useParallaxHeader().

 —
className string —
children React.ReactNode —

ParallaxHeaderHero

Prop Type Default
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.

 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.

 true
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 Default
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".

 "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 Default
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".

 "primaryText"
className string —