"use client";

import { PathFollowerLoop } from "./index";

export interface DemoProps {
  accent?: string;
  duration?: number;
  tileSize?: number;
  alignToTangent?: boolean;
  strokeWidth?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#FF6A1F", duration = 4, tileSize = 44, alignToTangent = true, strokeWidth = 12 }: DemoProps) {
  return (
    <div className="w-full p-6">
      <PathFollowerLoop accent={accent} duration={duration} tileSize={tileSize} alignToTangent={alignToTangent} strokeWidth={strokeWidth} />
    </div>
  );
}

1d:T2a9d, 1e:T16d39,

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    duration?: number;
    tileSize?: number;
    alignToTangent?: boolean;
    strokeWidth?: number;
  }>(),
  { accent: "#FF6A1F", duration: 4, tileSize: 44, alignToTangent: true, strokeWidth: 12 },
);

const VIEW = 200;
const SPIRAL_D =
  "M 100 16 Q 110.53 17.17 115.66 18.41 Q 120.78 19.65 125.67 21.52 Q 130.56 23.38 135.15 25.84 Q 139.74 28.29 143.95 31.29 Q 148.17 34.28 151.95 37.77 Q 155.73 41.25 159.02 45.16 Q 162.31 49.07 165.06 53.34 Q 167.81 57.6 169.99 62.16 Q 172.16 66.71 173.73 71.47 Q 175.3 76.23 176.26 81.12 Q 177.21 86.01 177.53 90.95 Q 177.85 95.89 177.55 100.8 Q 177.25 105.71 176.33 110.51 Q 175.41 115.31 173.91 119.93 Q 172.4 124.54 170.34 128.9 Q 168.28 133.26 165.7 137.3 Q 163.11 141.33 160.06 144.99 Q 157.01 148.64 153.55 151.85 Q 150.08 155.07 146.26 157.81 Q 142.44 160.54 138.33 162.75 Q 134.23 164.96 129.91 166.63 Q 125.58 168.29 121.12 169.39 Q 116.65 170.48 112.11 171 Q 107.57 171.52 103.03 171.46 Q 98.49 171.4 94.03 170.77 Q 89.57 170.14 85.26 168.96 Q 80.94 167.78 76.84 166.08 Q 72.74 164.37 68.91 162.18 Q 65.09 159.98 61.6 157.34 Q 58.1 154.7 55 151.66 Q 51.89 148.62 49.22 145.24 Q 46.54 141.85 44.33 138.18 Q 42.12 134.51 40.41 130.62 Q 38.69 126.73 37.49 122.69 Q 36.29 118.64 35.61 114.51 Q 34.94 110.37 34.8 106.22 Q 34.66 102.07 35.04 97.96 Q 35.42 93.85 36.31 89.86 Q 37.2 85.87 38.58 82.05 Q 39.96 78.23 41.8 74.65 Q 43.63 71.06 45.89 67.76 Q 48.15 64.46 50.79 61.5 Q 53.43 58.54 56.4 55.96 Q 59.36 53.37 62.61 51.21 Q 65.85 49.04 69.32 47.31 Q 72.78 45.58 76.41 44.32 Q 80.03 43.06 83.76 42.28 Q 87.48 41.49 91.24 41.19 Q 95 40.88 98.74 41.05 Q 102.48 41.22 106.14 41.86 Q 109.79 42.5 113.31 43.59 Q 116.82 44.68 120.14 46.19 Q 123.46 47.7 126.54 49.61 Q 129.61 51.51 132.4 53.77 Q 135.18 56.02 137.63 58.59 Q 140.08 61.16 142.17 64 Q 144.26 66.83 145.95 69.88 Q 147.65 72.93 148.94 76.14 Q 150.22 79.35 151.08 82.67 Q 151.94 85.98 152.37 89.35 Q 152.8 92.72 152.8 96.08 Q 152.79 99.44 152.37 102.75 Q 151.94 106.05 151.11 109.24 Q 150.27 112.43 149.05 115.47 Q 147.83 118.5 146.25 121.32 Q 144.67 124.14 142.76 126.72 Q 140.86 129.29 138.67 131.58 Q 136.47 133.87 134.03 135.85 Q 131.58 137.82 128.94 139.45 Q 126.29 141.07 123.49 142.34 Q 120.68 143.61 117.77 144.5 Q 114.85 145.39 111.88 145.9 Q 108.91 146.41 105.94 146.54 Q 102.96 146.66 100.02 146.41 Q 97.08 146.16 94.23 145.54 Q 91.37 144.92 88.65 143.96 Q 85.93 143 83.38 141.71 Q 80.83 140.42 78.5 138.84 Q 76.16 137.26 74.07 135.42 Q 71.97 133.57 70.15 131.5 Q 68.33 129.42 66.81 127.16 Q 65.28 124.89 64.07 122.48 Q 62.86 120.07 61.98 117.56 Q 61.09 115.05 60.54 112.48 Q 59.99 109.9 59.78 107.31 Q 59.56 104.71 59.68 102.15 Q 59.79 99.58 60.23 97.08 Q 60.67 94.58 61.41 92.19 Q 62.15 89.79 63.18 87.54 Q 64.21 85.29 65.5 83.22 Q 66.79 81.14 68.32 79.27 Q 69.84 77.4 71.57 75.76 Q 73.29 74.12 75.19 72.74 Q 77.08 71.35 79.11 70.24 Q 81.14 69.12 83.27 68.29 Q 85.4 67.45 87.59 66.9 Q 89.77 66.35 91.98 66.08 Q 94.18 65.82 96.37 65.84 Q 98.56 65.86 100.7 66.16 Q 102.84 66.46 104.89 67.01 Q 106.94 67.57 108.88 68.38 Q 110.81 69.18 112.6 70.21 Q 114.39 71.24 116.01 72.47 Q 117.62 73.71 119.04 75.11 Q 120.46 76.52 121.68 78.07 Q 122.89 79.62 123.88 81.29 Q 124.86 82.96 125.61 84.71 Q 126.36 86.46 126.88 88.26 Q 127.39 90.07 127.66 91.89 Q 127.93 93.71 127.97 95.53 Q 128 97.34 127.81 99.11 Q 127.61 100.87 127.2 102.57 Q 126.78 104.27 126.17 105.87 Q 125.55 107.47 124.75 108.96 Q 123.94 110.44 122.97 111.78 Q 122 113.12 120.89 114.3 Q 119.77 115.48 118.54 116.49 Q 117.31 117.49 115.98 118.31 Q 114.65 119.13 113.26 119.76 Q 111.87 120.39 110.44 120.83 Q 109.01 121.27 107.56 121.51 Q 106.11 121.75 104.68 121.8 Q 103.25 121.85 101.85 121.72 Q 100.46 121.58 99.12 121.27 Q 97.78 120.96 96.53 120.5 Q 95.27 120.03 94.12 119.42 Q 92.96 118.8 91.92 118.06 Q 90.88 117.31 89.97 116.46 Q 89.05 115.61 88.28 114.67 Q 87.51 113.73 86.89 112.73 Q 86.26 111.72 85.79 110.67 Q 85.31 109.62 84.99 108.55 Q 84.67 107.47 84.5 106.39 Q 84.33 105.31 84.3 104.25 Q 84.27 103.19 84.39 102.17 Q 84.5 101.15 84.74 100.18 Q 84.98 99.21 85.34 98.31 Q 85.7 97.41 86.16 96.6 Q 86.62 95.78 87.17 95.06 Q 87.71 94.33 88.33 93.71 Q 88.95 93.09 89.63 92.58 Q 90.3 92.07 91.02 91.68 Q 91.73 91.28 92.46 91 Q 93.19 90.71 93.93 90.54 Q 94.66 90.37 95.39 90.31 Q 96.11 90.24 96.81 90.28 Q 97.5 90.31 98.15 90.44 Q 98.8 90.57 99.4 90.79 L 100 91";
const START = { x: 100, y: 16 };
const OVERSIZE = 1.55;
const NUDGE = 0.035;

const frameEl = ref<HTMLDivElement | null>(null);
const pathEl = ref<SVGPathElement | null>(null);
const tileEl = ref<SVGGElement | null>(null);
const dragging = ref(false);
const reduced = ref(false);

const half = computed(() => props.tileSize / 2);
const radius = computed(() => Math.max(3, Math.min(18, props.tileSize * 0.23)));

let progress = 0;
let direction: 1 | -1 = 1;
let playing = true;
let draggingNow = false;
let moved = false;
let dragStartX = 0;
let dragStartProgress = 0;
let totalLen = 1;
let lastTime = 0;
let raf = 0;

function tangentDeg(atLen: number, total: number): number {
  const path = pathEl.value;
  if (!path) return 0;
  const eps = Math.max(0.6, total * 0.012);
  const a = path.getPointAtLength(Math.max(0, atLen - eps));
  const b = path.getPointAtLength(Math.min(total, atLen + eps));
  return (Math.atan2(b.y - a.y, b.x - a.x) * 180) / Math.PI;
}

function place(atLen: number, scale: number) {
  const path = pathEl.value;
  const tile = tileEl.value;
  if (!path || !tile) return;
  const clamped = Math.min(totalLen, Math.max(0, atLen));
  const at = path.getPointAtLength(clamped);
  const angle = props.alignToTangent ? tangentDeg(clamped, totalLen) : 0;
  tile.setAttribute("transform", `translate(${at.x.toFixed(2)} ${at.y.toFixed(2)}) rotate(${angle.toFixed(2)}) scale(${scale.toFixed(3)})`);
}

function tick(now: number) {
  raf = requestAnimationFrame(tick);
  if (lastTime === 0) lastTime = now;
  const dt = Math.min(0.1, (now - lastTime) / 1000);
  lastTime = now;
  if (playing && !draggingNow) {
    const dur = Math.max(0.1, props.duration);
    let p = progress + (direction * dt) / dur;
    if (p >= 1) {
      p = 1;
      direction = -1;
    } else if (p <= 0) {
      p = 0;
      direction = 1;
    }
    progress = p;
  }
  if (pathEl.value) pathEl.value.style.strokeDashoffset = String(1 - progress);
  place(progress * totalLen, OVERSIZE - (OVERSIZE - 1) * progress);
  frameEl.value?.setAttribute("aria-valuenow", String(Math.round(progress * 100)));
}

onMounted(() => {
  reduced.value = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true;
  const path = pathEl.value;
  if (!path) return;
  try {
    totalLen = path.getTotalLength() || 1;
  } catch {
    totalLen = 1;
  }
  if (reduced.value) {
    progress = 0.5;
    path.style.strokeDashoffset = "0";
    place(totalLen * 0.5, 1);
    frameEl.value?.setAttribute("aria-valuenow", "50");
    return;
  }
  raf = requestAnimationFrame(tick);
});

onUnmounted(() => cancelAnimationFrame(raf));

function onPointerDown(event: PointerEvent) {
  if (reduced.value) return;
  if (event.pointerType === "mouse" && event.button !== 0) return;
  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
  draggingNow = true;
  moved = false;
  dragStartX = event.clientX;
  dragStartProgress = progress;
  dragging.value = true;
}

function onPointerMove(event: PointerEvent) {
  if (!draggingNow || !frameEl.value) return;
  const rect = frameEl.value.getBoundingClientRect();
  const dx = event.clientX - dragStartX;
  if (Math.abs(dx) > 3) {
    moved = true;
    direction = dx > 0 ? 1 : -1;
  }
  const next = dragStartProgress + dx / Math.max(1, rect.width);
  progress = Math.min(1, Math.max(0, next));
}

function endDrag() {
  if (!draggingNow) return;
  draggingNow = false;
  dragging.value = false;
  playing = moved ? true : !playing;
}

function onKeyDown(event: KeyboardEvent) {
  if (reduced.value) return;
  if (event.key === " " || event.key === "Spacebar") {
    event.preventDefault();
    playing = !playing;
    return;
  }
  const forward = event.key === "ArrowRight" || event.key === "ArrowUp";
  const backward = event.key === "ArrowLeft" || event.key === "ArrowDown";
  if (!forward && !backward) return;
  event.preventDefault();
  const dir = forward ? 1 : -1;
  direction = dir;
  progress = Math.min(1, Math.max(0, progress + dir * NUDGE));
}
</script>

<template>
  <div class="pfl">
    <div
      ref="frameEl"
      class="pfl__frame"
      :class="{ 'pfl__frame--dragging': dragging, 'pfl__frame--reduced': reduced }"
      role="slider"
      aria-label="Path follower playback position"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="0"
      tabindex="0"
      @pointerdown="onPointerDown"
      @pointermove="onPointerMove"
      @pointerup="endDrag"
      @pointercancel="endDrag"
      @lostpointercapture="endDrag"
      @keydown="onKeyDown"
    >
      <svg :viewBox="`0 0 ${VIEW} ${VIEW}`" class="pfl__svg" aria-hidden="true">
        <path
          ref="pathEl"
          :d="SPIRAL_D"
          fill="none"
          :stroke="accent"
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          stroke-opacity="0.46"
          pathLength="1"
          stroke-dasharray="1 1"
          stroke-dashoffset="1"
        />
        <g ref="tileEl" :transform="`translate(${START.x} ${START.y})`">
          <rect :x="-half - 7" :y="-half - 7" :width="tileSize + 14" :height="tileSize + 14" :rx="radius + 7" :fill="accent" class="pfl__halo" />
          <rect :x="-half" :y="-half" :width="tileSize" :height="tileSize" :rx="radius" :fill="accent" />
          <rect
            :x="-half + tileSize * 0.14"
            :y="-half + tileSize * 0.14"
            :width="tileSize * 0.42"
            :height="tileSize * 0.3"
            :rx="Math.max(2, radius * 0.5)"
            fill="#ffffff"
            opacity="0.24"
          />
        </g>
      </svg>
    </div>
  </div>
</template>

<style scoped>
.pfl {
  width: 100%;
}
.pfl__frame {
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.02);
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.pfl__frame--dragging {
  cursor: grabbing;
}
.pfl__frame--reduced {
  cursor: default;
}
.pfl__frame:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.7);
  outline-offset: 2px;
}
.pfl__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pfl__halo {
  opacity: 0.2;
  filter: blur(7px);
  transition: opacity 200ms ease;
}
.pfl__frame--dragging .pfl__halo {
  opacity: 0.34;
}
</style>

Nearby