"use client";

import { SwarmTrailCursor } from "./index";

export interface DemoProps {
  count?: number;
  accent?: string;
  blobSize?: number;
  speed?: number;
  trail?: number;
  scatterOnPress?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  count = 10,
  accent = "#9BE15D",
  blobSize = 10,
  speed = 2.5,
  trail = 0.75,
  scatterOnPress = true,
}: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <SwarmTrailCursor
        count={count}
        accent={accent}
        blobSize={blobSize}
        speed={speed}
        trail={trail}
        scatterOnPress={scatterOnPress}
        className="h-[320px]"
      >
        <div className="pointer-events-none absolute inset-x-0 bottom-7 flex flex-col items-center gap-1 text-center">
          <p className="text-[11px] font-medium uppercase tracking-[0.2em] text-white/40">Pointer field</p>
          <p className="text-sm text-white/55">Move to steer the swarm, press to scatter it</p>
        </div>
      </SwarmTrailCursor>
    </div>
  );
}

1e:T2a2f, 1f:T2413b,

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

const props = withDefaults(
  defineProps<{
    count?: number;
    accent?: string;
    blobSize?: number;
    speed?: number;
    trail?: number;
    scatterOnPress?: boolean;
  }>(),
  { count: 10, accent: "#9BE15D", blobSize: 10, speed: 2.5, trail: 0.75, scatterOnPress: true },
);

interface Blob {
  x: number;
  y: number;
  angle: number;
  angularBase: number;
  baseRadius: number;
  wanderAmp: number;
  wanderFreq: number;
  wanderPhase: number;
  agility: number;
  sizeMult: number;
  scatterVX: number;
  scatterVY: number;
  scatterT: number;
  trail: { x: number; y: number }[];
}

const TAU = Math.PI * 2;
const HALO_BLUR = 16;
const CORE_BLUR = 6;
const CORE_CONTRAST = 24;
const SCATTER_DURATION = 0.5;
const SCATTER_DAMPING = 4.6;
const ANCHOR_TRACK = 10;
const ANCHOR_IDLE = 3.2;

function clamp(v: number, lo: number, hi: number) {
  return v < lo ? lo : v > hi ? hi : v;
}

function hexToRgb(hex: string): [number, number, number] {
  const raw = hex.replace("#", "");
  const full = raw.length === 3 ? raw.replace(/./g, (c) => c + c) : raw.padEnd(6, "0").slice(0, 6);
  const n = Number.parseInt(full, 16) || 0;
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}

function haloTint([r, g, b]: [number, number, number]): [number, number, number] {
  return [Math.round(r + (255 - r) * 0.4), Math.round(g + (255 - g) * 0.48), Math.round(b + (255 - b) * 0.58)];
}

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

function start(): (() => void) | null {
  const host = hostEl.value;
  const canvas = canvasEl.value;
  if (!host || !canvas) return null;
  const ctx = canvas.getContext("2d");
  if (!ctx) return null;

  const field = document.createElement("canvas");
  const halo = document.createElement("canvas");
  const core = document.createElement("canvas");
  const fieldCtx = field.getContext("2d");
  const haloCtx = halo.getContext("2d");
  const coreCtx = core.getContext("2d");
  if (!fieldCtx || !haloCtx || !coreCtx) return null;

  const accentRgb = hexToRgb(props.accent);
  const haloRgb = haloTint(accentRgb);
  const accentRGBA = `rgba(${accentRgb[0]}, ${accentRgb[1]}, ${accentRgb[2]}, 1)`;
  const haloRGBA = `rgba(${haloRgb[0]}, ${haloRgb[1]}, ${haloRgb[2]}, 1)`;

  const blobSize = props.blobSize;
  const speed = props.speed;
  const trailMax = Math.round(clamp(props.trail, 0, 1.5) * 22);
  const total = Math.round(clamp(props.count, 3, 40));
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  const reduced = mq.matches;

  let w = Math.max(1, host.clientWidth);
  let h = Math.max(1, host.clientHeight);

  const spawn = (cx: number, cy: number): Blob => {
    const hand = Math.random() < 0.5 ? 1 : -1;
    return {
      x: cx,
      y: cy,
      angle: Math.random() * TAU,
      angularBase: hand * (0.5 + Math.random() * 0.65),
      baseRadius: 22 + Math.random() * 46,
      wanderAmp: 8 + Math.random() * 22,
      wanderFreq: 0.12 + Math.random() * 0.24,
      wanderPhase: Math.random() * TAU,
      agility: 0.55 + Math.random() * 1.05,
      sizeMult: 0.6 + Math.random() * 0.95,
      scatterVX: 0,
      scatterVY: 0,
      scatterT: 0,
      trail: [],
    };
  };

  const blobs: Blob[] = [];
  for (let i = 0; i < total; i++) blobs.push(spawn(w / 2, h / 2));

  const anchor = { x: w / 2, y: h / 2, tx: w / 2, ty: h / 2 };
  let tracking = false;
  let clock = 0;

  const fit = (cv: HTMLCanvasElement, cx2: CanvasRenderingContext2D, dpr: number) => {
    cv.width = Math.round(w * dpr);
    cv.height = Math.round(h * dpr);
    cv.style.width = `${w}px`;
    cv.style.height = `${h}px`;
    cx2.setTransform(dpr, 0, 0, dpr, 0, 0);
  };

  const layoutReduced = () => {
    const cx = w / 2;
    const cy = h / 2;
    const r = Math.min(w, h) * 0.09;
    blobs.forEach((b, i) => {
      const a = (i / blobs.length) * TAU;
      b.x = cx + Math.cos(a) * (r + (i % 3) * 3);
      b.y = cy + Math.sin(a) * (r + (i % 3) * 3);
      b.trail.length = 0;
    });
  };

  const drawFrame = () => {
    fieldCtx.clearRect(0, 0, w, h);
    fieldCtx.fillStyle = "#fff";
    for (const b of blobs) {
      const r = blobSize * b.sizeMult;
      const n = b.trail.length;
      for (let i = 0; i < n; i++) {
        const t = i / n;
        const seg = b.trail[i];
        const rad = r * (0.12 + 0.7 * t);
        fieldCtx.globalAlpha = 0.16 + 0.5 * t;
        fieldCtx.beginPath();
        fieldCtx.arc(seg.x, seg.y, rad, 0, TAU);
        fieldCtx.fill();
      }
      fieldCtx.globalAlpha = 1;
      fieldCtx.beginPath();
      fieldCtx.arc(b.x, b.y, r, 0, TAU);
      fieldCtx.fill();
    }

    haloCtx.clearRect(0, 0, w, h);
    haloCtx.filter = `blur(${HALO_BLUR}px)`;
    haloCtx.drawImage(field, 0, 0, w, h);
    haloCtx.filter = "none";
    haloCtx.globalCompositeOperation = "source-in";
    haloCtx.fillStyle = haloRGBA;
    haloCtx.fillRect(0, 0, w, h);
    haloCtx.globalCompositeOperation = "source-over";

    coreCtx.clearRect(0, 0, w, h);
    coreCtx.filter = `blur(${CORE_BLUR}px) contrast(${CORE_CONTRAST})`;
    coreCtx.drawImage(field, 0, 0, w, h);
    coreCtx.filter = "none";
    coreCtx.globalCompositeOperation = "source-in";
    coreCtx.fillStyle = accentRGBA;
    coreCtx.fillRect(0, 0, w, h);
    coreCtx.globalCompositeOperation = "source-over";

    ctx.clearRect(0, 0, w, h);
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.85;
    ctx.drawImage(halo, 0, 0, w, h);
    ctx.globalAlpha = 1;
    ctx.globalCompositeOperation = "source-over";
    ctx.drawImage(core, 0, 0, w, h);
  };

  const step = (dt: number) => {
    const trackRate = tracking ? ANCHOR_TRACK : ANCHOR_IDLE;
    anchor.x += (anchor.tx - anchor.x) * (1 - Math.exp(-dt * trackRate));
    anchor.y += (anchor.ty - anchor.y) * (1 - Math.exp(-dt * trackRate));
    clock += dt * speed;

    for (const b of blobs) {
      b.angle += b.angularBase * speed * dt;
      const radius = b.baseRadius + Math.sin(clock * b.wanderFreq + b.wanderPhase) * b.wanderAmp;
      const tx2 = anchor.x + Math.cos(b.angle) * radius;
      const ty2 = anchor.y + Math.sin(b.angle) * radius;

      if (b.scatterT > 0) {
        b.scatterT = Math.max(0, b.scatterT - dt / SCATTER_DURATION);
        const decay = Math.exp(-dt * SCATTER_DAMPING);
        b.scatterVX *= decay;
        b.scatterVY *= decay;
        b.x += b.scatterVX * dt;
        b.y += b.scatterVY * dt;
        const pull = (1 - b.scatterT) * (1 - Math.exp(-b.agility * speed * dt * 3.2));
        b.x += (tx2 - b.x) * pull;
        b.y += (ty2 - b.y) * pull;
      } else {
        const ease = 1 - Math.exp(-b.agility * speed * dt * 3.2);
        b.x += (tx2 - b.x) * ease;
        b.y += (ty2 - b.y) * ease;
      }
    }

    for (let i = 0; i < blobs.length; i++) {
      const a = blobs[i];
      for (let j = i + 1; j < blobs.length; j++) {
        const c = blobs[j];
        const dx = c.x - a.x;
        const dy = c.y - a.y;
        const d = Math.hypot(dx, dy);
        const minD = (blobSize * a.sizeMult + blobSize * c.sizeMult) * 1.05;
        if (d < minD) {
          const push = (d > 0.0001 ? (minD - d) / d : 1) * 0.5;
          const ox = (d > 0.0001 ? dx : 1) * push * 0.5;
          const oy = (d > 0.0001 ? dy : 0) * push * 0.5;
          a.x -= ox;
          a.y -= oy;
          c.x += ox;
          c.y += oy;
        }
      }
    }

    if (trailMax > 0) {
      for (const b of blobs) {
        b.trail.push({ x: b.x, y: b.y });
        if (b.trail.length > trailMax) b.trail.shift();
      }
    }
  };

  const resize = () => {
    const rect = host.getBoundingClientRect();
    w = Math.max(1, Math.round(rect.width));
    h = Math.max(1, Math.round(rect.height));
    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    fit(canvas, ctx, dpr);
    fit(field, fieldCtx, dpr);
    fit(halo, haloCtx, dpr);
    fit(core, coreCtx, dpr);
    if (!tracking) {
      anchor.tx = w / 2;
      anchor.ty = h / 2;
    }
    if (reduced) {
      layoutReduced();
      drawFrame();
    }
  };

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

  let raf = 0;
  const onMove = (event: PointerEvent) => {
    const rect = host.getBoundingClientRect();
    anchor.tx = event.clientX - rect.left;
    anchor.ty = event.clientY - rect.top;
    tracking = true;
  };
  const onLeave = () => {
    tracking = false;
  };
  const onDown = (event: PointerEvent) => {
    if (!props.scatterOnPress) return;
    const rect = host.getBoundingClientRect();
    const px = event.clientX - rect.left;
    const py = event.clientY - rect.top;
    for (const b of blobs) {
      const dx = b.x - px;
      const dy = b.y - py;
      const d = Math.hypot(dx, dy) || 0.001;
      const near = Math.max(0, 1 - d / 180);
      const power = 240 + near * 260 + Math.random() * 70;
      b.scatterVX = (dx / d) * power;
      b.scatterVY = (dy / d) * power;
      b.scatterT = 1;
    }
  };
  const onScheme = () => restart();
  mq.addEventListener("change", onScheme);

  if (reduced) {
    layoutReduced();
    drawFrame();
  } else {
    host.addEventListener("pointermove", onMove, { passive: true });
    host.addEventListener("pointerleave", onLeave, { passive: true });
    host.addEventListener("pointerdown", onDown, { passive: true });
    let last = performance.now();
    const frame = (now: number) => {
      const dt = Math.min((now - last) / 1000, 0.05);
      last = now;
      step(dt);
      drawFrame();
      raf = requestAnimationFrame(frame);
    };
    raf = requestAnimationFrame(frame);
  }

  return () => {
    cancelAnimationFrame(raf);
    observer.disconnect();
    mq.removeEventListener("change", onScheme);
    host.removeEventListener("pointermove", onMove);
    host.removeEventListener("pointerleave", onLeave);
    host.removeEventListener("pointerdown", onDown);
  };
}

function restart() {
  stop?.();
  stop = start();
}

onMounted(restart);
watch(() => [props.count, props.accent, props.blobSize, props.speed, props.trail, props.scatterOnPress], restart);
onBeforeUnmount(() => {
  stop?.();
  stop = null;
});
</script>

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

<style scoped>
.swarm-trail-cursor {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 220px;
  overflow: hidden;
  touch-action: none;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #0b0d10;
}
.swarm-trail-cursor__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby