"use client";

import { FluidSplashCursor } from "./index";

export interface DemoProps {
  accent?: string;
  splatRadius?: number;
  splatForce?: number;
  dyeFade?: number;
  curl?: number;
  shading?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#FF4D8D", splatRadius = 0.2, splatForce = 6000, dyeFade = 3.5, curl = 3, shading = true }: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <FluidSplashCursor
        accent={accent}
        splatRadius={splatRadius}
        splatForce={splatForce}
        dyeFade={dyeFade}
        curl={curl}
        shading={shading}
        className="h-[320px] rounded-xl border border-white/10"
      >
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <p className="rounded-full border border-white/10 bg-black/55 px-4 py-1.5 text-xs text-white/70">Drag across the panel to paint with ink</p>
        </div>
      </FluidSplashCursor>
    </div>
  );
}

1e:T4da6, 1f:T468b0,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    splatRadius?: number;
    splatForce?: number;
    dyeFade?: number;
    curl?: number;
    shading?: boolean;
  }>(),
  { accent: "#FF4D8D", splatRadius: 0.2, splatForce: 6000, dyeFade: 3.5, curl: 3, shading: true },
);

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

function hexToRgb01(hex: string): [number, number, number] {
  const n = Number.parseInt(hex.replace("#", ""), 16) || 0;
  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
}

function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const d = max - min;
  const l = (max + min) / 2;
  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
  let h = 0;
  if (d !== 0) {
    if (max === r) h = ((g - b) / d) % 6;
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h = ((h * 60 + 360) % 360) / 360;
  }
  return [h, s, l];
}

function hslToRgb01(h: number, s: number, l: number): [number, number, number] {
  const a = s * Math.min(l, 1 - l);
  const ch = (n: number) => {
    const k = (n + h * 12) % 12;
    return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
  };
  return [ch(0), ch(8), ch(4)];
}

function sampleBilinear(field: Float32Array, w: number, h: number, x: number, y: number): number {
  const cx = clamp(x, 0, w - 1.001);
  const cy = clamp(y, 0, h - 1.001);
  const x0 = Math.floor(cx);
  const y0 = Math.floor(cy);
  const x1 = x0 + 1;
  const y1 = y0 + 1;
  const fx = cx - x0;
  const fy = cy - y0;
  const i00 = y0 * w + x0;
  const i10 = y0 * w + x1;
  const i01 = y1 * w + x0;
  const i11 = y1 * w + x1;
  const top = field[i00] + (field[i10] - field[i00]) * fx;
  const bottom = field[i01] + (field[i11] - field[i01]) * fx;
  return top + (bottom - top) * fy;
}

const SIM_W = 80;
const MIN_SIM_H = 22;
const MAX_SIM_H = 64;
const DYE_SCALE = 2.75;
const PRESSURE_ITERATIONS = 20;
const VELOCITY_DECAY = 0.6;
const FORCE_UNIT = 2.2;
const MAX_VELOCITY = 10;
const RESPONSE = 16;
const CURL_UNIT = 0.4;
const DYE_RATE = 5;
/** Extra push on the synthetic idle pointer so billow and curl read clearly before anyone touches the panel. */
const IDLE_FORCE = 3.4;

function splatVelocity(vx: Float32Array, vy: Float32Array, simW: number, simH: number, u: number, v: number, targetX: number, targetY: number, radiusNorm: number, dt: number): void {
  const cx = u * simW;
  const cy = v * simH;
  const rCells = Math.max(1, radiusNorm * simW);
  const boxR = rCells * 1.8;
  const x0 = Math.max(0, Math.floor(cx - boxR));
  const x1 = Math.min(simW - 1, Math.ceil(cx + boxR));
  const y0 = Math.max(0, Math.floor(cy - boxR));
  const y1 = Math.min(simH - 1, Math.ceil(cy + boxR));
  const inv = 1 / (rCells * rCells);
  const blendBase = clamp(dt * RESPONSE, 0, 1);
  for (let y = y0; y <= y1; y++) {
    for (let x = x0; x <= x1; x++) {
      const dx = x - cx;
      const dy = y - cy;
      const weight = Math.exp(-(dx * dx + dy * dy) * inv);
      if (weight < 0.01) continue;
      const idx = y * simW + x;
      const blend = blendBase * weight;
      vx[idx] += (targetX - vx[idx]) * blend;
      vy[idx] += (targetY - vy[idx]) * blend;
    }
  }
}

function splatDye(dyeR: Float32Array, dyeG: Float32Array, dyeB: Float32Array, dyeW: number, dyeH: number, u: number, v: number, r: number, g: number, b: number, radiusNorm: number, amount: number): void {
  const cx = u * dyeW;
  const cy = v * dyeH;
  const rCells = Math.max(1, radiusNorm * dyeW);
  const boxR = rCells * 1.8;
  const x0 = Math.max(0, Math.floor(cx - boxR));
  const x1 = Math.min(dyeW - 1, Math.ceil(cx + boxR));
  const y0 = Math.max(0, Math.floor(cy - boxR));
  const y1 = Math.min(dyeH - 1, Math.ceil(cy + boxR));
  const inv = 1 / (rCells * rCells);
  for (let y = y0; y <= y1; y++) {
    for (let x = x0; x <= x1; x++) {
      const dx = x - cx;
      const dy = y - cy;
      const weight = Math.exp(-(dx * dx + dy * dy) * inv);
      if (weight < 0.008) continue;
      const idx = y * dyeW + x;
      const k = weight * amount;
      dyeR[idx] += r * k;
      dyeG[idx] += g * k;
      dyeB[idx] += b * k;
    }
  }
}

function computeCurl(vx: Float32Array, vy: Float32Array, simW: number, simH: number, out: Float32Array): void {
  for (let y = 0; y < simH; y++) {
    const yb = y > 0 ? y - 1 : 0;
    const yt = y < simH - 1 ? y + 1 : simH - 1;
    for (let x = 0; x < simW; x++) {
      const xl = x > 0 ? x - 1 : 0;
      const xr = x < simW - 1 ? x + 1 : simW - 1;
      const dvydx = vy[y * simW + xr] - vy[y * simW + xl];
      const dvxdy = vx[yt * simW + x] - vx[yb * simW + x];
      out[y * simW + x] = (dvydx - dvxdy) * 0.5;
    }
  }
}

function applyVorticity(vx: Float32Array, vy: Float32Array, curlField: Float32Array, simW: number, simH: number, strength: number, dt: number): void {
  for (let y = 0; y < simH; y++) {
    const yb = y > 0 ? y - 1 : 0;
    const yt = y < simH - 1 ? y + 1 : simH - 1;
    for (let x = 0; x < simW; x++) {
      const xl = x > 0 ? x - 1 : 0;
      const xr = x < simW - 1 ? x + 1 : simW - 1;
      const cl = Math.abs(curlField[y * simW + xl]);
      const cr = Math.abs(curlField[y * simW + xr]);
      const cb = Math.abs(curlField[yb * simW + x]);
      const ct = Math.abs(curlField[yt * simW + x]);
      let nx = cr - cl;
      let ny = ct - cb;
      const len = Math.sqrt(nx * nx + ny * ny) + 1e-5;
      nx /= len;
      ny /= len;
      const idx = y * simW + x;
      const c = curlField[idx];
      vx[idx] += strength * ny * c * dt;
      vy[idx] += strength * -nx * c * dt;
    }
  }
}

function computeDivergence(vx: Float32Array, vy: Float32Array, simW: number, simH: number, out: Float32Array): void {
  for (let y = 0; y < simH; y++) {
    const yb = y > 0 ? y - 1 : 0;
    const yt = y < simH - 1 ? y + 1 : simH - 1;
    for (let x = 0; x < simW; x++) {
      const xl = x > 0 ? x - 1 : 0;
      const xr = x < simW - 1 ? x + 1 : simW - 1;
      out[y * simW + x] = 0.5 * (vx[y * simW + xr] - vx[y * simW + xl] + vy[yt * simW + x] - vy[yb * simW + x]);
    }
  }
}

function solvePressure(div: Float32Array, simW: number, simH: number, bufferA: Float32Array, bufferB: Float32Array): Float32Array {
  bufferA.fill(0);
  bufferB.fill(0);
  let p = bufferA;
  let next = bufferB;
  for (let iter = 0; iter < PRESSURE_ITERATIONS; iter++) {
    for (let y = 0; y < simH; y++) {
      const yb = y > 0 ? y - 1 : 0;
      const yt = y < simH - 1 ? y + 1 : simH - 1;
      for (let x = 0; x < simW; x++) {
        const xl = x > 0 ? x - 1 : 0;
        const xr = x < simW - 1 ? x + 1 : simW - 1;
        const idx = y * simW + x;
        next[idx] = (p[y * simW + xl] + p[y * simW + xr] + p[yb * simW + x] + p[yt * simW + x] - div[idx]) * 0.25;
      }
    }
    const tmp = p;
    p = next;
    next = tmp;
  }
  return p;
}

function project(vx: Float32Array, vy: Float32Array, pressure: Float32Array, simW: number, simH: number): void {
  for (let y = 0; y < simH; y++) {
    const yb = y > 0 ? y - 1 : 0;
    const yt = y < simH - 1 ? y + 1 : simH - 1;
    for (let x = 0; x < simW; x++) {
      const xl = x > 0 ? x - 1 : 0;
      const xr = x < simW - 1 ? x + 1 : simW - 1;
      const idx = y * simW + x;
      vx[idx] -= 0.5 * (pressure[y * simW + xr] - pressure[y * simW + xl]);
      vy[idx] -= 0.5 * (pressure[yt * simW + x] - pressure[yb * simW + x]);
    }
  }
}

function advectVelocity(vx: Float32Array, vy: Float32Array, vx0: Float32Array, vy0: Float32Array, simW: number, simH: number, dt: number, decay: number): void {
  vx0.set(vx);
  vy0.set(vy);
  for (let y = 0; y < simH; y++) {
    for (let x = 0; x < simW; x++) {
      const idx = y * simW + x;
      const srcX = x - vx0[idx] * dt * simW;
      const srcY = y - vy0[idx] * dt * simH;
      vx[idx] = sampleBilinear(vx0, simW, simH, srcX, srcY) * decay;
      vy[idx] = sampleBilinear(vy0, simW, simH, srcX, srcY) * decay;
    }
  }
}

function advectDye(
  dyeR: Float32Array,
  dyeG: Float32Array,
  dyeB: Float32Array,
  dyeR0: Float32Array,
  dyeG0: Float32Array,
  dyeB0: Float32Array,
  dyeW: number,
  dyeH: number,
  vx: Float32Array,
  vy: Float32Array,
  simW: number,
  simH: number,
  dt: number,
  decay: number,
): void {
  dyeR0.set(dyeR);
  dyeG0.set(dyeG);
  dyeB0.set(dyeB);
  const ratioX = simW / dyeW;
  const ratioY = simH / dyeH;
  for (let y = 0; y < dyeH; y++) {
    for (let x = 0; x < dyeW; x++) {
      const idx = y * dyeW + x;
      const vX = sampleBilinear(vx, simW, simH, x * ratioX, y * ratioY);
      const vY = sampleBilinear(vy, simW, simH, x * ratioX, y * ratioY);
      const srcX = x - vX * dt * dyeW;
      const srcY = y - vY * dt * dyeH;
      dyeR[idx] = sampleBilinear(dyeR0, dyeW, dyeH, srcX, srcY) * decay;
      dyeG[idx] = sampleBilinear(dyeG0, dyeW, dyeH, srcX, srcY) * decay;
      dyeB[idx] = sampleBilinear(dyeB0, dyeW, dyeH, srcX, srcY) * decay;
    }
  }
}

function renderDye(dyeR: Float32Array, dyeG: Float32Array, dyeB: Float32Array, dyeW: number, dyeH: number, pixels: Uint8ClampedArray, shading: boolean): void {
  for (let y = 0; y < dyeH; y++) {
    for (let x = 0; x < dyeW; x++) {
      const idx = y * dyeW + x;
      let r = dyeR[idx];
      let g = dyeG[idx];
      let b = dyeB[idx];
      if (shading) {
        const x0 = x > 0 ? x - 1 : 0;
        const x1 = x < dyeW - 1 ? x + 1 : dyeW - 1;
        const y0 = y > 0 ? y - 1 : 0;
        const y1 = y < dyeH - 1 ? y + 1 : dyeH - 1;
        const iNW = y0 * dyeW + x0;
        const iSE = y1 * dyeW + x1;
        const lumaNW = dyeR[iNW] * 0.3 + dyeG[iNW] * 0.59 + dyeB[iNW] * 0.11;
        const lumaSE = dyeR[iSE] * 0.3 + dyeG[iSE] * 0.59 + dyeB[iSE] * 0.11;
        const emboss = (lumaNW - lumaSE) * 0.5;
        r += emboss;
        g += emboss;
        b += emboss;
      }
      r = 1 - Math.exp(-Math.max(r, 0) * 1.15);
      g = 1 - Math.exp(-Math.max(g, 0) * 1.15);
      b = 1 - Math.exp(-Math.max(b, 0) * 1.15);
      const alpha = clamp(Math.max(r, g, b) * 1.08, 0, 1);
      const p = idx * 4;
      pixels[p] = r * 255;
      pixels[p + 1] = g * 255;
      pixels[p + 2] = b * 255;
      pixels[p + 3] = alpha * 255;
    }
  }
}

function clampVelocityField(vx: Float32Array, vy: Float32Array, maxV: number): void {
  for (let i = 0; i < vx.length; i++) {
    const x = vx[i];
    const y = vy[i];
    vx[i] = x > maxV ? maxV : x < -maxV ? -maxV : x;
    vy[i] = y > maxV ? maxV : y < -maxV ? -maxV : y;
  }
}

interface PointerState {
  x: number;
  y: number;
  prevX: number;
  prevY: number;
  down: boolean;
}

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 off = document.createElement("canvas");
  const offCtx = off.getContext("2d");
  if (!offCtx) return null;

  const accent = props.accent;
  const splatRadius = props.splatRadius;
  const splatForce = props.splatForce;
  const dyeFade = props.dyeFade;
  const curl = props.curl;
  const shading = props.shading;
  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  const [baseR, baseG, baseB] = hexToRgb01(accent);
  const [baseH, baseS, baseL] = rgbToHsl(baseR, baseG, baseB);

  const simW = SIM_W;
  let cssW = Math.max(1, host.clientWidth);
  let cssH = Math.max(1, host.clientHeight);
  let simH = clamp(Math.round(simW / (cssW / cssH)), MIN_SIM_H, MAX_SIM_H);
  let dyeW = Math.round(simW * DYE_SCALE);
  let dyeH = Math.round(simH * DYE_SCALE);

  let vx = new Float32Array(simW * simH);
  let vy = new Float32Array(simW * simH);
  let vx0 = new Float32Array(simW * simH);
  let vy0 = new Float32Array(simW * simH);
  let curlField = new Float32Array(simW * simH);
  let divergence = new Float32Array(simW * simH);
  let pressureA = new Float32Array(simW * simH);
  let pressureB = new Float32Array(simW * simH);
  let dyeR = new Float32Array(dyeW * dyeH);
  let dyeG = new Float32Array(dyeW * dyeH);
  let dyeB = new Float32Array(dyeW * dyeH);
  let dyeR0 = new Float32Array(dyeW * dyeH);
  let dyeG0 = new Float32Array(dyeW * dyeH);
  let dyeB0 = new Float32Array(dyeW * dyeH);
  let pixels = new Uint8ClampedArray(dyeW * dyeH * 4);
  let imageData = new ImageData(pixels, dyeW, dyeH);
  off.width = dyeW;
  off.height = dyeH;

  const pointers = new Map<number, PointerState>();
  let autoplay = true;
  const bornAt = performance.now();

  const ensurePointer = (id: number, x: number, y: number): PointerState => {
    let p = pointers.get(id);
    if (!p) {
      p = { x, y, prevX: x, prevY: y, down: false };
      pointers.set(id, p);
    } else {
      p.x = x;
      p.y = y;
    }
    return p;
  };

  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 !== cssW || nh !== cssH) {
      cssW = nw;
      cssH = nh;
      const nextSimH = clamp(Math.round(simW / (cssW / cssH)), MIN_SIM_H, MAX_SIM_H);
      const nextDyeW = Math.round(simW * DYE_SCALE);
      const nextDyeH = Math.round(nextSimH * DYE_SCALE);
      if (nextSimH !== simH || nextDyeH !== dyeH) {
        simH = nextSimH;
        dyeW = nextDyeW;
        dyeH = nextDyeH;
        vx = new Float32Array(simW * simH);
        vy = new Float32Array(simW * simH);
        vx0 = new Float32Array(simW * simH);
        vy0 = new Float32Array(simW * simH);
        curlField = new Float32Array(simW * simH);
        divergence = new Float32Array(simW * simH);
        pressureA = new Float32Array(simW * simH);
        pressureB = new Float32Array(simW * simH);
        dyeR = new Float32Array(dyeW * dyeH);
        dyeG = new Float32Array(dyeW * dyeH);
        dyeB = new Float32Array(dyeW * dyeH);
        dyeR0 = new Float32Array(dyeW * dyeH);
        dyeG0 = new Float32Array(dyeW * dyeH);
        dyeB0 = new Float32Array(dyeW * dyeH);
        pixels = new Uint8ClampedArray(dyeW * dyeH * 4);
        imageData = new ImageData(pixels, dyeW, dyeH);
        off.width = dyeW;
        off.height = dyeH;
      }
    }
    canvas.width = Math.round(cssW * dpr);
    canvas.height = Math.round(cssH * dpr);
    canvas.style.width = `${cssW}px`;
    canvas.style.height = `${cssH}px`;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  };

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

  const onPointerDown = (event: PointerEvent) => {
    autoplay = false;
    const rect = host.getBoundingClientRect();
    const x = clamp(event.clientX - rect.left, 0, rect.width);
    const y = clamp(event.clientY - rect.top, 0, rect.height);
    ensurePointer(event.pointerId, x, y).down = true;
  };
  const onPointerMove = (event: PointerEvent) => {
    const rect = host.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
      pointers.delete(event.pointerId);
      return;
    }
    ensurePointer(event.pointerId, x, y);
  };
  const onPointerEnd = (event: PointerEvent) => {
    if (event.pointerType === "mouse") {
      const p = pointers.get(event.pointerId);
      if (p) p.down = false;
    } else {
      pointers.delete(event.pointerId);
      if (pointers.size === 0) autoplay = true;
    }
  };
  const onPointerLeave = (event: PointerEvent) => {
    pointers.delete(event.pointerId);
    if (pointers.size === 0) autoplay = true;
  };

  host.addEventListener("pointerdown", onPointerDown);
  host.addEventListener("pointermove", onPointerMove, { passive: true });
  host.addEventListener("pointerup", onPointerEnd);
  host.addEventListener("pointercancel", onPointerEnd);
  host.addEventListener("pointerleave", onPointerLeave);

  let raf = 0;
  let last = performance.now();

  const frame = (now: number) => {
    raf = requestAnimationFrame(frame);
    let dt = Math.min((now - last) / 1000, 0.05);
    last = now;
    if (reduced) dt *= 0.2;

    if (autoplay) {
      const t = (now - bornAt) / 1000;
      const px = cssW * (0.5 + 0.33 * Math.sin(t * 1.7));
      const py = cssH * (0.5 + 0.27 * Math.sin(t * 2.3 + 0.6) * Math.cos(t * 1.1));
      ensurePointer(-1, px, py);
    } else {
      pointers.delete(-1);
    }

    const effectiveDyeFade = dyeFade * (reduced ? 5 : 1);
    const velocityDecay = Math.exp(-VELOCITY_DECAY * dt);
    const dyeDecay = Math.exp(-effectiveDyeFade * dt);
    const curlStrength = curl * CURL_UNIT;

    for (const [id, p] of pointers.entries()) {
      const dx = p.x - p.prevX;
      const dy = p.y - p.prevY;
      p.prevX = p.x;
      p.prevY = p.y;
      if (dx === 0 && dy === 0) continue;
      if (id !== -1) autoplay = false;
      const u = p.x / cssW;
      const v = p.y / cssH;
      const mul = (splatForce / 6000) * (p.down ? 1.6 : 1) * (id === -1 ? IDLE_FORCE : 1);
      const targetVX = clamp((dx / cssW / dt) * FORCE_UNIT * mul, -MAX_VELOCITY, MAX_VELOCITY);
      const targetVY = clamp((dy / cssH / dt) * FORCE_UNIT * mul, -MAX_VELOCITY, MAX_VELOCITY);
      splatVelocity(vx, vy, simW, simH, u, v, targetVX, targetVY, splatRadius, dt);

      const s = clamp(baseS + (Math.random() - 0.5) * 0.22, 0.32, 1);
      const l = clamp(baseL + (Math.random() - 0.5) * 0.22, 0.26, 0.8);
      const [cr, cg, cb] = hslToRgb01(baseH, s, l);
      const dyeAmount = DYE_RATE * dt * (p.down ? 1.5 : 1);
      splatDye(dyeR, dyeG, dyeB, dyeW, dyeH, u, v, cr, cg, cb, splatRadius, dyeAmount);
    }

    if (curlStrength > 0) {
      computeCurl(vx, vy, simW, simH, curlField);
      applyVorticity(vx, vy, curlField, simW, simH, curlStrength, dt);
    }

    advectVelocity(vx, vy, vx0, vy0, simW, simH, dt, velocityDecay);
    clampVelocityField(vx, vy, MAX_VELOCITY * 1.4);

    computeDivergence(vx, vy, simW, simH, divergence);
    const pressure = solvePressure(divergence, simW, simH, pressureA, pressureB);
    project(vx, vy, pressure, simW, simH);

    advectDye(dyeR, dyeG, dyeB, dyeR0, dyeG0, dyeB0, dyeW, dyeH, vx, vy, simW, simH, dt, dyeDecay);
    renderDye(dyeR, dyeG, dyeB, dyeW, dyeH, pixels, shading);

    ctx.clearRect(0, 0, cssW, cssH);
    offCtx.putImageData(imageData, 0, 0);
    ctx.imageSmoothingEnabled = true;
    ctx.drawImage(off, 0, 0, dyeW, dyeH, 0, 0, cssW, cssH);
  };
  raf = requestAnimationFrame(frame);

  return () => {
    cancelAnimationFrame(raf);
    observer.disconnect();
    host.removeEventListener("pointerdown", onPointerDown);
    host.removeEventListener("pointermove", onPointerMove);
    host.removeEventListener("pointerup", onPointerEnd);
    host.removeEventListener("pointercancel", onPointerEnd);
    host.removeEventListener("pointerleave", onPointerLeave);
  };
}

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

onMounted(restart);
watch(() => [props.accent, props.splatRadius, props.splatForce, props.dyeFade, props.curl, props.shading], restart);
onBeforeUnmount(() => {
  stop?.();
  stop = null;
});
</script>

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

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

Nearby