constant marque speed per pixel

ui/src/components/Marquee.vue

@@ -2,7 +2,7 @@
   <div
     class="marquee"
     :class="{ overflowed }"
-    :style="`--shift-width: ${shiftWidth}`"
+    :style="`--shift-width: ${shiftWidth}; --anim-length: ${animLength}`"
     ref="root"
   >
     <div class="inner" ref="inner">
@@ -16,11 +16,18 @@ import { defineComponent, onMounted, ref } from "vue";
 
 export default defineComponent({
   name: "Marquee",
-  setup() {
+  props: {
+    speed: {
+      default: 30,
+      type: Number,
+    }
+  },
+  setup(props) {
     const root = ref<HTMLDivElement | null>(null);
     const inner = ref<HTMLDivElement | null>(null);
     const overflowed = ref(false);
     const shiftWidth = ref("unset");
+    const animLength = ref("unset");
 
     onMounted(() => {
       const resizeObserver = new ResizeObserver(() => {
@@ -28,6 +35,7 @@ export default defineComponent({
         shiftWidth.value = `-${
           inner.value!.clientWidth - root.value!.clientWidth
         }px`;
+        animLength.value = `${inner.value!.clientWidth / props.speed}s`;
       });
       resizeObserver.observe(inner.value!);
     });
@@ -37,6 +45,7 @@ export default defineComponent({
       inner,
       overflowed,
       shiftWidth,
+      animLength,
     };
   },
 });
@@ -56,8 +65,8 @@ export default defineComponent({
 
 <style lang="scss">
 .overflowed .inner {
-  animation: marquee 12s ease-in-out infinite;
-  --padding: .5em;
+  animation: marquee var(--anim-length) ease-in-out infinite;
+  --padding: 0.5em;
 }
 
 @keyframes marquee {