"use client";

import { FannedWaveThreads } from "./index";

export interface DemoProps {
  color?: string;
  amplitude?: number;
  spread?: number;
  lineCount?: number;
  speed?: number;
  interactive?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  color = "#38BDF8",
  amplitude = 1,
  spread = 0.2,
  lineCount = 40,
  speed = 1,
  interactive = true,
}: DemoProps) {
  return (
    <div className="w-full">
      <FannedWaveThreads
        color={color}
        amplitude={amplitude}
        spread={spread}
        lineCount={lineCount}
        speed={speed}
        interactive={interactive}
        className="h-[320px] rounded-2xl border border-white/10"
      >
        <div className="pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between p-6 sm:p-8">
          <span className="text-[11px] font-medium uppercase tracking-[0.2em] text-white/45">Signal bundle</span>
          <span className="font-mono text-[11px] text-white/35">{lineCount} threads</span>
        </div>
      </FannedWaveThreads>
    </div>
  );
}

1e:T1f08, 1f:T1b123,

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

const props = withDefaults(
  defineProps<{
    color?: string;
    amplitude?: number;
    spread?: number;
    lineCount?: number;
    speed?: number;
    interactive?: boolean;
  }>(),
  {
    color: "#38BDF8",
    amplitude: 1,
    spread: 0.2,
    lineCount: 40,
    speed: 1,
    interactive: true,
  },
);

const SEGMENTS = 72;
const BANDS = 4;
const MAX_BLUR = 6;

const clamp = (v: number, lo: number, hi: number) => (v < lo ? lo : v > hi ? hi : v);

function smoothstep(edge0: number, edge1: number, x: number) {
  const t = clamp((x - edge0) / (edge1 - edge0), 0, 1);
  return t * t * (3 - 2 * t);
}

function hash(n: number): number {
  const s = Math.sin(n) * 43758.5453123;
  return s - Math.floor(s);
}

function noise2D(x: number, y: number): number {
  const xi = Math.floor(x);
  const yi = Math.floor(y);
  const xf = x - xi;
  const yf = y - yi;
  const h00 = hash(xi * 127.1 + yi * 311.7);
  const h10 = hash((xi + 1) * 127.1 + yi * 311.7);
  const h01 = hash(xi * 127.1 + (yi + 1) * 311.7);
  const h11 = hash((xi + 1) * 127.1 + (yi + 1) * 311.7);
  const u = xf * xf * (3 - 2 * xf);
  const v = yf * yf * (3 - 2 * yf);
  const top = h00 + (h10 - h00) * u;
  const bottom = h01 + (h11 - h01) * u;
  return (top + (bottom - top) * v) * 2 - 1;
}

function hexToRgb(hex: string) {
  const clean = hex.replace("#", "");
  const num = Number.parseInt(clean.length === 6 ? clean : "38bdf8", 16) || 0;
  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };
}

const hostRef = ref<HTMLDivElement | null>(null);
const canvasRef = ref<HTMLCanvasElement | null>(null);

let resizeObserver: ResizeObserver | null = null;
let intersectionObserver: IntersectionObserver | null = null;
let raf = 0;
let running = false;
let onScreen = true;
let pageVisible = true;
let reduced = false;
let mq: MediaQueryList | null = null;

function teardown() {
  running = false;
  cancelAnimationFrame(raf);
  resizeObserver?.disconnect();
  intersectionObserver?.disconnect();
  document.removeEventListener("visibilitychange", onVisibility);
  mq?.removeEventListener("change", onReducedChange);
  const host = hostRef.value;
  host?.removeEventListener("pointermove", onPointerMove);
  host?.removeEventListener("pointerleave", onPointerLeave);
  host?.removeEventListener("pointercancel", onPointerLeave);
}

let targetX = 0;
let targetY = 0;
let curX = 0;
let curY = 0;
let t = 0;
let last = 0;

function onVisibility() {
  pageVisible = document.visibilityState !== "hidden";
  sync();
}

function onReducedChange() {
  reduced = mq?.matches ?? false;
}

function onPointerMove(event: PointerEvent) {
  if (!props.interactive) return;
  const host = hostRef.value;
  if (!host) return;
  const rect = host.getBoundingClientRect();
  targetX = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  targetY = ((event.clientY - rect.top) / rect.height) * 2 - 1;
}

function onPointerLeave() {
  targetX = 0;
  targetY = 0;
}

function start() {
  if (running) return;
  running = true;
  last = performance.now();
  raf = requestAnimationFrame(frame);
}

function stop() {
  running = false;
  cancelAnimationFrame(raf);
}

function sync() {
  if (onScreen && pageVisible) start();
  else stop();
}

let w = 1;
let h = 1;

function resize() {
  const host = hostRef.value;
  const canvas = canvasRef.value;
  if (!host || !canvas) return;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  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, 2);
  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);
}

function render() {
  const canvas = canvasRef.value;
  if (!canvas) return;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;

  const rgb = hexToRgb(props.color);
  const count = Math.max(1, Math.round(props.lineCount));

  ctx.clearRect(0, 0, w, h);
  const centerY = h * 0.62;
  // sqrt easing keeps spread = 0 a true fused rope and spread = 1 at the same envelope as a
  // linear map would give, while lifting low-spread values enough that adjacent front threads
  // (lineWidth up to 1.5) don't fuse into a solid bar at the control defaults.
  const rowSpacing = Math.sqrt(Math.max(0, props.spread)) * (h / count) * 0.9;
  const pointerAmp = clamp(1 + curY * 0.7, 0.25, 2.2);
  const phaseShift = curX * 0.9;
  const maxAmpPx = h * 0.15 * props.amplitude * pointerAmp;

  const threads: { pts: { x: number; y: number }[]; lineWidth: number; alpha: number }[] = [];
  for (let i = 0; i < count; i++) {
    const rowT = count <= 1 ? 0 : i / (count - 1);
    const baseY = centerY + (i - (count - 1) / 2) * rowSpacing;
    const seed = i * 0.37;
    const pts: { x: number; y: number }[] = [];
    for (let s = 0; s <= SEGMENTS; s++) {
      const u = s / SEGMENTS;
      const x = u * w;
      const ramp = smoothstep(0.3, 0.95, u);
      const nSlow = noise2D(u * 1.6 + seed * 0.5 + phaseShift, t * 0.16 + seed);
      const nFast = noise2D(u * 4.2 + seed * 1.3 + phaseShift * 1.4, t * 0.55 + seed * 1.7);
      const mixed = nFast + (nSlow - nFast) * u;
      pts.push({ x, y: baseY + mixed * ramp * maxAmpPx });
    }
    threads.push({
      pts,
      lineWidth: Math.max(0.18, 1.5 - rowT * 1.3),
      alpha: 0.92 * Math.pow(1 - rowT, 1.6) + 0.02,
    });
  }

  ctx.lineCap = "round";
  for (let b = 0; b < BANDS; b++) {
    const x0 = (b / BANDS) * w;
    const x1 = ((b + 1) / BANDS) * w;
    const blurAmt = (b / (BANDS - 1)) * MAX_BLUR;
    ctx.save();
    ctx.beginPath();
    ctx.rect(x0, 0, x1 - x0, h);
    ctx.clip();
    ctx.filter = blurAmt > 0.1 ? `blur(${blurAmt.toFixed(2)}px)` : "none";
    for (const thread of threads) {
      ctx.beginPath();
      thread.pts.forEach((p, idx) => {
        if (idx === 0) ctx.moveTo(p.x, p.y);
        else ctx.lineTo(p.x, p.y);
      });
      ctx.lineWidth = thread.lineWidth;
      ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${thread.alpha})`;
      ctx.stroke();
    }
    ctx.restore();
  }
}

function frame(now: number) {
  const dt = Math.min(64, now - last);
  last = now;
  curX += (targetX - curX) * 0.06;
  curY += (targetY - curY) * 0.06;
  if (!reduced) t += dt * 0.001 * props.speed;
  render();
  raf = requestAnimationFrame(frame);
}

onMounted(() => {
  const host = hostRef.value;
  if (!host) return;

  mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduced = mq.matches;
  mq.addEventListener("change", onReducedChange);

  resize();
  resizeObserver = new ResizeObserver(resize);
  resizeObserver.observe(host);

  pageVisible = document.visibilityState !== "hidden";
  document.addEventListener("visibilitychange", onVisibility);

  intersectionObserver = new IntersectionObserver(
    (entries) => {
      onScreen = entries[0]?.isIntersecting ?? true;
      sync();
    },
    { threshold: 0 },
  );
  intersectionObserver.observe(host);

  host.addEventListener("pointermove", onPointerMove);
  host.addEventListener("pointerleave", onPointerLeave);
  host.addEventListener("pointercancel", onPointerLeave);

  render();
  sync();
});

onUnmounted(teardown);

watch(
  () => [props.color, props.amplitude, props.spread, props.lineCount],
  () => render(),
);
</script>

<template>
  <div ref="hostRef" class="fanned-wave-threads">
    <canvas ref="canvasRef" aria-hidden="true" class="fanned-wave-threads__canvas"></canvas>
    <slot />
  </div>
</template>

<style scoped>
.fanned-wave-threads {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 160px;
  overflow: hidden;
  background: #0b0d10;
}
.fanned-wave-threads__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby