"use client";

import { FlamingIrisEye } from "./index";

export interface DemoProps {
  accent?: string;
  pupilSize?: number;
  irisWidth?: number;
  flameSpeed?: number;
  glow?: number;
  followStrength?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  accent = "#FF6A1F",
  pupilSize = 0.6,
  irisWidth = 0.25,
  flameSpeed = 1,
  glow = 0.35,
  followStrength = 1,
}: DemoProps) {
  return (
    <div className="w-full">
      <FlamingIrisEye
        accent={accent}
        pupilSize={pupilSize}
        irisWidth={irisWidth}
        flameSpeed={flameSpeed}
        glow={glow}
        followStrength={followStrength}
        className="min-h-[360px] rounded-2xl border border-white/10"
      />
    </div>
  );
}

1d:T2244, 1e:T1f309,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    pupilSize?: number;
    irisWidth?: number;
    flameSpeed?: number;
    glow?: number;
    followStrength?: number;
  }>(),
  { accent: "#FF6A1F", pupilSize: 0.6, irisWidth: 0.25, flameSpeed: 1, glow: 0.35, followStrength: 1 },
);

type RGB = readonly [number, number, number];

const TAU = Math.PI * 2;
const BUFFER_MIN = 72;
const BUFFER_MAX = 190;
const CLOCK_RATE = 0.55;
const EASE_IN = 9;
const EASE_OUT = 4.5;

interface Harmonic {
  n: number;
  w: number;
  rw: number;
  rt: number;
  ph: number;
}

const HARM_COARSE: readonly Harmonic[] = [
  { n: 3, w: 1.0, rw: 1.7, rt: 0.55, ph: 0.6 },
  { n: 5, w: 0.68, rw: 2.3, rt: -0.42, ph: 3.1 },
  { n: 8, w: 0.46, rw: 1.15, rt: 0.7, ph: 5.05 },
];
const HARM_FINE: readonly Harmonic[] = [
  { n: 17, w: 1.0, rw: 3.6, rt: 0.95, ph: 1.05 },
  { n: 23, w: 0.62, rw: 2.4, rt: -0.68, ph: 4.4 },
  { n: 29, w: 0.42, rw: 4.8, rt: 0.55, ph: 2.25 },
];
const COARSE_W = HARM_COARSE.reduce((s, h) => s + h.w, 0);
const FINE_W = HARM_FINE.reduce((s, h) => s + h.w, 0);

function harmSum(list: readonly Harmonic[], totalWeight: number, angle: number, radiusNorm: number, clock: number): number {
  let sum = 0;
  for (const h of list) sum += h.w * Math.sin(h.n * angle + h.rw * radiusNorm + h.rt * clock + h.ph);
  return sum / totalWeight;
}

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

function smoothstep(v: number, e0: number, e1: number): number {
  const t = clamp((v - e0) / (e1 - e0), 0, 1);
  return t * t * (3 - 2 * t);
}

function toRgb(hex: string): RGB {
  const match = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  const value = match ? parseInt(match[1], 16) : 0xffffff;
  return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
}

function darken(rgb: RGB, k: number): RGB {
  return [rgb[0] * k, rgb[1] * k, rgb[2] * k];
}

function pupilGeometry(pupilSize: number) {
  return {
    halfH: clamp(0.62 * pupilSize, 0.1, 0.82),
    halfW: clamp(0.09 * pupilSize, 0.012, 0.14),
    hotR: 0.14 + 0.09 * pupilSize,
  };
}

/** One frame of the iris into a square buffer; see index.tsx for the full explanation of the polar field. */
function paintIris(
  data: Uint8ClampedArray,
  side: number,
  accent: RGB,
  dark: RGB,
  clock: number,
  hotR: number,
  irisWidth: number,
  pupilX: number,
  pupilY: number,
  pupilHalfW: number,
  pupilHalfH: number,
) {
  const half = side / 2;
  let o = 0;
  for (let y = 0; y < side; y++) {
    const dy = (y + 0.5 - half) / half;
    for (let x = 0; x < side; x++) {
      const dx = (x + 0.5 - half) / half;
      const rn = Math.sqrt(dx * dx + dy * dy);
      const angle = Math.atan2(dy, dx);

      const coarse = harmSum(HARM_COARSE, COARSE_W, angle, rn, clock);
      const fine = harmSum(HARM_FINE, FINE_W, angle, rn, clock * 1.7);
      const n01 = (coarse * 0.6 + fine * 0.4) * 0.5 + 0.5;

      const bandT = clamp((rn - hotR) / Math.max(0.05, irisWidth), 0, 1);
      const base = Math.pow(1 - bandT, 1.7);
      const intensity = base * (0.25 + 0.95 * n01);
      const edgeAlpha = smoothstep(intensity, 0.1, 0.34);

      const t = clamp(intensity, 0, 1.15);
      let r: number;
      let g: number;
      let b: number;
      if (t > 0.58) {
        const k = clamp((t - 0.58) / 0.57, 0, 1) * 0.88;
        r = accent[0] + (255 - accent[0]) * k;
        g = accent[1] + (255 - accent[1]) * k;
        b = accent[2] + (255 - accent[2]) * k;
      } else {
        const k = clamp(t / 0.58, 0, 1);
        r = dark[0] + (accent[0] - dark[0]) * k;
        g = dark[1] + (accent[1] - dark[1]) * k;
        b = dark[2] + (accent[2] - dark[2]) * k;
      }

      const cdx = dx - pupilX;
      const cdy = Math.max(0, Math.abs(dy - pupilY) - pupilHalfH);
      const sdf = Math.sqrt(cdx * cdx + cdy * cdy) - pupilHalfW;
      const pupilAlpha = 1 - smoothstep(sdf, -0.016, 0.016);

      const keep = 1 - pupilAlpha;
      data[o++] = r * keep;
      data[o++] = g * keep;
      data[o++] = b * keep;
      data[o++] = Math.max(edgeAlpha, pupilAlpha) * 255;
    }
  }
}

const host = ref<HTMLDivElement | null>(null);
const surface = ref<HTMLCanvasElement | null>(null);
let teardown: (() => void) | undefined;

onMounted(() => {
  const el = host.value;
  const canvas = surface.value;
  const ctx = canvas?.getContext("2d");
  const buffer = document.createElement("canvas");
  const bctx = buffer.getContext("2d");
  if (!el || !canvas || !ctx || !bctx) return;

  const calm = window.matchMedia("(prefers-reduced-motion: reduce)");
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  let w = 1;
  let h = 1;
  let img = bctx.createImageData(1, 1);
  let clock = 4.1;
  let last = 0;
  let raf = 0;

  let pointerNX = 0;
  let pointerNY = 0;
  let hasPointer = false;
  let pupilX = 0;
  let pupilY = 0;

  const draw = () => {
    const { halfH, halfW, hotR } = pupilGeometry(props.pupilSize);
    const acc = toRgb(props.accent);
    const dark = darken(acc, 0.14);

    paintIris(img.data, buffer.width, acc, dark, clock, hotR, props.irisWidth, pupilX, pupilY, halfW, halfH);
    bctx.putImageData(img, 0, 0);

    const cx = w / 2;
    const cy = h / 2;
    const irisR = Math.min(w, h) * 0.47;

    ctx.clearRect(0, 0, w, h);
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, w, h);

    if (props.glow > 0) {
      const reach = irisR * (1.05 + props.glow * 0.6);
      const grad = ctx.createRadialGradient(cx, cy, irisR * 0.5, cx, cy, reach);
      grad.addColorStop(0, "rgba(0,0,0,0)");
      grad.addColorStop(0.6, `rgba(${acc[0]},${acc[1]},${acc[2]},${(0.16 * props.glow).toFixed(3)})`);
      grad.addColorStop(1, "rgba(0,0,0,0)");
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.arc(cx, cy, reach, 0, TAU);
      ctx.fill();
    }

    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = "high";
    ctx.drawImage(buffer, cx - irisR, cy - irisR, irisR * 2, irisR * 2);
  };

  const resize = () => {
    w = Math.max(1, el.clientWidth);
    h = Math.max(1, el.clientHeight);
    canvas.width = Math.round(w * dpr);
    canvas.height = Math.round(h * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    const side = clamp(Math.round(Math.min(w, h)), BUFFER_MIN, BUFFER_MAX);
    buffer.width = side;
    buffer.height = side;
    img = bctx.createImageData(side, side);
    draw();
  };

  const tick = (now: number) => {
    const dt = Math.min(0.05, (now - (last || now)) / 1000);
    last = now;
    if (!calm.matches) clock += dt * props.flameSpeed * CLOCK_RATE;

    const { halfH } = pupilGeometry(props.pupilSize);
    const maxTravel = clamp(0.86 - halfH, 0.03, 0.55);
    const rawX = pointerNX * props.followStrength;
    const rawY = pointerNY * props.followStrength;
    const len = Math.hypot(rawX, rawY);
    const k = len > maxTravel && len > 0 ? maxTravel / len : 1;
    const targetX = hasPointer ? rawX * k : 0;
    const targetY = hasPointer ? rawY * k : 0;
    const ease = 1 - Math.exp(-dt * (hasPointer ? EASE_IN : EASE_OUT));
    pupilX += (targetX - pupilX) * ease;
    pupilY += (targetY - pupilY) * ease;

    draw();
    raf = requestAnimationFrame(tick);
  };

  const onMove = (event: PointerEvent) => {
    const rect = el.getBoundingClientRect();
    const scale = Math.min(rect.width, rect.height) / 2 || 1;
    pointerNX = (event.clientX - rect.left - rect.width / 2) / scale;
    pointerNY = (event.clientY - rect.top - rect.height / 2) / scale;
    hasPointer = true;
  };
  const onLeave = () => {
    hasPointer = false;
  };

  el.addEventListener("pointermove", onMove, { passive: true });
  el.addEventListener("pointerleave", onLeave);
  el.addEventListener("pointercancel", onLeave);

  const observer = new ResizeObserver(resize);
  observer.observe(el);
  resize();
  raf = requestAnimationFrame(tick);

  teardown = () => {
    cancelAnimationFrame(raf);
    observer.disconnect();
    el.removeEventListener("pointermove", onMove);
    el.removeEventListener("pointerleave", onLeave);
    el.removeEventListener("pointercancel", onLeave);
  };
});

onBeforeUnmount(() => teardown?.());
</script>

<template>
  <div ref="host" role="img" aria-label="A burning eye that turns to follow the pointer" class="flaming-iris-eye">
    <canvas ref="surface" aria-hidden="true" class="flaming-iris-eye__canvas"></canvas>
  </div>
</template>

<style scoped>
.flaming-iris-eye {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
  touch-action: none;
  background: #000;
}
.flaming-iris-eye__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby