Large-header collapse — pick the screen

Header collapse needs a large header to collapse — and no phone screen has one yet. Pick which screen grows it; the plumbing (scroll-linked spring, phone-gated, reduced-motion instant) is identical everywhere, so this is purely a design choice.

A

Where should the large header live?

tap one

React

B

How the collapse works

same plumbing everywhere

The screen's scroller feeds a motion value and the header interpolates between its large and compact states. A spring snaps past the halfway point, so the header never rests mid-collapse. Fully interruptible — scroll back up and it re-expands from wherever it is. Phone-gated, prefers-reduced-motion gets an instant swap, and the drawer/edge gestures keep working unchanged.

C

Which screen grows the large header?

- Bots hub | most iOS-like, real list to scroll — recommended
Settings | familiar, short list
Chats greeting | boldest brand moment, least standard

---
title: Large-header collapse — pick the screen
---

Header collapse needs a large header to collapse — and no phone screen has one yet. Pick which screen grows it; the plumbing (scroll-linked spring, phone-gated, reduced-motion instant) is identical everywhere, so this is purely a design choice.

## Where should the large header live? {meta="tap one"}

```react h=560
const BG = "#0d0c0b", PANEL = "#12100e", LINE = "#262220", FG = "#e8e2d9", MUT = "#8d8478", CORAL = "#D97757";

function Phone({ children, h = 250 }) {
  return <div style={{ width: 148, height: h, background: BG, border: "3px solid #2e2a26", borderRadius: 22, overflow: "hidden", position: "relative", fontFamily: "-apple-system, Inter, sans-serif", color: FG, flex: "none" }}>{children}</div>;
}
function Bar({ label, big = false, sub = null }) {
  return (
    <div style={{ padding: big ? "18px 12px 10px" : "10px 12px", borderBottom: `1px solid ${LINE}` }}>
      <div style={{ fontSize: big ? 21 : 12, fontWeight: 800, letterSpacing: big ? 0 : 0.3, color: FG }}>{label}</div>
      {sub && <div style={{ fontSize: 9, color: MUT, marginTop: 3 }}>{sub}</div>}
    </div>
  );
}
function Row({ title, sub, dot = "#5a7a9e" }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "8px 12px", borderBottom: `1px solid #1a1714` }}>
      <div style={{ width: 15, height: 15, borderRadius: "50%", background: dot, flex: "none" }} />
      <div>
        <div style={{ fontSize: 9.5, fontWeight: 600 }}>{title}</div>
        <div style={{ fontSize: 7.5, color: MUT }}>{sub}</div>
      </div>
    </div>
  );
}
function StateLabel({ children }) {
  return <div style={{ fontSize: 10, fontWeight: 700, color: MUT, textTransform: "uppercase", letterSpacing: 0.8, margin: "2px 0 4px" }}>{children}</div>;
}
function Option({ title, note, children }) {
  return (
    <div style={{ background: PANEL, border: `1px solid ${LINE}`, borderRadius: 14, padding: "14px 16px", flex: 1, minWidth: 250 }}>
      <div style={{ fontSize: 15, fontWeight: 800, marginBottom: 2 }}>{title}</div>
      <div style={{ fontSize: 11, color: MUT, marginBottom: 12, lineHeight: 1.5 }}>{note}</div>
      <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>{children}</div>
    </div>
  );
}

export default function Mockups() {
  return (
    <div style={{ display: "flex", gap: 14, flexWrap: "wrap", padding: 6, background: "#141110", borderRadius: 14 }}>
      <Option title="A · Bots hub" note="Most iOS-like: a real scrollable list under a big title, like Settings or Notes. Recommended.">
        <div>
          <StateLabel>expanded · at top</StateLabel>
          <Phone>
            <Bar label="Bots" big sub="6 bots · 2 groups" />
            <Row title="Hermes" sub="routine: morning scan" dot={CORAL} />
            <Row title="Muse" sub="idle" />
            <Row title="Scout" sub="watching 4 sites" dot="#7a9e7e" />
            <Row title="Archie" sub="idle" dot="#9e5a8a" />
          </Phone>
        </div>
        <div>
          <StateLabel>collapsed · scrolled</StateLabel>
          <Phone>
            <Bar label="Bots" />
            <Row title="Hermes" sub="routine: morning scan" dot={CORAL} />
            <Row title="Muse" sub="idle" />
            <Row title="Scout" sub="watching 4 sites" dot="#7a9e7e" />
          </Phone>
        </div>
      </Option>
      <Option title="B · Settings" note="Large “Settings” over the settings list. Familiar, but the list is short — the effect rarely shows.">
        <div>
          <StateLabel>expanded · at top</StateLabel>
          <Phone>
            <Bar label="Settings" big sub="joe@allternit.com" />
            <Row title="Account" sub="" dot={CORAL} />
            <Row title="Models" sub="Opus 4.5 · BYOK" />
            <Row title="Connectors" sub="4 connected" dot="#7a9e7e" />
            <Row title="Notifications" sub="" dot="#8a8a5a" />
          </Phone>
        </div>
        <div>
          <StateLabel>collapsed · scrolled</StateLabel>
          <Phone>
            <Bar label="Settings" />
            <Row title="Account" sub="" dot={CORAL} />
            <Row title="Models" sub="Opus 4.5 · BYOK" />
            <Row title="Connectors" sub="4 connected" dot="#7a9e5a" />
          </Phone>
        </div>
      </Option>
      <Option title="C · Chats greeting" note="Date + big wordmark over the transcript. Boldest brand moment; least standard — the transcript header usually carries the session title.">
        <div>
          <StateLabel>expanded · at top</StateLabel>
          <Phone>
            <div style={{ padding: "16px 12px 8px" }}>
              <div style={{ fontSize: 8, color: MUT, letterSpacing: 0.5 }}>TUESDAY, OCT 18</div>
              <div style={{ fontSize: 20, fontWeight: 800, marginTop: 2 }}>Allternit</div>
            </div>
            <div style={{ margin: "4px 12px", padding: "8px 10px", background: "#1e1b18", borderRadius: 10, fontSize: 9, maxWidth: "75%" }}>Gestures shipped. Drag anything.</div>
            <div style={{ margin: "4px 12px 4px auto", padding: "8px 10px", background: "#4a3325", borderRadius: 10, fontSize: 9, maxWidth: "60%" }}>Feels right.</div>
          </Phone>
        </div>
        <div>
          <StateLabel>collapsed · scrolled</StateLabel>
          <Phone>
            <Bar label="Design sync" />
            <div style={{ margin: "8px 12px", padding: "8px 10px", background: "#1e1b18", borderRadius: 10, fontSize: 9, maxWidth: "75%" }}>Gestures shipped. Drag anything.</div>
            <div style={{ margin: "4px 12px 4px auto", padding: "8px 10px", background: "#4a3325", borderRadius: 10, fontSize: 9, maxWidth: "60%" }}>Feels right.</div>
          </Phone>
        </div>
      </Option>
    </div>
  );
}
```

## How the collapse works {meta="same plumbing everywhere"}

```flow LR
scroll -> "scroll MotionValue" -> "header height + title size" -> "spring past 50% picks a side"
```

The screen's scroller feeds a motion value and the header interpolates between its large and compact states. A spring snaps past the halfway point, so the header never rests mid-collapse. Fully interruptible — scroll back up and it re-expands from wherever it is. Phone-gated, `prefers-reduced-motion` gets an instant swap, and the drawer/edge gestures keep working unchanged.

## Which screen grows the large header? {ask multi}
- * Bots hub | most iOS-like, real list to scroll — recommended
- Settings | familiar, short list
- Chats greeting | boldest brand moment, least standard