View Transition

Circle Reveal

…

Masken-Übergang statt Crossfade. Der neue Snapshot wird als Kreis vom Klickpunkt aus enthüllt — dieselbe API, anderer Effekt.

Dark Studio

Klick den Button — der Theme-Wechsel öffnet als Kreis von der Klickposition.

btn.addEventListener("click", e => {
  const x = e.clientX, y = e.clientY;
  const end = Math.hypot(Math.max(x, innerWidth-x), Math.max(y, innerHeight-y));
  if(!document.startViewTransition){ applyTheme(); return; }
  const t = document.startViewTransition(applyTheme);
  t.ready.then(() => {
    document.documentElement.animate(
      { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${end}px at ${x}px ${y}px)`] },
      { duration: 500, easing: "ease-in-out", pseudoElement: "::view-transition-new(root)" }
    );
  });
});

Trick: Root-Default abschalten (animation:none auf den Pseudos), dann per documentElement.animate() den clipPath von circle(0) auf einen Radius, der die Ecke erreicht.