Floating Panel Animator

Three position:absolute panels that snap to corners via document.startViewTransition() — each panel carries its own view-transition-name so Chrome 142 animates them independently. Toggle "Before v142" to see the instant-jump baseline.

How it works

Each panel is assigned a unique view-transition-name (panel-notes, panel-chat, panel-cal). When you click a corner button, the code wraps the position update in document.startViewTransition(). Chrome captures the old position as a screenshot, applies the DOM change, then cross-fades and moves the captured layers — producing a smooth FLIP animation even though the element is position:absolute.

The "Before v142" toggle removes the startViewTransition wrapper so the panel teleports instantly, demonstrating the baseline experience without this API.

// Wrap DOM mutation in a view transition
document.startViewTransition(() => {
  panel.style.top    = targetTop;
  panel.style.left   = targetLeft;
  panel.style.right  = '';
  panel.style.bottom = '';
  panel.style.transform = '';
});