Split View Resize
Dragging the divider resizes both panes live, and releasing it settles the split on the nearest stop.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import {
useRef,
useState,
type KeyboardEvent as ReactKeyboardEvent,
type PointerEvent as ReactPointerEvent,
} from "react";
import {
animate,About this pattern
Two panes and the rule between them, where the whole quality question is what eases and what does not. While the pointer is down nothing eases at all: the split is a direct projection of the pointer, written to a motion value so the edge never lags the hand holding it and React never re-renders mid-gesture. The spring appears only at release, taking the split to the nearest of a few sensible stops — the layouts the panes were actually designed for — and it is damped hard, because both panes are full of text and text that overshoots its column and comes back is the worst thing this pattern can do. The readout is the same value rendered as text, so the number and the layout cannot disagree, and the keyboard steps land on the same stops the pointer does.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sidebar navigation
A gutter between editor and side panel that resizes live and settles when released.
Related patterns
- Nested Menu DrillA submenu pushes the parent list aside inside the same panel, and the panel resizes to fit it.
- Sidebar CollapseA navigation rail narrows to icons, with labels leaving before the width closes so text is never squeezed.
- Expandable Detail CardA compact card that expands in place into a detail view — image and title travel continuously.