2-bedroom apartment, split floor plan
Brooklyn, New York ยท $489,000
);
}
```
The parallax is one transform. With the default `parallax={0.5}`, the photo moves down by half the scroll offset while the page moves up over it, so it appears to scroll at half speed. This is the transform inside `hero-header.tsx`, where `drift` is the clamped `parallax` prop and `mediaHeight` is the measured hero height:
```ts
const imageY = useTransform(() => {
const at = offset.get();
const size = mediaHeight.get();
if (reduced) return 0;
if (at < 0) return stretch ? at : 0; // overscroll: hold the top edge
return Math.min(at, size) * drift;
});
```
The function form of `useTransform` subscribes to every motion value it reads, which is why the component reads `mediaHeight` before it branches: a value read only inside a branch that did not run on the first pass would never update the transform.
During an iOS overscroll the photo holds its top edge and scales up to fill the gap instead of showing the page background. The photo also darkens to 45% as it leaves (`fade`), and a top gradient (`scrim`) keeps the status bar and the white icons readable on bright photos. In the last 32px before the photo's bottom edge meets the bar, the glass bar fades in, the compact title rises into it and the round glass buttons turn into tinted bar buttons.
> Live demo (Hero Header): Scroll the listing: the photo moves at half speed and darkens, then the bar takes over and the round buttons lose their glass. On an iPhone, pull past the top and the photo stretches. Try it at [Hero Header](https://wingo-ui.com/components/hero-header) and install it with `npx wingo-ui@latest add hero-header`.
The `title` prop here is the bar copy and is `aria-hidden`, which is why the page renders its own `h1` below the hero. `height` defaults to 320px and is capped at 70dvh, so a tall photo never fills a short phone. Use `onCollapsedChange` when the status bar color should follow the handover.
## How do you make it work in a scroll container or a PWA?
Both headers follow the window by default. When an app shell scrolls an inner element instead, hand that element down once with `ScrollContainerProvider`. Keep it in state through a callback ref, so the children update after it mounts:
```tsx
"use client";
import { useState, type ReactNode } from "react";
import { ScrollContainerProvider } from "@/hooks/use-scroll-state";
export function AppShell({ children }: { children: ReactNode }) {
const [scroller, setScroller] = useState