From 7cd11f7e2aaa79a8c5b2cfc41f1cce08f47cb7d5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 10 Aug 2026 14:27:12 +0000
Subject: [PATCH] Let visitors push the project gallery about themselves

The gallery on the landing page moved on rails: `UMarquee` animates its
content in CSS, and a CSS animation is not a scroll position, so a
trackpad swipe, a touch drag or a mouse drag had nothing to take hold
of. Anyone wanting a second look at a card that had just gone past had
to wait for it to come round again.

`DraggableMarquee` lays the same repeated content out in a real
horizontal scroller and drifts it by nudging `scrollLeft` a fraction of
a pixel each frame, which makes the drift one more writer of a position
the visitor can write to as well. Scrolling, swiping, dragging, momentum
and the keyboard then all work because the browser already does them.

It stands aside while it is being used: the drift stops under the
pointer, during a drag, while a card holds focus, for a moment after any
scrolling of the visitor's own, off screen, and entirely for anyone who
asks for reduced motion. A drag that ends over a card is not taken for a
visit to it, and the duplicated copies are hidden from screen readers
and taken out of the tab order without being made inert, which would
have stopped the clicks as well.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015aCGjKwtBpk8NdVKxQiCRA
---
 app/components/DraggableMarquee.vue | 285 ++++++++++++++++++++++++++++
 app/components/landing/Hero.vue     |   7 +-
 2 files changed, 288 insertions(+), 4 deletions(-)
 create mode 100644 app/components/DraggableMarquee.vue

diff --git a/app/components/DraggableMarquee.vue b/app/components/DraggableMarquee.vue
new file mode 100644
index 0000000..4383604
--- /dev/null
+++ b/app/components/DraggableMarquee.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+/**
+ * A marquee the visitor can take hold of.
+ *
+ * `UMarquee` moves its content with a CSS animation, and an animation is not a
+ * scroll position: there is nothing for a wheel, a swipe or a drag to act on.
+ * This lays the same repeated content out in a real horizontal scroller and
+ * drifts it by nudging `scrollLeft` each frame, which makes the drift one more
+ * writer of a position the visitor can write to as well. Momentum, trackpads,
+ * touch and the keyboard then all work because the platform already does them.
+ *
+ * The loop is the usual trick. The slot is repeated end to end, and since the
+ * copies are identical, adding or subtracting exactly one copy's width from
+ * the scroll position changes nothing on screen. Doing that whenever the
+ * position leaves the second copy keeps a whole copy of slack on either side
+ * of the view, so the strip never reaches an end to stop or bounce at.
+ */
+
+const props = withDefaults(defineProps<{
+  /** How far the strip drifts on its own each second, in pixels. */
+  speed?: number
+  /** Whether the drift stops while a pointer rests on the strip. */
+  pauseOnHover?: boolean
+}>(), {
+  speed: 40,
+  pauseOnHover: true
+})
+
+/** How far a pointer travels before a press counts as a drag, not a click. */
+const DRAG_THRESHOLD = 4
+
+/** How long the drift holds off after the visitor scrolls, in milliseconds. */
+const RESUME_DELAY = 1200
+
+const viewport = ref<HTMLElement | null>(null)
+
+/**
+ * Copies of the slot laid end to end. Three is the fewest that can hide a wrap
+ * — one to look at, one either side to jump to — and `measure` asks for more
+ * when the strip is wide enough to show more than one copy at a time.
+ */
+const copies = ref(3)
+
+/** The width of one copy: the distance the scroll position wraps by. */
+let period = 0
+
+/** Drift the browser rounded away, saved so slow speeds still add up. */
+let carry = 0
+
+/* Everything that can hold the drift still. */
+const hovered = ref(false)
+const dragging = ref(false)
+const focusWithin = ref(false)
+const onScreen = ref(true)
+const reducedMotion = ref(false)
+let scrolledAt = 0
+
+function drifting(now: number) {
+  return onScreen.value
+    && !reducedMotion.value
+    && !dragging.value
+    && !focusWithin.value
+    && !(props.pauseOnHover && hovered.value)
+    && now - scrolledAt > RESUME_DELAY
+}
+
+/**
+ * Return the scroll position to the second copy. Every copy holds the same
+ * thing, so a shift of exactly one copy is invisible; it only buys back the
+ * room to carry on in whichever direction the strip was going.
+ */
+function normalize() {
+  const el = viewport.value
+  if (!el || !period) return
+
+  // While something inside holds focus, leave the position alone: the shift
+  // would carry the focused link off screen even though nothing looks
+  // different, and the browser would scroll back to it.
+  if (focusWithin.value) return
+
+  if (el.scrollLeft >= period * 2) el.scrollLeft -= period
+  else if (el.scrollLeft < period) el.scrollLeft += period
+}
+
+/**
+ * Mark every copy but the first as scenery. They hold the same links again,
+ * which a screen reader should not read out three times over and the tab key
+ * should not walk through three times over.
+ *
+ * `inert` is the tidy way to say that and the wrong one, because it also
+ * refuses clicks — and the copy under the visitor's pointer is nearly always a
+ * clone. Hiding the copy from assistive technology and taking its links out of
+ * the tab order says the same thing while leaving them clickable.
+ */
+function hideClones() {
+  const el = viewport.value
+  if (!el) return
+
+  for (const clone of [...el.children].slice(1)) {
+    clone.setAttribute('aria-hidden', 'true')
+    for (const link of clone.querySelectorAll('a, button, [tabindex]')) {
+      link.setAttribute('tabindex', '-1')
+    }
+  }
+}
+
+function measure() {
+  const el = viewport.value
+  if (!el) return
+
+  const width = el.scrollWidth / copies.value
+  if (!width) return
+
+  period = width
+  copies.value = Math.max(3, Math.ceil(el.clientWidth / width) + 2)
+  normalize()
+}
+
+/* Dragging.
+ *
+ * Only a mouse or a pen needs this. Touch already drags the strip natively,
+ * with a momentum throw no hand-rolled version would match.
+ *
+ * Each move is applied as a delta rather than as an offset from where the
+ * press began, because `normalize` can shift the scroll position mid-drag and
+ * an offset measured against the old position would snap back by a whole copy.
+ */
+
+let pointer: number | null = null
+let lastX = 0
+let travelled = 0
+let dragged = false
+
+function onPointerdown(event: PointerEvent) {
+  if (event.pointerType === 'touch' || event.button !== 0) return
+
+  pointer = event.pointerId
+  lastX = event.clientX
+  travelled = 0
+  dragged = false
+}
+
+function onPointermove(event: PointerEvent) {
+  const el = viewport.value
+  if (!el || pointer !== event.pointerId) return
+
+  const delta = event.clientX - lastX
+  lastX = event.clientX
+  travelled += Math.abs(delta)
+  if (travelled < DRAG_THRESHOLD) return
+
+  if (!dragged) {
+    dragged = true
+    dragging.value = true
+    // Capture only once this is definitely a drag. Capturing on the press
+    // would re-target the click that a plain press produces, and the links
+    // inside would stop working.
+    el.setPointerCapture(event.pointerId)
+  }
+
+  el.scrollLeft -= delta
+}
+
+function onPointerup(event: PointerEvent) {
+  const el = viewport.value
+  if (pointer !== event.pointerId) return
+
+  if (el?.hasPointerCapture(event.pointerId)) {
+    el.releasePointerCapture(event.pointerId)
+  }
+  pointer = null
+  dragging.value = false
+  scrolledAt = performance.now()
+}
+
+/** Swallow the click that ends a drag, so a drag over a link is not a visit. */
+function onClick(event: MouseEvent) {
+  // A drag that ends outside the strip leaves no click to swallow, so this can
+  // still be armed when the next one arrives. `detail` counts pointer clicks
+  // and is zero for a link opened with the keyboard, which was never a drag.
+  if (!dragged || event.detail === 0) return
+
+  dragged = false
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+function onScroll() {
+  normalize()
+}
+
+function onUserScroll() {
+  scrolledAt = performance.now()
+}
+
+/* The drift itself. */
+
+let request = 0
+let previous = 0
+
+function tick(now: number) {
+  request = requestAnimationFrame(tick)
+
+  const elapsed = previous ? Math.min(now - previous, 100) : 0
+  previous = now
+
+  const el = viewport.value
+  if (!el || !drifting(now)) return
+
+  const target = el.scrollLeft + carry + props.speed * elapsed / 1000
+  el.scrollLeft = target
+  // Carry whatever the browser refused of a fractional step into the next
+  // frame. Chrome snaps the offset to whole device pixels, so without this a
+  // step under half a pixel rounds up every frame and the strip runs away, or
+  // rounds down every frame and the strip never sets off at all.
+  carry = Math.min(Math.max(target - el.scrollLeft, -1), 1)
+
+  normalize()
+}
+
+onMounted(() => {
+  const el = viewport.value
+  if (!el) return
+
+  const stillness = window.matchMedia('(prefers-reduced-motion: reduce)')
+  reducedMotion.value = stillness.matches
+  const onStillnessChange = (event: MediaQueryListEvent) => {
+    reducedMotion.value = event.matches
+  }
+  stillness.addEventListener('change', onStillnessChange)
+
+  // The strip's own box gives the width to fill; its first copy gives the
+  // width to fill it with, and that one changes as images and fonts land.
+  const resize = new ResizeObserver(() => measure())
+  resize.observe(el)
+  if (el.firstElementChild) resize.observe(el.firstElementChild)
+
+  // Off screen there is nothing to drift, and a hero leaves the screen early.
+  const intersection = new IntersectionObserver(([entry]) => {
+    onScreen.value = entry?.isIntersecting ?? true
+  })
+  intersection.observe(el)
+
+  measure()
+  hideClones()
+  watch(copies, hideClones, { flush: 'post' })
+
+  request = requestAnimationFrame(tick)
+
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(request)
+    stillness.removeEventListener('change', onStillnessChange)
+    resize.disconnect()
+    intersection.disconnect()
+  })
+})
+</script>
+
+<template>
+  <div
+    ref="viewport"
+    class="flex overflow-x-auto overflow-y-hidden overscroll-x-contain select-none cursor-grab active:cursor-grabbing [--gap:--spacing(16)] [scroll-behavior:auto] [scrollbar-width:none] [mask-image:linear-gradient(to_right,transparent,black_33%,black_67%,transparent)] [&::-webkit-scrollbar]:hidden"
+    @pointerdown="onPointerdown"
+    @pointermove="onPointermove"
+    @pointerup="onPointerup"
+    @pointercancel="onPointerup"
+    @click.capture="onClick"
+    @dragstart.prevent
+    @scroll.passive="onScroll"
+    @wheel.passive="onUserScroll"
+    @touchmove.passive="onUserScroll"
+    @pointerenter="hovered = true"
+    @pointerleave="hovered = false"
+    @focusin="focusWithin = true"
+    @focusout="focusWithin = false"
+  >
+    <div
+      v-for="copy in copies"
+      :key="copy"
+      class="flex shrink-0 items-center gap-(--gap) pe-(--gap)"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index 6b098ed..f6ba56a 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -132,9 +132,8 @@ defineProps<{
       </div>
     </template>
 
-    <UMarquee
-      pause-on-hover
-      class="py-2 -mx-8 sm:-mx-12 lg:-mx-16 [--duration:40s]"
+    <DraggableMarquee
+      class="py-2 -mx-8 sm:-mx-12 lg:-mx-16"
     >
       <Motion
         v-for="(project, index) in projects"
@@ -177,6 +176,6 @@ defineProps<{
           </span>
         </NuxtLink>
       </Motion>
-    </UMarquee>
+    </DraggableMarquee>
   </UPageHero>
 </template>