"use client";

import { TrailingCursorArrow } from "./index";

export interface DemoProps {
  stiffness?: number;
  damping?: number;
  size?: number;
  accent?: string;
  rotate?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ stiffness = 400, damping = 45, size = 46, accent = "#FF6A1F", rotate = true }: DemoProps) {
  return (
    <div className="w-full p-4">
      <TrailingCursorArrow stiffness={stiffness} damping={damping} size={size} accent={accent} rotate={rotate} />
    </div>
  );
}

1d:T28b1, 1e:T1f026,

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

const props = withDefaults(
  defineProps<{
    stiffness?: number;
    damping?: number;
    size?: number;
    accent?: string;
    rotate?: boolean;
    label?: string;
  }>(),
  { stiffness: 400, damping: 45, size: 46, accent: "#FF6A1F", rotate: true, label: "Move your pointer over this panel" },
);

/** Speed, in px/s, a sample must clear before it is allowed to steer the heading. */
const HEADING_SPEED = 46;
/** Speed, in px/s, at which the squash effect is fully saturated. */
const SQUASH_SPAN = 1500;
/** Largest fraction the arrow shrinks by at full squash. */
const SQUASH_MAX = 0.26;
/** Time with no fast sample before the squash releases back to full size, in ms. */
const SQUASH_SETTLE_MS = 170;
/** Real-pointer silence before the idle sweep takes the wheel back, in ms. */
const IDLE_AFTER_MS = 1300;
/** Where the tip sits inside the drawn arrow's box, as a fraction of its size. */
const TIP = { x: 22 / 24, y: 12 / 24 };
/** Spring constants for the two afterimages chasing the main arrow: nearer, then farther. */
const ECHO1_STIFFNESS = 90;
const ECHO1_DAMPING = 21;
const ECHO2_STIFFNESS = 46;
const ECHO2_DAMPING = 15;
const ECHO1_OPACITY = 0.32;
const ECHO2_OPACITY = 0.15;
const ECHO1_VISUAL_SCALE = 0.82;
const ECHO2_VISUAL_SCALE = 0.62;

const panel = ref<HTMLElement | null>(null);
const arrow = ref<HTMLElement | null>(null);
const echo1 = ref<HTMLElement | null>(null);
const echo2 = ref<HTMLElement | null>(null);
const headingEl = ref<HTMLElement | null>(null);
const armed = ref(false);
let stop: (() => void) | null = null;

/** Nudges `current` (degrees, unbounded) toward `target` by the shortest turn, never past 180°. */
function unwindHeading(target: number, current: number) {
  let delta = (target - current) % 360;
  if (delta > 180) delta -= 360;
  if (delta < -180) delta += 360;
  return current + delta;
}

/** A slow two-frequency drift the panel plays before a real pointer has visited it. */
function idlePoint(t: number, width: number, height: number) {
  const cx = width / 2;
  const cy = height / 2;
  const ax = Math.max(30, width * 0.34);
  const ay = Math.max(22, height * 0.3);
  return {
    x: cx + Math.sin(t * 0.55) * ax,
    y: cy + Math.sin(t * 0.87 + 1.4) * ay * 0.7 + Math.sin(t * 0.31) * ay * 0.3,
  };
}

/** One semi-implicit Euler step of a damped spring toward `target`. */
function springStep(pos: number, vel: number, target: number, stiffness: number, damping: number, mass: number, dt: number) {
  const accel = (-stiffness * (pos - target) - damping * vel) / mass;
  const nextVel = vel + accel * dt;
  return { pos: pos + nextVel * dt, vel: nextVel };
}

onMounted(() => {
  const panelEl = panel.value;
  const arrowEl = arrow.value;
  const echo1El = echo1.value;
  const echo2El = echo2.value;
  const headingText = headingEl.value;
  if (!panelEl || !arrowEl || !echo1El || !echo2El || typeof window.matchMedia !== "function") return;
  const fine = window.matchMedia("(pointer: fine) and (hover: hover)");
  if (!fine.matches) return; // Touch and coarse pointers: never arm, system cursor stays as-is.
  armed.value = true;

  let box = { width: 0, height: 0 };
  const measure = () => {
    const rect = panelEl.getBoundingClientRect();
    box = { width: rect.width, height: rect.height };
  };
  measure();
  const resize = new ResizeObserver(measure);
  resize.observe(panelEl);

  const calmQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  const start = idlePoint(0, box.width, box.height);
  const pointer = { x: start.x, y: start.y };
  let lastX = start.x;
  let lastY = start.y;
  let px = start.x;
  let py = start.y;
  let pvx = 0;
  let pvy = 0;
  let e1x = start.x;
  let e1y = start.y;
  let e1vx = 0;
  let e1vy = 0;
  let e2x = start.x;
  let e2y = start.y;
  let e2vx = 0;
  let e2vy = 0;
  let heading = 0;
  let rHeading = 0;
  let rHeadingVel = 0;
  let scale = 1;
  let scaleVel = 0;
  let scaleTarget = 1;
  let raf = 0;
  let mode: "idle" | "live" = "idle";
  let idleStart = performance.now();
  let lastMoveAt = 0;
  let lastFrameT = performance.now();
  let settleTimer = 0;

  const onMove = (event: PointerEvent) => {
    if (event.pointerType !== "mouse" && event.pointerType !== "pen") return;
    const rect = panelEl.getBoundingClientRect();
    pointer.x = event.clientX - rect.left;
    pointer.y = event.clientY - rect.top;
    mode = "live";
    lastMoveAt = performance.now();
  };
  panelEl.addEventListener("pointermove", onMove, { passive: true });

  const frame = (now: number) => {
    raf = requestAnimationFrame(frame);
    const dtMs = now - lastFrameT;
    lastFrameT = now;
    if (dtMs <= 0) return;
    const dt = Math.min(dtMs, 50) / 1000;

    if (mode === "live" && now - lastMoveAt > IDLE_AFTER_MS) {
      mode = "idle";
      idleStart = now;
    }
    const target = mode === "live" ? pointer : idlePoint((now - idleStart) / 1000, box.width, box.height);

    const dx = target.x - lastX;
    const dy = target.y - lastY;
    lastX = target.x;
    lastY = target.y;
    const speed = (Math.hypot(dx, dy) / dtMs) * 1000;
    const calm = calmQuery.matches;
    if (speed >= HEADING_SPEED) {
      if (props.rotate && !calm) heading = unwindHeading((Math.atan2(dy, dx) * 180) / Math.PI, heading);
      if (!calm) {
        const k = Math.min(1, speed / SQUASH_SPAN);
        scaleTarget = 1 - k * SQUASH_MAX;
        window.clearTimeout(settleTimer);
        settleTimer = window.setTimeout(() => {
          scaleTarget = 1;
        }, SQUASH_SETTLE_MS);
      }
    }
    if (calm || !props.rotate) heading = 0;
    if (calm) scaleTarget = 1;

    const k = calm ? Math.max(props.stiffness * 2.4, 900) : props.stiffness;
    const c = calm ? Math.max(props.damping * 2, 90) : props.damping;
    const sx = springStep(px, pvx, target.x, k, c, 1, dt);
    px = sx.pos;
    pvx = sx.vel;
    const sy = springStep(py, pvy, target.y, k, c, 1, dt);
    py = sy.pos;
    pvy = sy.vel;
    const sh = springStep(rHeading, rHeadingVel, heading, k, c, 1, dt);
    rHeading = sh.pos;
    rHeadingVel = sh.vel;
    const ss = springStep(scale, scaleVel, scaleTarget, 320, 20, 0.6, dt);
    scale = ss.pos;
    scaleVel = ss.vel;

    const eK1 = calm ? Math.max(ECHO1_STIFFNESS * 2.4, 900) : ECHO1_STIFFNESS;
    const eC1 = calm ? Math.max(ECHO1_DAMPING * 2, 90) : ECHO1_DAMPING;
    const eK2 = calm ? Math.max(ECHO2_STIFFNESS * 2.4, 900) : ECHO2_STIFFNESS;
    const eC2 = calm ? Math.max(ECHO2_DAMPING * 2, 90) : ECHO2_DAMPING;
    const s1x = springStep(e1x, e1vx, px, eK1, eC1, 1, dt);
    e1x = s1x.pos;
    e1vx = s1x.vel;
    const s1y = springStep(e1y, e1vy, py, eK1, eC1, 1, dt);
    e1y = s1y.pos;
    e1vy = s1y.vel;
    const s2x = springStep(e2x, e2vx, e1x, eK2, eC2, 1, dt);
    e2x = s2x.pos;
    e2vx = s2x.vel;
    const s2y = springStep(e2y, e2vy, e1y, eK2, eC2, 1, dt);
    e2y = s2y.pos;
    e2vy = s2y.vel;

    const hotX = props.size * TIP.x;
    const hotY = props.size * TIP.y;
    arrowEl.style.transform = `translate3d(${(px - hotX).toFixed(2)}px, ${(py - hotY).toFixed(2)}px, 0) rotate(${rHeading.toFixed(2)}deg) scale(${scale.toFixed(4)})`;
    echo1El.style.transform = `translate3d(${(e1x - hotX).toFixed(2)}px, ${(e1y - hotY).toFixed(2)}px, 0) rotate(${rHeading.toFixed(2)}deg) scale(${(scale * ECHO1_VISUAL_SCALE).toFixed(4)})`;
    echo1El.style.opacity = calm ? "0" : String(ECHO1_OPACITY);
    echo2El.style.transform = `translate3d(${(e2x - hotX).toFixed(2)}px, ${(e2y - hotY).toFixed(2)}px, 0) rotate(${rHeading.toFixed(2)}deg) scale(${(scale * ECHO2_VISUAL_SCALE).toFixed(4)})`;
    echo2El.style.opacity = calm ? "0" : String(ECHO2_OPACITY);
    if (headingText) {
      const deg = ((rHeading % 360) + 360) % 360;
      headingText.textContent = `${Math.round(deg)}°`;
    }
  };
  raf = requestAnimationFrame(frame);

  stop = () => {
    cancelAnimationFrame(raf);
    window.clearTimeout(settleTimer);
    resize.disconnect();
    panelEl.removeEventListener("pointermove", onMove);
  };
});

onBeforeUnmount(() => stop?.());
</script>

<template>
  <div ref="panel" class="trailing-cursor" :class="{ 'is-armed': armed }">
    <span class="trailing-cursor__label">{{ label }}</span>
    <span ref="headingEl" aria-hidden="true" class="trailing-cursor__heading">0°</span>
    <svg ref="echo2" class="trailing-cursor__arrow trailing-cursor__echo" :width="size" :height="size" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M22 12 L2 3 L8 12 L2 21 Z" :fill="accent" />
    </svg>
    <svg ref="echo1" class="trailing-cursor__arrow trailing-cursor__echo" :width="size" :height="size" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M22 12 L2 3 L8 12 L2 21 Z" :fill="accent" />
    </svg>
    <svg
      ref="arrow"
      class="trailing-cursor__arrow"
      :width="size"
      :height="size"
      viewBox="0 0 24 24"
      aria-hidden="true"
      focusable="false"
    >
      <path d="M22 12 L2 3 L8 12 L2 21 Z" :fill="accent" opacity="0.55" style="filter: blur(3px)" />
      <path d="M22 12 L2 3 L8 12 L2 21 Z" transform="translate(0.6 1.1)" fill="rgba(4,6,10,0.55)" />
      <path d="M22 12 L2 3 L8 12 L2 21 Z" :fill="accent" stroke="rgba(255,255,255,0.92)" stroke-width="1.6" stroke-linejoin="round" paint-order="stroke" />
    </svg>
  </div>
</template>

<style scoped>
.trailing-cursor {
  position: relative;
  isolation: isolate;
  display: flex;
  height: 300px;
  width: 100%;
  overflow: hidden;
  user-select: none;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 16px;
  background: #0e1116;
}
.trailing-cursor.is-armed {
  cursor: none;
}
.trailing-cursor__label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  max-width: 70%;
  font: 400 13px/1.4 system-ui, sans-serif;
  color: rgb(255 255 255 / 0.45);
  pointer-events: none;
}
.trailing-cursor__heading {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  font: 400 11px/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.35);
  pointer-events: none;
}
.trailing-cursor__echo {
  opacity: 0;
}
.trailing-cursor__arrow {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  pointer-events: none;
  transform-origin: 91.667% 50%;
  will-change: transform;
}
.trailing-cursor.is-armed .trailing-cursor__arrow {
  display: block;
}
</style>

Nearby