"use client";

import { PointerAngleSweep } from "./index";

export interface DemoProps {
  accent?: string;
  wedgeSoftness?: number;
  followLag?: number;
  idleSpin?: boolean;
  intensity?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#7C5CFF", wedgeSoftness = 0.5, followLag = 0.35, idleSpin = true, intensity = 0.8 }: DemoProps) {
  return (
    <div className="w-full max-w-[420px]">
      <PointerAngleSweep accent={accent} wedgeSoftness={wedgeSoftness} followLag={followLag} idleSpin={idleSpin} intensity={intensity}>
        <span className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/40">Ambient light</span>
      </PointerAngleSweep>
    </div>
  );
}

1d:T1a68, 1e:T154ca,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    wedgeSoftness?: number;
    followLag?: number;
    idleSpin?: boolean;
    intensity?: number;
  }>(),
  { accent: "#7C5CFF", wedgeSoftness: 0.5, followLag: 0.35, idleSpin: true, intensity: 0.8 },
);

const IDLE_DEG_PER_SEC = 5.5;
const IDLE_DEG_PER_SEC_CALM = 1.4;

const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
const lerp = (a: number, b: number, t: number) => a + (b - a) * t;

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

/** Full accent at the seam angle, feathering to a near-black floor and back, so 0% and 100% match. */
function sweepImage(accent: string, wedgeSoftness: number, intensity: number, angleDeg: number, originX: number, originY: number): string {
  const [r, g, b] = hexToRgb(accent);
  const peak = clamp(intensity * 1.05, 0.15, 1);
  const mid = peak * 0.34;
  const floor = peak * 0.06;
  const feather = clamp(4 + wedgeSoftness * 26, 4, 30);
  const rgba = (a: number) => `rgba(${r}, ${g}, ${b}, ${a.toFixed(3)})`;
  const angle = (((angleDeg % 360) + 360) % 360).toFixed(2);
  return `conic-gradient(from ${angle}deg at ${originX.toFixed(2)}% ${originY.toFixed(2)}%, ${rgba(peak)} 0%, ${rgba(mid)} ${feather.toFixed(1)}%, ${rgba(floor)} 50%, ${rgba(mid)} ${(100 - feather).toFixed(1)}%, ${rgba(peak)} 100%)`;
}

const root = ref<HTMLDivElement | null>(null);
const sweep = ref<HTMLDivElement | null>(null);
let wake = () => {};

onMounted(() => {
  const el = root.value;
  const sweepEl = sweep.value;
  if (!el || !sweepEl) return;
  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  let raf = 0;
  let engaged = false;
  let targetX = 50;
  let targetY = 50;
  let curX = 50;
  let curY = 50;
  let velX = 0;
  let velY = 0;
  let targetAngle = 0;
  let curAngle = 0;
  let velAngle = 0;
  let idleBase = 0;
  let idleAt = performance.now();

  const paint = () => {
    sweepEl.style.backgroundImage = sweepImage(props.accent, props.wedgeSoftness, props.intensity, curAngle, curX, curY);
  };

  /** Retargets the angle spring to the nearest turn-equivalent of `raw`, so it always eases the short way. */
  const aimAngle = (raw: number) => {
    const diff = raw - curAngle;
    const wrapped = diff - Math.round(diff / 360) * 360;
    targetAngle = curAngle + wrapped;
  };

  const trackPointer = (clientX: number, clientY: number) => {
    const r = el.getBoundingClientRect();
    targetX = clamp(((clientX - r.left) / r.width) * 100, 0, 100);
    targetY = clamp(((clientY - r.top) / r.height) * 100, 0, 100);
    const dx = clientX - (r.left + r.width / 2);
    const dy = clientY - (r.top + r.height / 2);
    aimAngle((Math.atan2(dy, dx) * 180) / Math.PI + 90);
  };

  wake = () => {
    if (!raf) raf = requestAnimationFrame(tick);
  };

  const tick = (now: number) => {
    if (!engaged && props.idleSpin) {
      const rate = reduced ? IDLE_DEG_PER_SEC_CALM : IDLE_DEG_PER_SEC;
      targetAngle = idleBase + (rate * (now - idleAt)) / 1000;
    }
    if (reduced) {
      curX = targetX;
      curY = targetY;
      curAngle = targetAngle;
      velX = velY = velAngle = 0;
    } else {
      const accel = lerp(0.3, 0.045, props.followLag);
      const friction = lerp(0.72, 0.9, props.followLag);
      velX = (velX + (targetX - curX) * accel) * friction;
      velY = (velY + (targetY - curY) * accel) * friction;
      velAngle = (velAngle + (targetAngle - curAngle) * accel) * friction;
      curX += velX;
      curY += velY;
      curAngle += velAngle;
    }
    paint();

    const settled =
      Math.abs(targetX - curX) < 0.03 &&
      Math.abs(targetY - curY) < 0.03 &&
      Math.abs(velX) < 0.03 &&
      Math.abs(velY) < 0.03 &&
      Math.abs(velAngle) < 0.03;
    const keepSpinning = !engaged && props.idleSpin;
    if (settled && !keepSpinning) {
      raf = 0;
      return;
    }
    raf = requestAnimationFrame(tick);
  };

  const onMove = (event: PointerEvent) => {
    engaged = true;
    trackPointer(event.clientX, event.clientY);
    wake();
  };
  const onRelease = () => {
    if (!engaged) return;
    engaged = false;
    targetX = 50;
    targetY = 50;
    idleBase = curAngle;
    idleAt = performance.now();
    wake();
  };

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

  paint();
  wake();

  onBeforeUnmount(() => {
    cancelAnimationFrame(raf);
    wake = () => {};
    el.removeEventListener("pointermove", onMove);
    el.removeEventListener("pointerdown", onMove);
    el.removeEventListener("pointerup", onRelease);
    el.removeEventListener("pointercancel", onRelease);
    el.removeEventListener("pointerleave", onRelease);
  });
});

/** If idleSpin turns on again while the loop has settled and gone to sleep, wake it back up. */
watch(
  () => props.idleSpin,
  (v) => {
    if (v) wake();
  },
);
</script>

<template>
  <div ref="root" class="pas">
    <div ref="sweep" class="pas__sweep" aria-hidden="true"></div>
    <div class="pas__grain" aria-hidden="true"></div>
    <div v-if="$slots.default" class="pas__content"><slot /></div>
  </div>
</template>

<style scoped>
.pas {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background-color: #05060a;
  touch-action: none;
}
.pas__sweep {
  position: absolute;
  inset: 0;
}
.pas__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.33 0.33 0.33 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pas__content {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  align-items: flex-end;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.4);
}
</style>

Nearby