Skeuomorphism

import { useState } from 'react';

const TICKS = 11; // from -135° to 135°
const KEY_STEPS: Record<string, number> = {
  ArrowUp: 5,
  ArrowRight: 5,
  ArrowDown: -5,
  ArrowLeft: -5
};

export function VolumeKnob() {
  const [volume, setVolume] = useState(40); // 0 to 100
  const change = (delta: number) =>
    setVolume((v) => Math.min(100, Math.max(0, v + delta)));

  return (
    <div className='relative grid size-36 place-items-center rounded-full bg-neutral-200'>
      {Array.from({ length: TICKS }, (_, i) => (
        <span
          key={i}
          className='absolute inset-1 before:absolute before:top-0 before:left-1/2 before:h-2 before:w-0.5 before:bg-neutral-500'
          style={{ rotate: `${-135 + i * (270 / (TICKS - 1))}deg` }}
        />
      ))}
      {/* Repeating light and dark bands read as brushed metal. */}
      <div
        role='slider'
        tabIndex={0}
        aria-label='Volume'
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={volume}
        onKeyDown={(event) => {
          const step = KEY_STEPS[event.key];
          if (step === undefined) return;
          event.preventDefault();
          change(step);
        }}
        onPointerDown={(event) =>
          event.currentTarget.setPointerCapture(event.pointerId)
        }
        onPointerMove={(event) => {
          if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
          change(-event.movementY); // drag up to turn it up
        }}
        className='relative size-24 touch-none rounded-full bg-[conic-gradient(#d4d4d8,#fafafa,#a1a1aa,#f4f4f5,#d4d4d8,#fafafa,#a1a1aa,#f4f4f5,#d4d4d8)] shadow-[0_6px_12px_rgb(0_0_0/0.35),inset_0_2px_1px_rgb(255_255_255/0.8),inset_0_-2px_2px_rgb(0_0_0/0.2)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500'
      >
        {/* Only the indicator turns, so the light and shadow stay put. */}
        <span
          className='absolute inset-0'
          style={{ rotate: `${-135 + volume * 2.7}deg` }}
        >
          <span className='absolute top-2 left-1/2 h-5 w-1 -translate-x-1/2 rounded-full bg-neutral-700' />
        </span>
      </div>
    </div>
  );
}