star wipe!

[elliots]

here is my/gemini's attempt

@keyframes star-shrink {
  from {
    clip-path: polygon(
      50% -125%,
      /* P1 */ 88.5% -2.5%,
      /* P2 */ 218% -2.5%,
      /* P3 */ 113% 74.5%,
      /* P4 */ 151.5% 193.5%,
      /* P5 */ 50% 120%,
      /* P6 */ -51.5% 193.5%,
      /* P7 */ -13% 74.5%,
      /* P8 */ -118% -2.5%,
      /* P9 */ 11.5% -2.5% /* P10 */
    );
  }
  to {
    clip-path: polygon(
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord)
    );
  }
}

::view-transition-old(star-in) {
  animation: none;
  animation-name: star-shrink;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
  z-index: 1;
}

::view-transition-new(star-in) {
  animation: none;
  z-index: 0;
}

::view-transition-group(root),
::view-transition-image-pair(root) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes star-expand {
  from {
    clip-path: polygon(
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord),
      var(--transition-coord)
    );
  }
  to {
    clip-path: polygon(
      50% -125%,
      /* P1 */ 88.5% -2.5%,
      /* P2 */ 218% -2.5%,
      /* P3 */ 113% 74.5%,
      /* P4 */ 151.5% 193.5%,
      /* P5 */ 50% 120%,
      /* P6 */ -51.5% 193.5%,
      /* P7 */ -13% 74.5%,
      /* P8 */ -118% -2.5%,
      /* P9 */ 11.5% -2.5% /* P10 */
    );
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

::view-transition-new(star-out) {
  animation: none;
  animation-name: star-expand;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
  z-index: 1;
}

/* Apply a fade-out animation to the OLD content snapshot FOR 'star-out' */
::view-transition-old(star-out) {
  animation: none;
  animation-name: fade-out;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
  z-index: 0;
}

https://www.youtube.com/watch?v=72bUheqRE5o