Slideshow moving in both X & Y directions

SlideXY.svelte

<script>
  import { tweened } from 'svelte/motion'
  
  const slideDimensions = {
    width: 640,
    height: 480
  }
  
  let stepIndex = 0
  let slides = [
    {
      column: 1,
      row: 1,
      text: "A",
      color: "red"
    },
    {
      column: 1,
      row: 2,
      text: "B",
      color: "green"
    },
    {
      column: 1,
      row: 3,
      text: "C",
      color: "purple"
    },
    {
      column: 2,
      row: 1,
      text: "D",
      color: "blue"
    },
  ]
  let steps = [
    0,
    1,
    2,
    0,
    3
  ]
  
  $: dimensions = {
    height: max(slides, 'column') * slideDimensions.width,
    width: max(slides, 'row') * slideDimensions.height
  }
  $: current = slides[steps[stepIndex]]
  $: viewbox = {
    x: (current.column-1) * slideDimensions.width,
    y: (current.row-1) * slideDimensions.height,
    width: slideDimensions.width,
    height: slideDimensions.height
  }
  let tweenedX = tweened(0)
  let tweenedY = tweened(0)
  
  $: {
    tweenedX.set(viewbox.x)
  }
  $: {
    tweenedY.set(viewbox.y)
  }
  
  function max(array, key) {
     const items = array.map(i => i[key])
     
     return Math.max(...items)
  }
  
  function advance() {
    if (stepIndex < steps.length - 1)
      stepIndex ++
    else
      stepIndex = 0
  }
</script>

<svelte:window on:click={advance} on:keyup={advance}/>

<!--
<pre>dimensions = {JSON.stringify(dimensions)}</pre>
<pre>viewbox = {JSON.stringify(viewbox)}</pre>
-->
<main>

  <svg viewBox="{$tweenedX} {$tweenedY} {viewbox.height} {viewbox.width}" width="100%" preserveAspectRatio="xMinYMid slice">
    {#each slides as slide, i}
      <rect
            x={(slide.column-1) * slideDimensions.width}
            y={(slide.row-1) * slideDimensions.height}
            width={slideDimensions.width}
            height={slideDimensions.height}
            fill={slide.color}
            />
      <text x={(slide.column * slideDimensions.width) - (slideDimensions.width * 0.5)}
            y={(slide.row * slideDimensions.height) - (slideDimensions.height * 0.5)}>
        {slide.text}
      </text>
    {/each}
  </svg>

</main>
  
<style>
  :global(body) {
    height: 100vh;
    display: flex;
    padding: 0;
  }
  svg {
    
  }
  text {
    fill: white;
    font-size: 5rem;
    text-anchor: middle;
  }
  main {
    width: 100vw;
    height: 100vh;
  }
</style>