"use client";

import { NeonTrailCursor } from "./index";

export interface DemoProps {
  trailLength?: number;
  width?: number;
  followSpeed?: number;
  idleFade?: boolean;
  color?: string;
  tailColor?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ trailLength = 40, width = 8, followSpeed = 0.16, idleFade = true, color = "#FF6A1F", tailColor = "#F5C542" }: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <NeonTrailCursor
        trailLength={trailLength}
        width={width}
        followSpeed={followSpeed}
        idleFade={idleFade}
        color={color}
        tailColor={tailColor}
        className="h-[320px] rounded-xl border border-white/10"
      >
        <p className="pointer-events-none absolute inset-x-6 bottom-5 max-w-xs text-xs text-white/35 sm:inset-x-8 sm:bottom-6">
          Every path we draw fades before the next one begins.
        </p>
      </NeonTrailCursor>
    </div>
  );
}

1d:T1f78, 1e:T19bd1,

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

const props = withDefaults(
  defineProps<{
    trailLength?: number;
    width?: number;
    followSpeed?: number;
    idleFade?: boolean;
    color?: string;
    tailColor?: string;
  }>(),
  { trailLength: 40, width: 8, followSpeed: 0.16, idleFade: true, color: "#FF6A1F", tailColor: "#F5C542" },
);

const TAU = Math.PI * 2;
const TAPER_POWER = 1.35;
const HALO_WIDTH_MULT = 4.6;
const HALO_BLUR_MULT = 2.1;
const HALO_ALPHA = 0.17;
const CORE_ALPHA = 0.94;
const IDLE_DELAY = 650;
const IDLE_FADE_MS = 950;
const PULSE_SPEED = 1.6;
const PULSE_WAVELENGTH = 2.6;
const PULSE_DEPTH = 0.24;

const clamp = (v: number, lo: number, hi: number) => (v < lo ? lo : v > hi ? hi : v);
function hexToRgb(hex: string): [number, number, number] {
  const n = Number.parseInt(hex.replace("#", ""), 16) || 0;
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
const lerp = (a: number, b: number, t: number) => a + (b - a) * t;

interface Sample {
  x: number;
  y: number;
}

const hostEl = ref<HTMLDivElement | null>(null);
const canvasEl = ref<HTMLCanvasElement | null>(null);
let cleanup: (() => void) | null = null;

function boot() {
  cleanup?.();
  const host = hostEl.value;
  const canvas = canvasEl.value;
  const ctx = canvas?.getContext("2d");
  if (!host || !canvas || !ctx) return;

  const reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const headRgb = hexToRgb(props.color);
  const tailRgb = hexToRgb(props.tailColor);
  const cap = clamp(Math.round(props.trailLength), 4, 128);

  let w = Math.max(1, host.clientWidth);
  let h = Math.max(1, host.clientHeight);
  let targetX = w / 2;
  let targetY = h / 2;
  let headX = targetX;
  let headY = targetY;
  const history: Sample[] = [];

  const resize = () => {
    const rect = host.getBoundingClientRect();
    const nw = Math.max(1, Math.round(rect.width));
    const nh = Math.max(1, Math.round(rect.height));
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    if (nw !== w || nh !== h) {
      const sx = nw / w;
      const sy = nh / h;
      targetX *= sx;
      targetY *= sy;
      headX *= sx;
      headY *= sy;
      for (const p of history) {
        p.x *= sx;
        p.y *= sy;
      }
      w = nw;
      h = nh;
    }
    canvas.width = Math.round(w * dpr);
    canvas.height = Math.round(h * dpr);
    canvas.style.width = `${w}px`;
    canvas.style.height = `${h}px`;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  };

  const observer = new ResizeObserver(resize);
  observer.observe(host);
  resize();

  if (reduced) {
    const drawStatic = () => {
      ctx.clearRect(0, 0, w, h);
      ctx.globalCompositeOperation = "lighter";
      const r = Math.max(4, props.width * 2.4);
      const grad = ctx.createRadialGradient(targetX, targetY, 0, targetX, targetY, r);
      grad.addColorStop(0, `rgba(${headRgb.join(",")}, 0.85)`);
      grad.addColorStop(0.45, `rgba(${headRgb.join(",")}, 0.3)`);
      grad.addColorStop(1, `rgba(${headRgb.join(",")}, 0)`);
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.arc(targetX, targetY, r, 0, TAU);
      ctx.fill();
      ctx.globalCompositeOperation = "source-over";
    };
    const onMove = (event: PointerEvent) => {
      const rect = host.getBoundingClientRect();
      targetX = event.clientX - rect.left;
      targetY = event.clientY - rect.top;
      drawStatic();
    };
    drawStatic();
    host.addEventListener("pointermove", onMove, { passive: true });
    host.addEventListener("pointerdown", onMove, { passive: true });
    cleanup = () => {
      observer.disconnect();
      host.removeEventListener("pointermove", onMove);
      host.removeEventListener("pointerdown", onMove);
    };
    return;
  }

  let autoplay = true;
  let lastMoveAt = performance.now();
  let clock = 0;
  const bornAt = performance.now();

  const onMove = (event: PointerEvent) => {
    const rect = host.getBoundingClientRect();
    targetX = event.clientX - rect.left;
    targetY = event.clientY - rect.top;
    autoplay = false;
    lastMoveAt = performance.now();
  };
  host.addEventListener("pointermove", onMove, { passive: true });
  host.addEventListener("pointerdown", onMove, { passive: true });

  let raf = 0;
  let last = performance.now();
  const frame = (now: number) => {
    raf = requestAnimationFrame(frame);
    const dt = Math.min((now - last) / 1000, 0.05);
    last = now;
    clock += dt;

    if (autoplay) {
      const t = (now - bornAt) / 1000;
      const ax = Math.min(w * 0.34, 170);
      const ay = Math.min(h * 0.3, 110);
      targetX = w / 2 + Math.sin(t * 0.55) * ax;
      targetY = h / 2 + Math.sin(t * 0.9 + 0.6) * ay;
    }

    headX += (targetX - headX) * props.followSpeed;
    headY += (targetY - headY) * props.followSpeed;
    history.push({ x: headX, y: headY });
    if (history.length > cap) history.splice(0, history.length - cap);

    let alphaScale = 1;
    if (props.idleFade && !autoplay) {
      const idleFor = now - lastMoveAt;
      if (idleFor > IDLE_DELAY) alphaScale = clamp(1 - (idleFor - IDLE_DELAY) / IDLE_FADE_MS, 0, 1);
    }

    ctx.clearRect(0, 0, w, h);
    const n = history.length;
    if (alphaScale <= 0.003 || n < 2) return;

    ctx.globalCompositeOperation = "lighter";
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    const denom = Math.max(1, n - 1);

    for (let pass = 0; pass < 2; pass++) {
      const halo = pass === 0;
      for (let i = 1; i < n; i++) {
        const p0 = history[i - 1]!;
        const p1 = history[i]!;
        const age = 1 - i / denom;
        const t = Math.pow(age, TAPER_POWER);
        const pulse = 1 + PULSE_DEPTH * Math.sin(clock * PULSE_SPEED - t * PULSE_WAVELENGTH * TAU);
        const rgb: [number, number, number] = [lerp(headRgb[0], tailRgb[0], t), lerp(headRgb[1], tailRgb[1], t), lerp(headRgb[2], tailRgb[2], t)];
        const coreW = Math.max(0.5, props.width * (1 - t));
        const alpha = clamp((halo ? HALO_ALPHA : CORE_ALPHA) * (1 - t) * pulse * alphaScale, 0, 1);
        if (alpha <= 0.004) continue;
        const rgba = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
        ctx.strokeStyle = rgba;
        ctx.lineWidth = halo ? coreW * HALO_WIDTH_MULT : coreW;
        ctx.shadowColor = halo ? rgba : "transparent";
        ctx.shadowBlur = halo ? coreW * HALO_BLUR_MULT : 0;
        ctx.beginPath();
        ctx.moveTo(p0.x, p0.y);
        ctx.lineTo(p1.x, p1.y);
        ctx.stroke();
      }
    }
    ctx.shadowBlur = 0;

    const head = history[n - 1]!;
    const hotR = Math.max(1.5, props.width * 0.9);
    const hotAlpha = 0.82 * alphaScale;
    if (hotAlpha > 0.004) {
      const grad = ctx.createRadialGradient(head.x, head.y, 0, head.x, head.y, hotR);
      grad.addColorStop(0, `rgba(${headRgb.join(",")}, ${hotAlpha})`);
      grad.addColorStop(1, `rgba(${headRgb.join(",")}, 0)`);
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.arc(head.x, head.y, hotR, 0, TAU);
      ctx.fill();
    }
    ctx.globalCompositeOperation = "source-over";
  };
  raf = requestAnimationFrame(frame);

  cleanup = () => {
    cancelAnimationFrame(raf);
    observer.disconnect();
    host.removeEventListener("pointermove", onMove);
    host.removeEventListener("pointerdown", onMove);
  };
}

onMounted(boot);
watch(() => [props.trailLength, props.width, props.followSpeed, props.idleFade, props.color, props.tailColor], boot);
onBeforeUnmount(() => cleanup?.());
</script>

<template>
  <div ref="hostEl" class="neon-trail-cursor">
    <canvas ref="canvasEl" aria-hidden="true" class="neon-trail-cursor__canvas" />
    <slot />
  </div>
</template>

<style scoped>
.neon-trail-cursor {
  position: relative;
  isolation: isolate;
  min-height: 160px;
  width: 100%;
  overflow: hidden;
  background: #0b0d10;
  touch-action: none;
}
.neon-trail-cursor__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
</style>

Nearby