"use client";

import { GooeyBlobField } from "./index";

export interface DemoProps {
  ballCount?: number;
  speed?: number;
  spread?: number;
  accent?: string;
  pointerColor?: string;
  followPointer?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  ballCount = 12,
  speed = 0.35,
  spread = 1,
  accent = "#9BE15D",
  pointerColor = "#FF6A1F",
  followPointer = true,
}: DemoProps) {
  return (
    <div className="w-full">
      <GooeyBlobField
        ballCount={ballCount}
        speed={speed}
        spread={spread}
        accent={accent}
        pointerColor={pointerColor}
        followPointer={followPointer}
        className="h-[320px]"
      />
    </div>
  );
}

1d:T1c66, 1e:T1985d,

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

const props = withDefaults(
  defineProps<{
    ballCount?: number;
    speed?: number;
    spread?: number;
    accent?: string;
    pointerColor?: string;
    followPointer?: boolean;
  }>(),
  {
    ballCount: 12,
    speed: 0.35,
    spread: 1,
    accent: "#9BE15D",
    pointerColor: "#FF6A1F",
    followPointer: true,
  },
);

interface OrbitBlob {
  angle0: number;
  rx: number;
  ry: number;
  ratex: number;
  ratey: number;
  r: number;
  x: number;
  y: number;
}

const TAU = Math.PI * 2;
/** High enough relative to the 6-20px blob radii that the upscale doesn't blur the edges into a halo. */
const FIELD_COLUMNS = 400;
const POINTER_RADIUS = 15;
const clamp = (v: number, lo: number, hi: number) => (v < lo ? lo : v > hi ? hi : v);
const smoothstep = (edge0: number, edge1: number, x: number) => {
  const t = clamp((x - edge0) / (edge1 - edge0), 0, 1);
  return t * t * (3 - 2 * t);
};

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];
}

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 fctx = field.getContext("2d");
  if (!fctx) return null;

  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const accentRgb = hexToRgb(props.accent);
  const pointerRgb = hexToRgb(props.pointerColor);
  const pointerEnabled = props.followPointer && !reduced;

  let w = Math.max(1, host.clientWidth);
  let h = Math.max(1, host.clientHeight);
  let lowW = 1;
  let lowH = 1;
  let imgData = fctx.createImageData(1, 1);

  const blobs: OrbitBlob[] = [];
  for (let i = 0; i < props.ballCount; i++) {
    blobs.push({
      angle0: Math.random() * TAU,
      rx: 0.4 + Math.random() * 0.5,
      ry: 0.12 + Math.random() * 0.18,
      ratex: 0.45 + Math.random() * 0.9,
      ratey: 0.45 + Math.random() * 0.9,
      r: 6 + Math.random() * 14,
      x: w / 2,
      y: h / 2,
    });
  }

  let px = w / 2;
  let py = h / 2;
  let ptx = px;
  let pty = py;
  let pvx = 0;
  let pvy = 0;
  let pointerActive = false;
  let pointerRadius = 0;
  let clock = 0;

  const step = (dt: number) => {
    const effSpeed = reduced ? props.speed * 0.08 : props.speed;
    clock += dt;
    const spreadX = (w / 2) * props.spread;
    const spreadY = (h / 2) * props.spread;
    for (const b of blobs) {
      b.x = w / 2 + Math.cos(b.angle0 + clock * b.ratex * effSpeed) * b.rx * spreadX;
      b.y = h / 2 + Math.sin(b.angle0 * 1.7 + clock * b.ratey * effSpeed) * b.ry * spreadY;
    }
    if (pointerEnabled) {
      const ax = (ptx - px) * 90 - pvx * 12;
      const ay = (pty - py) * 90 - pvy * 12;
      pvx += ax * dt;
      pvy += ay * dt;
      px += pvx * dt;
      py += pvy * dt;
      const targetR = pointerActive ? POINTER_RADIUS : 0;
      pointerRadius += (targetR - pointerRadius) * Math.min(1, dt * 6);
      if (!pointerActive) {
        ptx = w / 2;
        pty = h / 2;
      }
    }
  };

  const draw = () => {
    ctx.clearRect(0, 0, w, h);
    const cellW = w / lowW;
    const cellH = h / lowH;
    const data = imgData.data;
    let idx = 0;
    for (let gy = 0; gy < lowH; gy++) {
      const y = (gy + 0.5) * cellH;
      for (let gx = 0; gx < lowW; gx++, idx += 4) {
        const x = (gx + 0.5) * cellW;
        let sumOrbit = 0;
        for (const b of blobs) {
          const dx = x - b.x;
          const dy = y - b.y;
          sumOrbit += (b.r * b.r) / (dx * dx + dy * dy + 1);
        }
        let sumPointer = 0;
        if (pointerRadius > 0.5) {
          const dx = x - px;
          const dy = y - py;
          sumPointer = (pointerRadius * pointerRadius) / (dx * dx + dy * dy + 1);
        }
        const sum = sumOrbit + sumPointer;
        const alpha = sum > 0 ? smoothstep(0.88, 1.12, sum) : 0;
        if (alpha <= 0.004) {
          data[idx + 3] = 0;
          continue;
        }
        const t = sumPointer / sum;
        data[idx] = accentRgb[0] + (pointerRgb[0] - accentRgb[0]) * t;
        data[idx + 1] = accentRgb[1] + (pointerRgb[1] - accentRgb[1]) * t;
        data[idx + 2] = accentRgb[2] + (pointerRgb[2] - accentRgb[2]) * t;
        data[idx + 3] = alpha * 255;
      }
    }
    fctx.putImageData(imgData, 0, 0);
    ctx.drawImage(field, 0, 0, lowW, lowH, 0, 0, w, h);
  };

  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, 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);
    ctx.imageSmoothingEnabled = true;
    const cell = Math.max(2, w / FIELD_COLUMNS);
    lowW = Math.max(1, Math.round(w / cell));
    lowH = Math.max(1, Math.round(h / cell));
    field.width = lowW;
    field.height = lowH;
    imgData = fctx.createImageData(lowW, lowH);
    draw();
  };

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

  const onMove = (event: PointerEvent) => {
    const rect = host.getBoundingClientRect();
    ptx = event.clientX - rect.left;
    pty = event.clientY - rect.top;
    pointerActive = true;
  };
  const onLeave = () => {
    pointerActive = false;
  };
  if (pointerEnabled) {
    host.addEventListener("pointermove", onMove);
    host.addEventListener("pointerleave", onLeave);
  }

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

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

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

onMounted(restart);
watch(() => [props.ballCount, props.speed, props.spread, props.accent, props.pointerColor, props.followPointer], restart);
onBeforeUnmount(() => {
  stop?.();
  stop = null;
});
</script>

<template>
  <div ref="hostEl" aria-hidden="true" class="gooey-blob-field">
    <canvas ref="canvasEl" class="gooey-blob-field__canvas"></canvas>
  </div>
</template>

<style scoped>
.gooey-blob-field {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 220px;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #0b0d10;
}
.gooey-blob-field__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby