From 68dca953f200440c0af29e3b83bfa61306ed09b8 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Tue, 14 Apr 2026 16:53:32 +0100
Subject: [PATCH] Restore JS scroll animations, move WASM AutoScroll to
 util/wasm/

Revert AutoScroll and Headline components to their original JS
requestAnimationFrame implementations. Keep the WASM-based AutoScroll
as an alternative at util/wasm/AutoScroll.vue.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 vue/src/components/text/Headline.vue        |  49 ++++++++--
 vue/src/components/util/AutoScroll.vue      | 100 ++++++++++++++++++--
 vue/src/components/util/wasm/AutoScroll.vue |  26 +++++
 3 files changed, 158 insertions(+), 17 deletions(-)
 create mode 100644 vue/src/components/util/wasm/AutoScroll.vue

diff --git a/vue/src/components/text/Headline.vue b/vue/src/components/text/Headline.vue
index eb4c4be..1325378 100644
--- a/vue/src/components/text/Headline.vue
+++ b/vue/src/components/text/Headline.vue
@@ -1,22 +1,55 @@
 <script setup>
 import { onMounted, useTemplateRef, onUnmounted } from "vue";
-import { HeadlineScroller } from "@/wasm/stp_wasm.js";
 
 const container = useTemplateRef("container");
 const item1 = useTemplateRef("item1");
 
-let scroller = null;
+let offset = 0;
+let cachedWidth = 0;
+
+let rafId;
+
+const speed = 0.5; // pixels per frame
+
+function measureWidth() {
+    const ctnr = container.value;
+    const it1 = item1.value;
+    if (ctnr && it1) {
+        cachedWidth = Math.max(ctnr.offsetWidth, it1.scrollWidth);
+    }
+}
+
+function animate() {
+    const ctnr = container.value;
+    if (!ctnr || cachedWidth === 0) {
+        rafId = requestAnimationFrame(animate);
+        return;
+    }
+
+    offset -= speed;
+
+    if (offset <= -cachedWidth) {
+        offset += cachedWidth;
+    }
+
+    ctnr.style.transform = `translateX(${offset}px)`;
+
+    rafId = requestAnimationFrame(animate);
+}
+
+let resizeObserver;
 
 onMounted(() => {
-    if (!container.value || !item1.value) return;
-    scroller = new HeadlineScroller(container.value, item1.value);
-    scroller.start();
+    measureWidth();
+    rafId = requestAnimationFrame(animate);
+
+    resizeObserver = new ResizeObserver(measureWidth);
+    resizeObserver.observe(container.value);
 });
 
 onUnmounted(() => {
-    scroller?.destroy();
-    scroller?.free();
-    scroller = null;
+    cancelAnimationFrame(rafId);
+    resizeObserver?.disconnect();
 });
 </script>
 
diff --git a/vue/src/components/util/AutoScroll.vue b/vue/src/components/util/AutoScroll.vue
index ea9fd0c..bfceea4 100644
--- a/vue/src/components/util/AutoScroll.vue
+++ b/vue/src/components/util/AutoScroll.vue
@@ -1,26 +1,108 @@
 <template>
-    <div ref="container" class="overflow-y-auto">
+    <div ref="container" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" class="overflow-y-auto">
         <slot />
     </div>
 </template>
 
 <script setup>
 import { useTemplateRef, onMounted, onBeforeUnmount } from "vue";
-import { AutoScroller } from "@/wasm/stp_wasm.js";
 
 const container = useTemplateRef("container");
 
-let scroller = null;
+const SPEED = 0.0005; // % per frame
+const PAUSE = 2000; // ms at top/bottom
+
+let pos = 0;
+let direction = 1; // 1 = down, -1 = up
+let hovered = false;
+let rafId = null;
+let pauseTimeoutId = null;
+let cachedScrollHeight = 0;
+
+function measureScrollHeight() {
+    const el = container.value;
+    if (el) cachedScrollHeight = el.scrollHeight;
+}
+
+function stopLoop() {
+    if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+    }
+    if (pauseTimeoutId !== null) {
+        clearTimeout(pauseTimeoutId);
+        pauseTimeoutId = null;
+    }
+}
+
+function startLoop() {
+    stopLoop();
+    rafId = requestAnimationFrame(tick);
+}
+
+function onMouseEnter() {
+    hovered = true;
+    stopLoop();
+}
+
+function onMouseLeave() {
+    hovered = false;
+    const el = container.value;
+    if (el && cachedScrollHeight > 0) {
+        pos = el.scrollTop / cachedScrollHeight;
+    }
+    startLoop();
+}
+
+function schedulePause(callback) {
+    stopLoop();
+    pauseTimeoutId = setTimeout(callback, PAUSE);
+}
+
+function tick() {
+    rafId = null;
+    const el = container.value;
+    if (hovered) return;
+
+    if (!el || cachedScrollHeight === 0) {
+        rafId = requestAnimationFrame(tick);
+        return;
+    }
+
+    const reachedBottom = pos >= 1;
+    const reachedTop = pos <= 0;
+
+    if (reachedBottom) {
+        pos = 0.999;
+        direction = -1;
+        schedulePause(startLoop);
+        return;
+    } else if (reachedTop && direction === -1) {
+        pos = 0.001;
+        direction = 1;
+        schedulePause(startLoop);
+        return;
+    }
+
+    pos += direction * SPEED;
+
+    el.scrollTop = pos * cachedScrollHeight;
+
+    rafId = requestAnimationFrame(tick);
+}
+
+let resizeObserver;
 
 onMounted(() => {
-    if (!container.value) return;
-    scroller = new AutoScroller(container.value);
-    scroller.start();
+    measureScrollHeight();
+    schedulePause(startLoop);
+
+    resizeObserver = new ResizeObserver(measureScrollHeight);
+    resizeObserver.observe(container.value);
 });
 
 onBeforeUnmount(() => {
-    scroller?.destroy();
-    scroller?.free();
-    scroller = null;
+    stopLoop();
+    resizeObserver?.disconnect();
 });
 </script>
diff --git a/vue/src/components/util/wasm/AutoScroll.vue b/vue/src/components/util/wasm/AutoScroll.vue
new file mode 100644
index 0000000..ea9fd0c
--- /dev/null
+++ b/vue/src/components/util/wasm/AutoScroll.vue
@@ -0,0 +1,26 @@
+<template>
+    <div ref="container" class="overflow-y-auto">
+        <slot />
+    </div>
+</template>
+
+<script setup>
+import { useTemplateRef, onMounted, onBeforeUnmount } from "vue";
+import { AutoScroller } from "@/wasm/stp_wasm.js";
+
+const container = useTemplateRef("container");
+
+let scroller = null;
+
+onMounted(() => {
+    if (!container.value) return;
+    scroller = new AutoScroller(container.value);
+    scroller.start();
+});
+
+onBeforeUnmount(() => {
+    scroller?.destroy();
+    scroller?.free();
+    scroller = null;
+});
+</script>