The problem with a crossfade
The first version of our concept agency site crossfaded two whole boards over 900 ms. Frame captures of the reel showed both boards double-exposed for several frames. We call these ghost copies, and our rule is that a transition has to carry something, not blend two things.
Carry the dominant mark
For the reel, the board's dominant mark became an HTML layer over the SVG board, animated with the Web Animations API on transform and colour. Both properties run on the compositor, so the carry stays smooth when the main thread is busy.
Card to case
Moving from a card to its case page uses React's ViewTransition component, which the framework drives on navigation through the browser's View Transitions API. The shared element is named once, and the browser handles the morph.
The fallback is simply no transition
Where the View Transitions API is missing, as in older Firefox and Safari, navigation cuts instantly. That is a quiet degradation, and it needed no polyfill. The site records a mobile Lighthouse score of 94 with CLS 0.000.