# Overscroll

**When to use:** Mobile-style collapsing header that shrinks as the user scrolls — profile pages, detail screens, anywhere a large hero area should yield space to content on scroll.

**Keywords:** parallax header, sticky shrink header

**Import:** `import { Overscroll } from '@ahrowe/ui'`

```tsx
import { Overscroll } from '@ahrowe/ui';

<Overscroll
  overscrollContent={<h1>Profile</h1>}
  min={10}
  max={80}
  start={30}
  unit="%"
>
  <ProfileBody />
</Overscroll>

// Pixel-based sizing
<Overscroll
  overscrollContent={<HeroBanner />}
  min={60}
  max={240}
  start={180}
  unit="px"
>
  <Content />
</Overscroll>

// Different header for desktop, disable on desktop entirely
<Overscroll
  overscrollContent={<MobileHeader />}
  overscrollContentDesktop={<DesktopHeader />}
  mobileOnly
>
  <Content />
</Overscroll>
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `overscrollContent` | `ReactNode` | Content inside the collapsing header |
| `overscrollContentDesktop` | `ReactNode` | Optional alternate header for desktop |
| `children` | `ReactNode` | Scrollable body content |
| `min` | `number` | Minimum header size (default `10`) |
| `max` | `number` | Maximum header size (default `80`) |
| `start` | `number` | Initial header size (default `30`) |
| `unit` | `string` | `'%'` (default) or `'px'` |
| `mobileOnly` | `boolean` | Disable collapsing on desktop (default `true`) |
| `centerHeader` | `boolean` | Center header content vertically (default `true`) |
| `scrollDisabled` | `boolean` | Lock scrolling |
| `onScrollChange` | `(isScrolling: boolean) => void` | Fires while user is actively scrolling |