In most web applications, navigating between pages is a hard cut. The current screen disappears, the new screen appears, and there is a brief moment of nothing in between. The user crosses a threshold that the product itself has barely acknowledged.
I treat the threshold as a surface. The moment between two screens is short, but it is also the moment when the user is most attentive to what the system is doing. Getting it right is not decoration. It is continuity.
What a hard cut costs
When a user clicks a card and the screen flashes to white before the next page renders, several small things happen. The user's spatial intuition resets. They lose the sense of which thing they clicked, because the thing they clicked is no longer visible. They wonder, briefly, whether something went wrong. They are now reading the new screen with a small deficit of trust that they did not have a moment ago.
None of this is catastrophic. Most software ships with hard cuts and most users tolerate them. But "tolerate" is a low bar for the threshold of every action in your product. If you take it seriously, the dividend is a product that feels coherent rather than a collection of pages stitched together by URLs.
What I do at the threshold
When a user clicks a card to open a workspace, three things happen in coordinated motion. The card itself begins a subtle visual continuity, with the element that signified the card's identity becoming the element that will signify the workspace's identity in the destination. The other cards on the grid recede slightly to clear the path. A warm halo breathes around the destination element, so the user knows where their attention should be heading.
While the route transitions, a preparation overlay holds the same warm halo and the same Cleo voice that the destination workspace will speak in. The user crosses into the new screen and the overlay dissolves into the workspace mount. There is no moment where the screen is empty. There is no moment where the user is uncertain about what is happening.
The minimum visible duration
The hardest variable to set is the minimum time the threshold should be visible. Too short, and it reads as a flash, which is noisier than no transition at all. Too long, and the user feels held up. The right duration sits somewhere between these failure modes, long enough to be perceived as intent and short enough to feel responsive.
There is no formula for finding it. I tested shorter and longer durations, watched real users cross thresholds with each, and chose the duration where their visible reaction shifted from "did that just glitch" to "the system is preparing my space." You have to watch.
The threshold is the same primitive everywhere
Once I built one good threshold, I found that the same primitive applied to dozens of other places. Loading screens. Modal openings. Wizard step transitions. Confirmation flows. Each of these is a moment when the interface is between two states, and each of them benefits from a coordinated transition rather than a hard cut.
I extracted the primitive once, with a small set of variants for the different contexts in which it appears. Now every threshold in the product speaks the same visual vocabulary. The user crosses a hundred small boundaries through a session and feels none of them.
The right transition is not the one the user notices and admires. It is the one they do not notice at all, because the threshold has stopped being a place where they could fall.