Bubble Transition

Purpose

BubbleTransition briefly covers a local content region from a trigger, coordinate or centre origin. Use it for a small mode switch or expressive campaign step where the interaction point matters.

Keep the duration around 0.45–0.7 seconds and use one quiet theme color. Avoid global route changes that must feel instantaneous, frequent pagination, or origins unrelated to the initiating control. It should not resemble a presentation slide effect.

The next content remains in normal DOM order and the region receives focus after change when requested. Reduced motion swaps immediately. Bound the component to the transitioning region; viewport-sized clip paths should be occasional rather than routine.