Common Fate

Common fate is the Gestalt principle that says things moving together read as one thing. The brain makes this call in milliseconds. It does not need borders or labels or even similar shapes. If five elements start sliding on the same vector with the same acceleration the visual system glues them into a single unit. This is why drag and drop in pro tools never feels like pushing individual pixels around. The motion does the grouping work. It is one of the eight core laws that every interface from Linear to Figma to Vercel obeys without announcing it. Ignore it and your animations fight your layout. Respect it and the interface reconfigures in ways that feel inevitable. The principle dates back to 1920s experiments yet it dominates every 2024 to 2025 tool that ships fluid interactions. Designers who lock their timing create products that reconfigure without cognitive load. Designers who treat motion as decoration create screens that feel like they are vibrating apart even at 60 frames per second.

Common fate is not decorative motion. It is not the staggered fade ins that product tours use to look premium. It is not every notification in your app flying out on individual arcs because your designer thought it would be playful. When the timing or direction varies the brain reads each piece as its own actor. The group dissolves. The user has to manually track what belongs with what. That cognitive tax piles up fast in dense tools. Common fate demands strict coordination. Same start frame. Same duration. Same bezier. Deviate by more than a few milliseconds and you might as well not bother. The principle is ruthless. Half measures make the whole screen feel cheaper. It is not similarity wearing a costume. It is not continuity with keyframes. It is pure shared destiny through motion and anything less collapses the grouping.

Concrete examples prove it fast. Figma's multi select is the purest demo on the market. Grab any collection of layers no matter how different their content and drag. They travel as one locked unit. The selection outline stays rigid. The user feels zero mental overhead about managing 20 disparate objects. They are editing one thing because the motion said so. Linear took the lesson and applied it to their issue tracker. Drag one issue through a dense list and every other row animates out of the way with identical timing. The gap opens like a zipper. The new spot locks with a crisp settle. Users reorder 30 items in seconds because the list itself feels alive and cooperative. Notion does it with database rows and board cards. Move one and the others shift in unison. Delete a stack and they all shrink together before vanishing. The 2024 update to Claude introduced coordinated streaming cards. As the model generates multiple related responses the containers grow at the exact same rate. Text fills in with matching rhythm. The user sees one thinking process instead of three separate streams. Stripe uses common fate in their radar fraud dashboard. When multiple transactions get flagged the affected rows highlight and lift in one synchronized pulse. The eye reads the event as one incident not eight separate alerts. Arc browser in 2024 animates tab groups so that when you collapse a stack every tab scales and slides on identical curves. The group feels like one entity. Vercel applies it in deployment pipelines where status indicators flip from building to live in locked waves rather than chaotic individual pops. These are not accidents. Each team locked their animation values to a single token so the fate stayed common. The 2025 Framer motion defaults now enforce common fate groups unless you explicitly override them. The result is prototypes that feel production ready on day one.

Deploy this principle when your interface needs to communicate that several elements now share a single state change or action. Use it for selections that cross component boundaries. Use it for optimistic updates where five metrics refresh from one backend call. Use it in streaming ui so that related answer blocks reveal content at the same pace and the user can follow the logic instead of hunting for updates. It is mandatory for any view transitions that move elements between routes. The new Web View Transitions API lives or dies on common fate. Get the shared elements to travel together and the navigation feels spatial. Get it wrong and it looks like a cheap reload. Pair it with similarity for nuclear strength grouping. Make them look alike then make them move alike and the brain locks in the relationship before conscious thought kicks in. It also rescues complex dashboards. When six panels update after a filter change and they all scale and reflow on the same curve the user keeps their bearings. The motion tells them the system is coherent. This is the foundation that motion as information builds on. Without common fate your animations are just visual noise. It pairs with progressive disclosure by letting hidden controls slide in as one set rather than individual actors. The parent article audit contains the exact test. Do animations on grouped items move in unison. Pass that check and the screen feels calm even while changing.

Skip common fate when the elements have no actual relationship. Do not coordinate the animation of unrelated notifications even if they happen to appear at the same time. The user will learn to treat them as a single batch and important distinctions get lost. Avoid it in loading states where items are populating from independent sources. Let each card fetch its own data and animate in on its own clock. Forced common fate there creates false associations that confuse more than they delight. Never ship it with sloppy implementation. If your React library applies random variance to easing curves for artistic reasons then turn the shared animation off. Jittery common fate feels like lag. It is worse than no animation because it erodes trust in every other motion on the screen. Do not use it when it would drown out your focal point. If every element is part of a moving group then nothing breaks pattern and the eye has nowhere to land. Break the fate on purpose for the one element that must stand out. That contrast does the work that color or size cannot. The anti pattern shows up in half baked AI interfaces where suggested actions animate on independent timings. The user reads them as separate noise instead of one coherent set.

Common fate turns coordinated motion into invisible glue that makes changing interfaces feel stable.