Morphing Accordion
A compact list that turns the selected item into a larger reading surface without losing its place.
- Category
- Interaction
- Year
- 2026
- Status
- Experiment
What it is
A disclosure list with stronger spatial continuity.
Every item begins as a compact chip. Selecting one grows that same surface from its top-left corner and reveals the supporting copy. Selecting it again closes it, while selecting another item transfers the expanded state to the new choice.
Design decisions
The motion clarifies which item changed and where its content came from.
One open item
A single expanded surface keeps the column easy to scan and gives the active idea a clear visual priority.
A stable top-left origin
Width and height resolve away from the label's starting position, preserving the user's spatial reference throughout the transition.
A persistent surface
Morph Surface owns the size interpolation and clipping. The accordion keeps disclosure state, semantics, and keyboard behavior separate from the visual transformation.
Reduced motion remains clear
The component follows the user's reduced-motion preference while preserving the open and closed state change.
Continue exploring
Another accordion that uses motion to clarify hierarchy.