Wohnung mit 2 Schlafzimmern, geteilter Grundriss
Brooklyn, New York · $489,000
);
}
```
Die Parallaxe ist ein einziges Transform. Mit dem Standardwert `parallax={0.5}` bewegt sich das Foto um den halben Scroll-Offset nach unten, während die Seite darüber nach oben fährt. Es scheint also mit halber Geschwindigkeit zu scrollen. So sieht das Transform in `hero-header.tsx` aus, wobei `drift` der begrenzte Prop `parallax` ist und `mediaHeight` die gemessene Höhe des Heros:
```ts
const imageY = useTransform(() => {
const at = offset.get();
const size = mediaHeight.get();
if (reduced) return 0;
if (at < 0) return stretch ? at : 0; // Overscroll: die Oberkante festhalten
return Math.min(at, size) * drift;
});
```
Die Funktionsform von `useTransform` abonniert jeden Motion Value, den sie liest. Deshalb liest die Komponente `mediaHeight`, bevor sie verzweigt: Ein Wert, der nur in einem Zweig gelesen wird, der beim ersten Durchlauf nicht lief, würde das Transform nie aktualisieren.
Beim Overscroll unter iOS hält das Foto seine Oberkante fest und skaliert hoch, um die Lücke zu füllen, statt den Seitenhintergrund zu zeigen. Außerdem wird das Foto beim Verlassen um bis zu 45% abgedunkelt (`fade`), und ein Verlauf oben (`scrim`) hält Statusleiste und weiße Icons auch auf hellen Fotos lesbar. Auf den letzten 32px, bevor die Unterkante des Fotos die Leiste erreicht, blendet die Glasleiste ein, der kompakte Titel steigt hinein, und die runden Glas-Buttons werden zu getönten Buttons in der Leiste.
> Live-Demo (Hero Header): Scroll durch das Inserat: Das Foto bewegt sich mit halber Geschwindigkeit und wird dunkler, dann übernimmt die Leiste, und die runden Buttons verlieren ihr Glas. Zieh auf einem iPhone über den oberen Rand, und das Foto streckt sich. Probier sie unter [Hero Header](https://wingo-ui.com/components/hero-header) aus und installier sie mit `npx wingo-ui@latest add hero-header`.
Der Prop `title` ist hier der Text für die Leiste und ist `aria-hidden`. Darum rendert die Seite ihr eigenes `h1` unter dem Hero. `height` ist standardmäßig 320px und auf 70dvh begrenzt, ein hohes Foto füllt also nie ein kleines Smartphone aus. Nimm `onCollapsedChange`, wenn die Farbe der Statusleiste der Übergabe folgen soll.
## Wie funktioniert das in einem Scroll-Container oder einer PWA?
Beide Header folgen standardmäßig dem Fenster. Wenn eine App-Shell stattdessen ein inneres Element scrollt, gib dieses Element einmal mit `ScrollContainerProvider` nach unten weiter. Halte es über eine Callback-Ref im State, damit die Kindkomponenten nach dem Mounten aktualisiert werden:
```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