VinylPlayer

npx shadcn@latest add "https://designpass.dev/r/VinylPlayer-TS-TW.json"

/*!
 * VinylPlayer, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/vinyl-player
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import React, {
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type CSSProperties,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
} from "react";
import Noise from "../backgrounds/Noise";

export type VinylPlayerColors = readonly [string, string, string];

export interface VinylPlayerProps {
  /** Center artwork URL (path, remote URL, or data URI). */
  src?: string;
  /** Accessible label for the artwork. */
  alt?: string;
  /** Replace the default img (e.g. next/image wrappers). */
  children?: ReactNode;
  /**
   * Three colors that build the iridescent radial wash on the platter.
   * Order is warm highlight → mid tone → cool highlight.
   */
  colors?: VinylPlayerColors;
  /** Outer stage diameter in CSS pixels (disc + rim dots). Default 320. */
  size?: number;
  /** Seconds per full disc revolution. Default 16. */
  spinDuration?: number;
  /** Seconds for the light chase to travel once around the dot ring. Default 4. */
  chaseDuration?: number;
  /** When false, disc spin and dot chase pause. Default true. */
  playing?: boolean;
  /**
   * Direction for the rim-dot chase (and the platter's default cruise).
   * Dragging can fling the platter the other way; the chase stays on this prop.
   */
  direction?: "clockwise" | "counterclockwise";
  /**
   * Drag the platter like a DJ: scrub while held, then ease back to cruise.
   * Release velocity can flip the platter's cruise direction. Default true.
   */
  interactive?: boolean;
  /** Show the tonearm resting on the rim. Default true. */
  tonearm?: boolean;
  /** Soft ground shadow under the platter. Default true. */
  shadow?: boolean;
  /** Film grain on the vinyl surface. Default true. */
  noise?: boolean;
  /** Number of rim dots in the chase ring. Default 56. */
  dotCount?: number;
  /** Programmatic groove ring count between label and rim. Default 36. */
  grooveCount?: number;
  className?: string;
  style?: CSSProperties;
}

/** How quickly post-drag angular velocity blends into cruise (1/s). */
const SPIN_VELOCITY_EASE = 3.2;
/** Ignore tiny release speeds when deciding fling direction (deg/s). */
const SPIN_FLING_MIN = 45;

export const VINYL_PLAYER_DEFAULT_COLORS: VinylPlayerColors = [
  "#ffe5eb",
  "#ffe5cc",
  "#44669c",
];

function cx(...parts: Array<string | false | null | undefined>) {
  return parts.filter(Boolean).join(" ");
}

/** Chrome metal stop string shared by tonearm gradients. */
function TonearmMetalStops() {
  return (
    <>
      <stop stopColor="#919191" />
      <stop offset="0.197" stopColor="#ECECEC" />
      <stop offset="0.313" stopColor="#ECECEC" />
      <stop offset="0.582" stopColor="#8F8F8F" />
      <stop offset="0.745" stopColor="#BDBFBE" />
      <stop offset="0.841" stopColor="#BDBFBE" />
      <stop offset="1" stopColor="#7B7B7B" />
    </>
  );
}

function TonearmDarkStops() {
  return (
    <>
      <stop stopColor="#0C0D0F" />
      <stop offset="0.313" stopColor="#333333" />
      <stop offset="0.649" stopColor="#171717" />
      <stop offset="0.875" stopColor="#060606" />
      <stop offset="1" stopColor="#0F0F0F" />
    </>
  );
}

/**
 * Pre-rotated tonearm artwork (pivot, shaft, cartridge, stylus). Geometry
 * from the DesignPass tonearm master; Figma foreignObject conics replaced
 * with portable SVG gradients. Ids are scoped per instance.
 */
function TonearmSvg({ id }: { id: string }) {
  const blur = `${id}-blur`;
  const metalA = `${id}-metal-a`;
  const metalB = `${id}-metal-b`;
  const metalC = `${id}-metal-c`;
  const metalD = `${id}-metal-d`;
  const darkA = `${id}-dark-a`;
  const darkB = `${id}-dark-b`;
  const darkC = `${id}-dark-c`;
  const darkD = `${id}-dark-d`;
  const darkE = `${id}-dark-e`;
  const ring = `${id}-ring`;

  return (
    <svg
      width="79"
      height="186"
      viewBox="0 0 79 186"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="h-full w-full"
      aria-hidden="true"
    >
      <defs>
        <filter
          id={blur}
          x="2.4115"
          y="0"
          width="76.0056"
          height="185.846"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur" />
        </filter>
        <linearGradient
          id={metalA}
          x1="31.7622"
          y1="205.338"
          x2="26.9965"
          y2="205.338"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmMetalStops />
        </linearGradient>
        <linearGradient
          id={metalB}
          x1="50.2451"
          y1="11.9483"
          x2="68.6582"
          y2="16.8821"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmMetalStops />
        </linearGradient>
        <linearGradient
          id={metalC}
          x1="47.9103"
          y1="20.6617"
          x2="66.3235"
          y2="25.5955"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmMetalStops />
        </linearGradient>
        <linearGradient
          id={metalD}
          x1="49.0314"
          y1="25.6844"
          x2="62.8413"
          y2="29.3847"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmMetalStops />
        </linearGradient>
        <linearGradient
          id={ring}
          x1="28.93"
          y1="38.13"
          x2="74.02"
          y2="50.21"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmMetalStops />
        </linearGradient>
        <linearGradient
          id={darkA}
          x1="19.3836"
          y1="148.169"
          x2="27.2749"
          y2="150.283"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmDarkStops />
        </linearGradient>
        <linearGradient
          id={darkB}
          x1="16.7177"
          y1="161.171"
          x2="23.7929"
          y2="165.256"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmDarkStops />
        </linearGradient>
        <linearGradient
          id={darkC}
          x1="50.2451"
          y1="11.9483"
          x2="68.6582"
          y2="16.8821"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmDarkStops />
        </linearGradient>
        <linearGradient
          id={darkD}
          x1="48.5271"
          y1="18.36"
          x2="66.9402"
          y2="23.2938"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmDarkStops />
        </linearGradient>
        <linearGradient
          id={darkE}
          x1="49.5953"
          y1="23.58"
          x2="63.4051"
          y2="27.2804"
          gradientUnits="userSpaceOnUse"
        >
          <TonearmDarkStops />
        </linearGradient>
      </defs>

      <g opacity="0.25" filter={`url(#${blur})`}>
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M61.2986 10.1525C70.4924 12.616 70.4173 12.9473 70.4171 12.9482L66.9811 25.7717L64.327 26.4702L63.446 29.7582L63.1734 29.6852L58.825 29.5773L58.5784 29.5112L58.4456 30.0067C65.7727 33.1641 69.8685 41.3002 67.7424 49.2349C65.6163 57.1697 58.0012 62.1675 50.0771 61.2384L27.4779 145.58L29.1219 146.02L27.4529 152.249L27.5243 152.291L29.2932 153.312L27.6682 160.212L17.4868 177.846L10.4115 173.761L20.9166 155.566L18.4994 154.099L21.2306 143.906L22.8746 144.346L45.4738 60.005C38.1468 56.8475 34.0509 48.7118 36.177 40.777C38.3031 32.8423 45.9182 27.8441 53.8423 28.7732L53.9751 28.2778L53.7285 28.2117L49.9087 26.1309L49.6361 26.0579L50.5172 22.7698L48.5679 20.8379L52.004 8.01443C52.004 8.01443 52.097 7.68695 61.2986 10.1525ZM52.5899 33.4475C47.2356 33.1501 42.2232 36.6253 40.7803 42.0105C39.3373 47.3957 41.9407 52.9111 46.7263 55.3307L47.2689 53.3056C43.5719 51.2195 41.6036 46.829 42.7531 42.5391C43.9026 38.2492 47.8025 35.4307 52.0472 35.4726L52.5899 33.4475ZM56.6505 36.7061C60.3475 38.7921 62.3157 43.183 61.1663 47.4729C60.0168 51.7628 56.1169 54.5809 51.8722 54.539L51.3296 56.5642C56.6838 56.8615 61.6961 53.3867 63.1391 48.0015C64.5821 42.6163 61.9788 37.1005 57.1932 34.6809L56.6505 36.7061Z"
          fill="black"
        />
      </g>

      {/* Pivot ring (annulus) */}
      <path
        d="M55.7072 28.3895C64.4238 30.7251 69.5966 39.6846 67.261 48.4011C64.9254 57.1177 55.9659 62.2905 47.2493 59.9549C38.5328 57.6193 33.36 48.6597 35.6956 39.9432C38.0312 31.2267 46.9907 26.0539 55.7072 28.3895ZM53.8955 35.1509C48.9132 33.8159 43.7921 36.7726 42.4571 41.7549C41.1221 46.7372 44.0788 51.8584 49.0611 53.1934C54.0433 54.5284 59.1645 51.5717 60.4995 46.5894C61.8345 41.6071 58.8778 36.4859 53.8955 35.1509Z"
        fill={`url(#${ring})`}
        fillRule="evenodd"
      />
      <circle
        opacity="0.2"
        cx="51.4783"
        cy="44.1722"
        r="12.797"
        transform="rotate(15 51.4783 44.1722)"
        stroke="black"
        strokeWidth="3"
      />

      {/* Shaft */}
      <rect
        x="26.9965"
        y="144.746"
        width="4.76568"
        height="121.184"
        transform="rotate(-165 26.9965 144.746)"
        fill={`url(#${metalA})`}
      />

      {/* Cartridge + stylus */}
      <path
        d="M25.2926 157.681L18.018 153.265L20.7492 143.072L28.6405 145.187L25.2926 157.681Z"
        fill={`url(#${darkA})`}
      />
      <path
        d="M17.0053 177.013L9.93011 172.928L23.5053 149.415L27.0429 151.457L28.8117 152.478L27.1867 159.378L23.7929 165.256L17.0053 177.013Z"
        fill={`url(#${darkB})`}
      />

      {/* Counterweight stack */}
      <path
        d="M67.3807 21.6498L48.9676 16.716L51.5226 7.18061L69.9357 12.1144L67.3807 21.6498Z"
        fill={`url(#${darkC})`}
      />
      <path
        d="M67.3807 21.6498L48.9676 16.716L51.5226 7.18061C51.5226 7.18061 51.6107 6.8518 60.8173 9.3187C70.0238 11.7856 69.9357 12.1144 69.9357 12.1144L67.3807 21.6498Z"
        fill={`url(#${metalB})`}
      />

      {/* Pivot hub */}
      <circle
        cx="51.4783"
        cy="44.1722"
        r="9.53135"
        transform="rotate(15 51.4783 44.1722)"
        fill={`url(#${ring})`}
      />
      <circle
        cx="51.4783"
        cy="44.1722"
        r="9.53135"
        transform="rotate(15 51.4783 44.1722)"
        fill="black"
        fillOpacity="0.75"
      />

      {/* Pivot collar steps */}
      <path
        d="M66.4997 24.9378L48.0865 20.004L48.9676 16.716C48.9676 16.716 49.3845 16.4753 58.4267 18.8981C67.4688 21.321 67.3807 21.6498 67.3807 21.6498L66.4997 24.9378Z"
        fill={`url(#${darkD})`}
      />
      <path
        d="M63.8456 25.6363L50.0358 21.936L48.0865 20.0041C48.0865 20.0041 48.1746 19.6752 57.3812 22.1421C66.5878 24.609 66.4997 24.9378 66.4997 24.9378L63.8456 25.6363Z"
        fill={`url(#${metalC})`}
      />
      <path
        d="M62.9646 28.9244L49.1547 25.2241L50.0358 21.936C50.0358 21.936 50.1239 21.6072 57.0288 23.4574C63.9337 25.3075 63.8456 25.6363 63.8456 25.6363L62.9646 28.9244Z"
        fill={`url(#${darkE})`}
      />
      <path
        d="M58.3436 28.7435L53.2471 27.3779L49.1724 25.1583C49.1724 25.1583 49.2429 24.8953 56.1478 26.7454C63.0527 28.5956 62.9822 28.8586 62.9822 28.8586L58.3436 28.7435Z"
        fill={`url(#${metalD})`}
      />
    </svg>
  );
}

function grooveRadii(count: number, inner: number, outer: number): number[] {
  const n = Math.max(4, Math.floor(count));
  const radii: number[] = [];
  for (let i = 0; i < n; i++) {
    const t = (i + 0.5) / n;
    radii.push(inner + (outer - inner) * t);
  }
  return radii;
}

/**
 * Pigment-only wash: three colors and mixes between them. No white tints —
 * those chalk out dark palettes. Pearlescence comes from a soft-light sheen
 * layer on top (`buildIridescentSheen`).
 */
function buildIridescentWash(colors: VinylPlayerColors): string {
  const [a, b, c] = colors;
  const conic = `conic-gradient(from 200deg at 50% 50%,
    ${a} 0deg,
    color-mix(in srgb, ${a} 78%, ${b}) 22deg,
    color-mix(in srgb, ${a} 55%, ${b}) 42deg,
    color-mix(in srgb, ${a} 32%, ${b}) 62deg,
    ${b} 82deg,
    color-mix(in srgb, ${b} 78%, ${c}) 102deg,
    color-mix(in srgb, ${b} 52%, ${c}) 122deg,
    color-mix(in srgb, ${b} 28%, ${c}) 145deg,
    ${c} 168deg,
    color-mix(in srgb, ${c} 78%, ${a}) 190deg,
    color-mix(in srgb, ${c} 52%, ${a}) 212deg,
    color-mix(in srgb, ${c} 28%, ${a}) 235deg,
    color-mix(in srgb, ${a} 62%, ${b}) 258deg,
    color-mix(in srgb, ${b} 55%, ${c}) 282deg,
    color-mix(in srgb, ${b} 38%, ${c}) 305deg,
    color-mix(in srgb, ${c} 55%, ${a}) 328deg,
    color-mix(in srgb, ${a} 70%, ${b}) 345deg,
    ${a} 360deg
  )`;
  // Depth radial mixes toward black (not pale gray) so light pastels keep a
  // vinyl rim and dark pigments stay rich instead of washing out.
  return [
    conic,
    `radial-gradient(circle at 50% 50%,
      ${b} 0%,
      color-mix(in srgb, ${a} 72%, black) 48%,
      color-mix(in srgb, ${c} 48%, black) 100%
    )`,
  ].join(", ");
}

/** Neutral light bands; soft-light over pigment reads on light and dark. */
function buildIridescentSheen(): string {
  return [
    `conic-gradient(from 200deg at 50% 50%,
      transparent 0deg,
      rgba(255, 255, 255, 0.55) 18deg,
      transparent 38deg,
      rgba(255, 255, 255, 0.22) 70deg,
      transparent 95deg,
      rgba(255, 255, 255, 0.5) 118deg,
      transparent 148deg,
      rgba(255, 255, 255, 0.18) 175deg,
      transparent 200deg,
      rgba(255, 255, 255, 0.48) 228deg,
      transparent 258deg,
      rgba(255, 255, 255, 0.28) 292deg,
      transparent 322deg,
      rgba(255, 255, 255, 0.42) 342deg,
      transparent 360deg
    )`,
    `radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.55) 0%, transparent 38%)`,
    `radial-gradient(circle at 74% 76%, rgba(255, 255, 255, 0.4) 0%, transparent 44%)`,
    `radial-gradient(circle at 58% 42%, rgba(255, 255, 255, 0.18) 0%, transparent 34%)`,
  ].join(", ");
}

function pointerAngleDeg(clientX: number, clientY: number, el: HTMLElement): number {
  const rect = el.getBoundingClientRect();
  const cx = rect.left + rect.width / 2;
  const cy = rect.top + rect.height / 2;
  // Screen y grows downward, so atan2 rises clockwise — matches CSS rotate.
  return (Math.atan2(clientY - cy, clientX - cx) * 180) / Math.PI;
}

function shortestAngleDelta(from: number, to: number): number {
  let d = to - from;
  d = ((((d + 180) % 360) + 360) % 360) - 180;
  return d;
}

/**
 * Iridescent spinning platter with a customizable center image, programmatic
 * vinyl grooves, a thin outer stroke, and a static ring of dots lit by a
 * circular chase that fades behind the head. Drag the disc like a DJ: scrub
 * while held, then ease back to cruise; release velocity can flip direction.
 * Optional detailed tonearm, ground shadow, and vinyl grain. Depends on Noise.
 * Honors prefers-reduced-motion.
 */
export default function VinylPlayer({
  src,
  alt = "",
  children,
  colors = VINYL_PLAYER_DEFAULT_COLORS,
  size = 320,
  spinDuration = 16,
  chaseDuration = 4,
  playing = true,
  direction = "clockwise",
  interactive = true,
  tonearm = true,
  shadow = true,
  noise = true,
  dotCount = 56,
  grooveCount = 36,
  className = "",
  style,
}: VinylPlayerProps) {
  const uid = useId().replace(/:/g, "");
  const discRef = useRef<HTMLDivElement>(null);
  const angleRef = useRef(0);
  const velocityRef = useRef(0);
  // Platter cruise sign; may diverge from `direction` after a fling.
  const dirSignRef = useRef(direction === "clockwise" ? 1 : -1);
  const dragRef = useRef(false);
  const lastPointerAngleRef = useRef(0);
  const lastMoveTimeRef = useRef(0);
  const dragVelRef = useRef(0);
  const frameRef = useRef(0);
  const playingRef = useRef(playing);
  const spinDurationRef = useRef(spinDuration);
  const [grabbing, setGrabbing] = useState(false);
  const [reducedMotion, setReducedMotion] = useState(false);

  playingRef.current = playing;
  spinDurationRef.current = spinDuration;

  const discPx = Math.round(size * 0.78);
  const labelPx = Math.round(discPx * 0.42);
  const strokePx = discPx + 10;
  const dotRadius = discPx / 2 + 10;
  const grooveInner = 22;
  const grooveOuter = 48.5;
  const radii = useMemo(
    () => grooveRadii(grooveCount, grooveInner, grooveOuter),
    [grooveCount],
  );

  const nDots = Math.max(8, Math.floor(dotCount));
  const chaseVar = `--sd-chase-${uid}`;
  const chaseAngleName = `sd-chase-angle-${uid}`;
  const chaseRootClass = `sd-chase-root-${uid}`;
  const rimClass = `sd-rim-${uid}`;
  const dotsClass = `sd-dots-${uid}`;
  const dotClass = `sd-dot-${uid}`;
  // Envelope spans a fixed number of dots so high counts (e.g. 80) do not
  // light almost a third of the ring and look like a second head.
  const stepDeg = 360 / nDots;
  const chasePeakDeg = stepDeg;
  const chaseMidDeg = stepDeg * 4;
  const chaseEndDeg = stepDeg * 11;
  // Chase always follows the `direction` prop, not platter fling cruise.
  // One shared @property angle drives rim stroke + dot mask (no per-dot delays).
  const headTravelsCcw = direction === "clockwise";
  const chaseSpinTo = headTravelsCcw ? -360 : 360;
  // Peak screen angle at t=0. steps(end) holds at the interval start;
  // bias a quarter-step along travel (between start-hold and mid-hold).
  const peakAt0Deg = headTravelsCcw
    ? chasePeakDeg
    : 360 - stepDeg - chasePeakDeg;
  const stepBiasDeg = stepDeg / 4;
  const rimFromDeg =
    ((headTravelsCcw
      ? peakAt0Deg - stepBiasDeg
      : peakAt0Deg + stepBiasDeg) %
      360 +
      360) %
    360;
  const rimPeakA = 0.28;
  const rimMidA = 0.12;
  const rimBaseA = 0.025;
  // Unlit dots stay sharp and quiet; only the chase head ramps up.
  const dotPeakA = 1;
  const dotMidA = 0.4;
  const dotBaseA = 0.07;
  // Trail sits behind the head; `from` includes the shared chase angle.
  const chaseFrom = `calc(${rimFromDeg}deg + var(${chaseVar}))`;
  const rimConic = headTravelsCcw
    ? `conic-gradient(
      from ${chaseFrom},
      rgba(255, 255, 255, ${rimPeakA}) 0deg,
      rgba(255, 255, 255, ${rimMidA}) ${chaseMidDeg}deg,
      rgba(255, 255, 255, ${rimBaseA}) ${chaseEndDeg}deg,
      rgba(255, 255, 255, ${rimBaseA}) ${360 - chasePeakDeg}deg,
      rgba(255, 255, 255, ${rimPeakA}) 360deg
    )`
    : `conic-gradient(
      from ${chaseFrom},
      rgba(255, 255, 255, ${rimPeakA}) 0deg,
      rgba(255, 255, 255, ${rimBaseA}) ${chasePeakDeg}deg,
      rgba(255, 255, 255, ${rimBaseA}) ${360 - chaseEndDeg}deg,
      rgba(255, 255, 255, ${rimMidA}) ${360 - chaseMidDeg}deg,
      rgba(255, 255, 255, ${rimPeakA}) 360deg
    )`;
  const dotsMask = headTravelsCcw
    ? `conic-gradient(
      from ${chaseFrom},
      rgba(0, 0, 0, ${dotPeakA}) 0deg,
      rgba(0, 0, 0, ${dotMidA}) ${chaseMidDeg}deg,
      rgba(0, 0, 0, ${dotBaseA}) ${chaseEndDeg}deg,
      rgba(0, 0, 0, ${dotBaseA}) ${360 - chasePeakDeg}deg,
      rgba(0, 0, 0, ${dotPeakA}) 360deg
    )`
    : `conic-gradient(
      from ${chaseFrom},
      rgba(0, 0, 0, ${dotPeakA}) 0deg,
      rgba(0, 0, 0, ${dotBaseA}) ${chasePeakDeg}deg,
      rgba(0, 0, 0, ${dotBaseA}) ${360 - chaseEndDeg}deg,
      rgba(0, 0, 0, ${dotMidA}) ${360 - chaseMidDeg}deg,
      rgba(0, 0, 0, ${dotPeakA}) 360deg
    )`;

  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const sync = () => setReducedMotion(mq.matches);
    sync();
    mq.addEventListener("change", sync);
    return () => mq.removeEventListener("change", sync);
  }, []);

  // Prop direction resets platter cruise; flings may override until the prop changes.
  useEffect(() => {
    dirSignRef.current = direction === "clockwise" ? 1 : -1;
  }, [direction]);

  // Drive platter angle: idle cruise, drag scrub, post-drag ease to cruise.
  // Cruise inputs (playing / duration / direction) are read from refs so a
  // fling is not cancelled when direction updates on release.
  useEffect(() => {
    const disc = discRef.current;
    if (!disc) return;

    if (reducedMotion) {
      disc.style.transform = `rotate(${angleRef.current}deg)`;
      return;
    }

    const cruiseSpeed = () => {
      if (!playingRef.current) return 0;
      const duration = Math.max(0.001, spinDurationRef.current);
      return dirSignRef.current * (360 / duration);
    };

    if (velocityRef.current === 0) velocityRef.current = cruiseSpeed();
    disc.style.transform = `rotate(${angleRef.current}deg)`;

    let last = performance.now();
    const tick = (now: number) => {
      frameRef.current = requestAnimationFrame(tick);
      const dt = Math.min(0.05, (now - last) / 1000);
      last = now;
      if (dragRef.current) return;

      const cruise = cruiseSpeed();
      const velocity = velocityRef.current;
      if (Math.abs(cruise - velocity) > 0.05) {
        const t = 1 - Math.exp(-SPIN_VELOCITY_EASE * dt);
        velocityRef.current = velocity + (cruise - velocity) * t;
      } else {
        velocityRef.current = cruise;
      }

      if (velocityRef.current === 0) return;
      angleRef.current += velocityRef.current * dt;
      disc.style.transform = `rotate(${angleRef.current}deg)`;
    };

    frameRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frameRef.current);
  }, [reducedMotion]);

  const setGrabbingState = (next: boolean) => {
    setGrabbing((prev) => (prev === next ? prev : next));
  };

  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (!interactive || reducedMotion) return;
    const disc = discRef.current;
    if (!disc) return;
    dragRef.current = true;
    dragVelRef.current = 0;
    lastPointerAngleRef.current = pointerAngleDeg(event.clientX, event.clientY, disc);
    lastMoveTimeRef.current = performance.now();
    setGrabbingState(true);
    event.currentTarget.setPointerCapture(event.pointerId);
    event.preventDefault();
  };

  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (!interactive || !dragRef.current) return;
    const disc = discRef.current;
    if (!disc) return;
    const nextAngle = pointerAngleDeg(event.clientX, event.clientY, disc);
    const delta = shortestAngleDelta(lastPointerAngleRef.current, nextAngle);
    const now = performance.now();
    const dt = Math.max(0.001, (now - lastMoveTimeRef.current) / 1000);
    lastPointerAngleRef.current = nextAngle;
    lastMoveTimeRef.current = now;
    // Exponential moving average keeps release velocity stable.
    const instant = delta / dt;
    dragVelRef.current = dragVelRef.current * 0.65 + instant * 0.35;
    angleRef.current += delta;
    disc.style.transform = `rotate(${angleRef.current}deg)`;
  };

  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (!interactive || !dragRef.current) return;
    dragRef.current = false;
    setGrabbingState(false);
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }

    const releaseVel = dragVelRef.current;
    velocityRef.current = releaseVel;
    // Fling can reverse the platter cruise; chase/gradient stay on `direction`.
    if (Math.abs(releaseVel) >= SPIN_FLING_MIN) {
      dirSignRef.current = releaseVel > 0 ? 1 : -1;
    }
  };

  const wash = buildIridescentWash(colors);
  const sheen = buildIridescentSheen();
  const [warm, mid, cool] = colors;
  const canDrag = interactive && !reducedMotion;
  const cursor = canDrag ? (grabbing ? "grabbing" : "grab") : undefined;

  return (
    <div
      className={cx("relative inline-block select-none overflow-visible", className)}
      style={{
        width: size,
        height: size,
        ...style,
      }}
      role="img"
      aria-label={alt || "Vinyl player"}
    >
      {shadow ? (
        /* Drop shadow: 0 18px 32px at 50% opacity. */
        <div
          aria-hidden="true"
          className="pointer-events-none absolute left-1/2 top-1/2 rounded-full"
          style={{
            width: discPx,
            height: discPx,
            marginLeft: -discPx / 2,
            marginTop: -discPx / 2,
            boxShadow: "0 18px 32px rgba(0, 0, 0, 0.28)",
          }}
        />
      ) : null}

      <style
        dangerouslySetInnerHTML={{
          __html: `
@property ${chaseVar} {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@keyframes ${chaseAngleName} {
  to { ${chaseVar}: ${chaseSpinTo}deg; }
}
.${chaseRootClass}[data-chasing="true"] {
  /* One stepped clock for rim + dots; no per-dot delay drift. */
  animation: ${chaseAngleName} ${chaseDuration}s steps(${nDots}) infinite;
}
.${rimClass} {
  position: absolute;
  left: 50%;
  top: 50%;
  width: ${strokePx}px;
  height: ${strokePx}px;
  margin-left: ${-strokePx / 2}px;
  margin-top: ${-strokePx / 2}px;
  border-radius: 9999px;
  pointer-events: none;
  background: ${rimConic};
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 1.25px),
    #000 calc(100% - 1.25px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 1.25px),
    #000 calc(100% - 1.25px)
  );
}
.${dotsClass} {
  pointer-events: none;
  position: absolute;
  inset: 0;
  -webkit-mask-image: ${dotsMask};
  mask-image: ${dotsMask};
}
.${dotClass} {
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.7);
}
/* Paused: uniform baseline dots (no frozen chase head on the ring). */
.${chaseRootClass}:not([data-chasing="true"]) .${dotsClass} {
  -webkit-mask-image: none;
  mask-image: none;
}
.${chaseRootClass}:not([data-chasing="true"]) .${dotClass} {
  opacity: ${dotBaseA};
}
@media (prefers-reduced-motion: reduce) {
  .${chaseRootClass}[data-chasing="true"] {
    animation: none !important;
  }
}
`,
        }}
      />

      {/* Shared chase clock: rim stroke + dot mask read the same angle. */}
      <div
        aria-hidden="true"
        className={chaseRootClass}
        data-chasing={playing && !reducedMotion ? "true" : "false"}
      >
        <div className={rimClass} />
        <div className={dotsClass}>
          {Array.from({ length: nDots }, (_, i) => {
            const angle = stepDeg * i;
            return (
              <span
                key={i}
                className="absolute left-1/2 top-1/2"
                style={{
                  width: 2,
                  height: 2,
                  marginLeft: -1,
                  marginTop: -1,
                  transform: `rotate(${angle}deg) translateY(${-dotRadius}px)`,
                }}
              >
                <span className={dotClass} />
              </span>
            );
          })}
        </div>
      </div>

      {/* Platter — drag to scrub; release eases back to cruise */}
      <div
        ref={discRef}
        aria-hidden="true"
        className="absolute left-1/2 top-1/2 touch-none rounded-full"
        style={{
          width: discPx,
          height: discPx,
          marginLeft: -discPx / 2,
          marginTop: -discPx / 2,
          cursor,
        }}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
      >
        <div
          className="absolute inset-0 overflow-hidden rounded-full"
          style={{
            boxShadow: `
              inset 0 0 0 1px rgba(255,255,255,0.35),
              inset 0 0 24px rgba(255,255,255,0.18)
            `,
            pointerEvents: "none",
          }}
        >
          {/* Pigment: palette colors only (works for light and dark). */}
          <div
            className="absolute inset-0 rounded-full"
            style={{ backgroundImage: wash }}
          />
          {/* Pearlescence via soft-light so highlights land on any luminance. */}
          <div
            className="absolute inset-0 rounded-full"
            style={{
              backgroundImage: sheen,
              mixBlendMode: "soft-light",
            }}
          />

          {/* Fine groove texture via repeating radial */}
          <div
            className="absolute inset-0 rounded-full"
            style={{
              backgroundImage: `repeating-radial-gradient(
                circle at 50% 50%,
                rgba(255,255,255,0.14) 0px,
                rgba(255,255,255,0.14) 0.6px,
                rgba(30,40,70,0.1) 1.2px,
                rgba(30,40,70,0.1) 1.8px
              )`,
              maskImage: `radial-gradient(circle, transparent ${labelPx * 0.48}px, #000 ${labelPx * 0.52}px, #000 ${discPx * 0.48}px, transparent ${discPx * 0.5}px)`,
              WebkitMaskImage: `radial-gradient(circle, transparent ${labelPx * 0.48}px, #000 ${labelPx * 0.52}px, #000 ${discPx * 0.48}px, transparent ${discPx * 0.5}px)`,
              opacity: 0.85,
              mixBlendMode: "soft-light",
            }}
          />

          {/* Programmatic groove rings */}
          <svg
            className="absolute inset-0 h-full w-full"
            viewBox="0 0 100 100"
            aria-hidden="true"
          >
            <defs>
              <radialGradient id={`sd-groove-${uid}`} cx="38%" cy="32%" r="70%">
                <stop offset="0%" stopColor="rgba(255,255,255,0.55)" />
                <stop offset="45%" stopColor="rgba(255,255,255,0.12)" />
                <stop offset="100%" stopColor="rgba(20,30,60,0.25)" />
              </radialGradient>
            </defs>
            {radii.map((r, i) => (
              <circle
                key={i}
                cx="50"
                cy="50"
                r={r}
                fill="none"
                stroke={`url(#sd-groove-${uid})`}
                strokeWidth={i % 5 === 0 ? 0.35 : 0.18}
                opacity={i % 5 === 0 ? 0.55 : 0.28}
              />
            ))}
          </svg>

          {/* Vinyl grain rides with the platter. */}
          {noise ? (
            <Noise
              preset="fine"
              opacity={0.3}
              blendMode="soft-light"
              className="rounded-full"
            />
          ) : null}

          {/* Specular sweep that rides with the platter */}
          <div
            className="absolute inset-0 rounded-full"
            style={{
              background: `conic-gradient(
                from 40deg,
                transparent 0deg,
                rgba(255,255,255,0.0) 50deg,
                rgba(255,255,255,0.42) 78deg,
                transparent 110deg,
                transparent 220deg,
                rgba(255,255,255,0.18) 250deg,
                transparent 290deg
              )`,
              mixBlendMode: "overlay",
            }}
          />

          {/* Center label / artwork */}
          <div
            className="absolute left-1/2 top-1/2 overflow-hidden rounded-full"
            style={{
              width: labelPx,
              height: labelPx,
              marginLeft: -labelPx / 2,
              marginTop: -labelPx / 2,
              boxShadow: `
                0 0 0 2px color-mix(in srgb, ${mid} 40%, white),
                0 0 0 3px rgba(255,255,255,0.35),
                inset 0 0 12px rgba(0,0,0,0.12)
              `,
            }}
          >
            {children ??
              (src ? (
                // eslint-disable-next-line @next/next/no-img-element -- portable registry component
                <img
                  src={src}
                  alt=""
                  draggable={false}
                  className="h-full w-full object-cover"
                  loading="lazy"
                  decoding="async"
                />
              ) : (
                <div
                  className="flex h-full w-full items-center justify-center text-[10px] font-medium tracking-wide"
                  style={{
                    background: `linear-gradient(145deg, ${warm}, ${mid} 45%, ${cool})`,
                    color: "rgba(255,255,255,0.85)",
                  }}
                >
                  ART
                </div>
              ))}
          </div>
        </div>
      </div>

      {/* Tonearm after the platter in DOM so it stays above the spinning layer */}
      {tonearm ? (
        <div
          aria-hidden="true"
          className="pointer-events-none absolute z-10"
          style={{
            // Master art is 79×186 at the default 320 stage; scale with size.
            right: size * 0.015,
            top: size * 0.035,
            width: size * (79 / 320),
            height: size * (186 / 320),
          }}
        >
          <TonearmSvg id={`sd-arm-${uid}`} />
        </div>
      ) : null}
    </div>
  );
}