marquee only runs while mouseovered

ui/src/components/Marquee.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
-  export let speed = 30;
+  export let speed = 50;
 
   let root: HTMLDivElement | undefined;
   let inner: HTMLDivElement | undefined;
 
   let overflowed = false;
+  let running = false;
   let shiftWidth = "unset";
   let animLength = "unset";
 
@@ -24,6 +25,9 @@
 <div
   class="marquee"
   class:overflowed
+  class:running
+  on:mouseenter={() => (running = true)}
+  on:mouseleave={() => (running = false)}
   style={`--shift-width: ${shiftWidth}; --anim-length: ${animLength}`}
   bind:this={root}
 >
@@ -47,9 +51,14 @@
   :global {
     .overflowed .inner {
       animation: marquee var(--anim-length) ease-in-out infinite;
+      animation-play-state: paused;
       --padding: 0.5em;
     }
 
+    .overflowed.running .inner {
+      animation-play-state: running;
+    }
+
     @keyframes marquee {
       0% {
         transform: translateX(var(--padding));