function lerp(start: number, end: number, alpha: number): number {
    return start + (end - start) * alpha;
}

<script setup lang="ts">
const lerp = (start: number, end: number, alpha: number) =>
  start + (end - start) * alpha

const targetX = ref(0)
const smoothX = ref(0)
let frame: number | null = null

const animate = () => {
  smoothX.value = lerp(smoothX.value, targetX.value, 0.1)
  frame = requestAnimationFrame(animate)
}

const handlePointer = (event: PointerEvent) => {
  targetX.value = event.clientX
}

onMounted(() => {
  window.addEventListener('pointermove', handlePointer)
  frame = requestAnimationFrame(animate)
})

onUnmounted(() => {
  window.removeEventListener('pointermove', handlePointer)
  if (frame) cancelAnimationFrame(frame)
})
</script>

<template>
  <div class="tracker" :style="{ transform: 'translateX(' + smoothX + 'px)' }">
    👆
  </div>
</template>

<style scoped>
.tracker {
  position: fixed;
  top: 50%;
  font-size: 2rem;
  pointer-events: none;
}
</style>