Motion Pinned List
A list interaction that preserves an item’s identity as it moves between unpinned and pinned groups.
- Category
- Organization
- Year
- 2026
- Status
- Experiment
Engineering the Web
How modern web frameworks are blurring the line between server and client.
Motion and Iteration
Building a culture of continuous deployment and rapid UI prototyping.
Design Systems at Scale
Creating composable and accessible components for enterprise applications.
The Art of Refactoring
Strategies to simplify complex codebases and improve developer velocity.
What it is
A pinning action with visible spatial continuity.
Selecting the plus button moves an item from the main list into a dedicated pinned group. The item keeps its shape and content while changing position, so the result feels connected to the action that caused it.
This treatment works best for a short list where pinning is occasional and the destination matters. A dense list with frequent reordering would benefit from a quieter transition.
Design decisions
How the list explains movement between two groups.
Shared identity
Each item keeps the same motion identity in both groups. It travels to its new position instead of disappearing from one place and appearing in another.
Immediate reflow
The remaining items close the empty space as soon as an item leaves. This keeps the list responsive while the moving item completes its journey.
On-demand group
The pinned section only appears when it contains an item. The main list shifts with it, keeping the two groups part of one continuous layout.
Reversible action
The control changes from plus to remove after pinning. The same item can return to its original group without introducing a separate management mode.
Continue exploring
A quieter study in continuous motion.