Morph TOC
A progress-aware morphing dock for long documents on mobile.
Morph TOC
Scroll, expand, jump, collapse — watch the dock respond inside the phone.
Overview
Long documents on a phone need a way to jump without losing place. This dock stays over the reading surface and reports how far you have come.
Extra lines give the scroller enough travel for progress to move as you read through each heading.
Keep scrolling — the dock stays pinned to the phone chrome, not the page outside this frame.
Scroll progress
As you move through headings, the ring fills and the active title updates. Progress should feel purposeful even before the outline opens.
Extra lines give the scroller enough travel for progress to move as you read through each heading.
Keep scrolling — the dock stays pinned to the phone chrome, not the page outside this frame.
Expand
Tap the chevron to morph the pill into a full outline. The spring should feel physical, not theatrical.
Extra lines give the scroller enough travel for progress to move as you read through each heading.
Keep scrolling — the dock stays pinned to the phone chrome, not the page outside this frame.
Jump
Choose a section to scroll there. The dock collapses so the reading column stays clear after navigation.
Extra lines give the scroller enough travel for progress to move as you read through each heading.
Keep scrolling — the dock stays pinned to the phone chrome, not the page outside this frame.
Takeaways
A floating morph dock beats a sticky sidebar when horizontal space is already spoken for by the phone chrome.
Extra lines give the scroller enough travel for progress to move as you read through each heading.
Keep scrolling — the dock stays pinned to the phone chrome, not the page outside this frame.
- Behavior
A morphing bottom dock inside a phone viewport: scroll updates progress and the active title; expand reveals the outline; selecting a heading jumps and collapses.
- Interaction
Pointer and touch drive expand, collapse, and section jumps. Keyboard can focus the toggle and outline buttons once expanded.
- Controls
Scroll the phone’s document to move progress. Tap the chevron to expand or collapse. Choose a heading to jump inside the frame.
- Motion & sound
Spring morph between pill and outline, plus a circular progress ring. Reduced motion keeps the dock without spring overshoot. No sound.
- Learnings
Demo the morph dock in a phone stage — a wide article layout underplays the interaction it was built for.
- Source
Reuse `TableOfContentsMorph` from `@dammydev/lab`. Pass `contained`, `rootSelector`, and `scrollRootSelector` so heading discovery and intersection stay inside the phone scroller.