Shrinking header

Scroll and the tall header folds into a pill. The subtitle fades first, then the title shrinks and slides into the bar, then the bar tightens and gains its ring.

Shrinking header is part of Pro.

Get Pro to try it live and copy its code, along with every other element in the library.

Get Pro Already Pro? Sign in

Nav that stretchesA dark pill of icons. The active item stretches to show its label; the item marked `menu` turns the pill into a list.
Split viewTwo panes with a draggable handle. Each pane re-lays itself out for its own width (container queries in the CSS: grid or list on the left, compact or full on the right).
Fold sidebarA navigation panel that folds to an icon column. The labels leave first, the panel closes over the fixed icon column, and the highlight pill lands as a rounded square (and back when it opens).
Icon tabsA pill of icon tabs. The picked tab opens to show its name while a light tile springs under it, and the panel line below, when tabs carry one, swaps with a small blur.
Capsule listAn inset grouped settings card. Each row shows a chip icon, a title and its current value; pressing one opens two lines of detail inside the same card (the others close), the chevron turns a quarter.
Ruler navA contents rail drawn as short lines. One label pill follows the pointer and snaps to the nearest section; the lines near it lengthen, click (or arrow keys) sets the current section and its line fills.

Shrinking header

Shrinking header is part of Pro.

Related