Tilt Pointer

"use client";

import { createContext, type ReactNode, type RefObject, useContext, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useMotionValue, useSpring, useTransform, useVelocity, type SpringOptions } from "motion/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  TiltPointer                                                        */
/* ------------------------------------------------------------------ */

interface PointerContextValue {
  pos: { x: number; y: number };
  active: boolean;
  stageRef: RefObject<HTMLDivElement | null>;
}

const PointerContext = createContext<PointerContextValue | null>(null);

function usePointerStage() {
  const ctx = useContext(PointerContext);
  if (!ctx) throw new Error("TiltPointer parts must live inside <PointerStage>");
  return ctx;
}

interface PointerStageProps {
  children: ReactNode;
  className?: string;
}

/**
 * The stage that swaps the native cursor for the custom one: it tracks the
 * pointer over its parent, hides the real cursor while inside, and provides
 * position + activity to Pointer and PointerLabel children.
 * @param {ReactNode} children - Stage content plus Pointer/PointerLabel [Required]
 */
export export function PointerStage({ children, className }: PointerStageProps) {
  const stageRef = useRef<HTMLDivElement | null>(null);
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const [active, setActive] = useState(false);

  useEffect(() => {
    const stage = stageRef.current;
    if (!stage) return;

    const move = (e: PointerEvent) => {
      const rect = stage.getBoundingClientRect();
      setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
      setActive(true);
    };
    const out = (e: PointerEvent | MouseEvent) => {
      if (e.relatedTarget === null || !stage.contains(e.relatedTarget as Node)) {
        setActive(false);
      }
    };
    stage.addEventListener("pointermove", move, { passive: true });
    stage.addEventListener("pointerout", out, { passive: true });
    return () => {
      stage.removeEventListener("pointermove", move);
      stage.removeEventListener("pointerout", out);
    };
  }, []);

  return (
    <PointerContext.Provider value={{ pos, active, stageRef }}>
      <div
        ref={stageRef}
        className={cn("relative", className)}
        style={{ cursor: active ? "none" : undefined }}
      >
        {children}
      </div>
    </PointerContext.Provider>
  );
}

const POINTER_SPRING: SpringOptions = { damping: 25, stiffness: 300 };

/**
 * The arrow itself: spring-follows the pointer, tilts up to ±45° with the
 * travel velocity, and compresses slightly at speed — a cursor with weight.
 * Mounts/unmounts through AnimatePresence as the pointer enters and leaves.
 */
export function Pointer({ className }: { className?: string }) {
  const { pos, active } = usePointerStage();
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  useEffect(() => {
    x.set(pos.x);
    y.set(pos.y);
  }, [pos, x, y]);

  const smoothX = useSpring(x, POINTER_SPRING);
  const smoothY = useSpring(y, POINTER_SPRING);
  const velocityX = useVelocity(smoothX);
  const velocityY = useVelocity(smoothY);

  const tiltTarget = useTransform([velocityX, velocityY], ([vx, vy]) => {
    const t = ((vx as number) / 1000) * 30 + ((vy as number) / 1000) * 30;
    return Math.max(-45, Math.min(45, t));
  });
  const rotate = useSpring(tiltTarget, { damping: 15, stiffness: 200 });
  const scale = useTransform([velocityX, velocityY], ([vx, vy]) => {
    const speed = Math.hypot(vx as number, vy as number);
    return 1 - Math.min(speed / 2000, 0.1);
  });

  return (
    <AnimatePresence>
      {active && (
        <motion.div
          aria-hidden
          className="pointer-events-none absolute z-50"
          style={{ top: smoothY, left: smoothX, transform: "translate(-4.5%, -11%)" }}
          initial={{ scale: 0, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0, opacity: 0 }}
        >
          {/* transformOrigin sits on the arrow TIP so tilt pivots there */}
          <motion.svg
            className={cn("size-6 text-zinc-100", className)}
            viewBox="0 0 40 40"
            style={{ rotate, scale, transformOrigin: "4.5% 11%" }}
          >
            <path
              fill="currentColor"
              d="M1.8 4.4 7 36.2c.3 1.8 2.6 2.3 3.6.8l3.9-5.7c1.7-2.5 4.5-4.1 7.5-4.3l6.9-.5c1.8-.1 2.5-2.4 1.1-3.5L5 2.5c-1.4-1.1-3.5 0-3.3 1.9Z"
            />
          </motion.svg>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

interface PointerLabelProps {
  children: ReactNode;
  /** Gap from the pointer tip [Optional, default: 15] */
  sideOffset?: number;
  alignOffset?: number;
  className?: string;
}

/**
 * A chip that trails the pointer on a stiffer spring and stretches with
 * velocity (scale + skew per axis) — the label feels dragged, not glued.
 */
export export function PointerLabel({
  children,
  sideOffset = 15,
  alignOffset = 5,
  className,
}: PointerLabelProps) {
  const { pos, active } = usePointerStage();
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  useEffect(() => {
    x.set(pos.x + sideOffset);
    y.set(pos.y + sideOffset + alignOffset);
  }, [pos, x, y, sideOffset, alignOffset]);

  const smoothX = useSpring(x, POINTER_SPRING);
  const smoothY = useSpring(y, POINTER_SPRING);
  const velocityX = useVelocity(smoothX);
  const velocityY = useVelocity(smoothY);

  const scaleX = useTransform(velocityX, [-1000, 0, 1000], [0.9, 1, 1.15]);
  const scaleY = useTransform(velocityY, [-1000, 0, 1000], [1.15, 1, 0.9]);
  const skewX = useTransform(velocityX, [-1000, 0, 1000], [-3, 0, 3]);
  const skewY = useTransform(velocityY, [-1000, 0, 1000], [-3, 0, 3]);

  return (
    <AnimatePresence>
      {active && (
        <motion.div
          aria-hidden
          className="pointer-events-none absolute z-50"
          style={{ top: smoothY, left: smoothX }}
          initial={{ scale: 0, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0, opacity: 0 }}
        >
          <motion.div
            className={cn(
              "rounded-md bg-zinc-100 px-2 py-1 text-sm font-medium text-zinc-900",
              className,
            )}
            style={{ scaleX, scaleY, skewX, skewY }}
          >
            {children}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}