JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" id="slider" min="0" max="1" step="0.001" value="0" style="width:400px">
<br>
<span id="digital">00:00:00</span>
<br>
<canvas id="clock" width="400" height="400"></canvas>

JavaScript

// scaffoling prompted: https://chatgpt.com/share/690b05d9-2fac-800c-b014-386b2450573c

// Feel free to change the order of the numbers.
// Here are some presets you can try :-)
const PRESET_NORMAL = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
const PRESET_REVERSE = [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
const PRESET_ASC = [1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9];
const PRESET_DESC = [9, 8, 7, 6, 5, 4, 3, 2, 12, 11, 10, 1];

const hour_numbers = [...PRESET_DESC];

// It's mathematically simpler to use 0 instead of 12 on the clock face.
// Will later be replaced back to 12 in the draw_number function.
for (let n = 0; n < 12; n++) {
  if (hour_numbers[n] === 12) {
    hour_numbers[n] = 0;
  }
}

const f12_angles = [];

for (let n = 0; n < 12; n++) {
  const idx = hour_numbers.indexOf(n);
  if (idx === -1) throw new Error(`Number ${n} not found in array`);
  f12_angles.push(idx / 12);
}

const canvas = document.getElementById('clock');
const slider = document.getElementById('slider');
const digital = document.getElementById('digital');

const ctx = canvas.getContext('2d');

const hour_hand_thickness = 8;
const hour_hand_length = 0.4;
const minute_hand_thinkness = 5;
const minute_hand_length = 0.7;
const second_hand_thinkness = 2;
const second_hand_length = 0.8;

// global constants
const tau = 2 * Math.PI;
const center = { x: canvas.width / 2, y: canvas.height / 2 };
const radius = 150;

// draw helper: single number at given angle (in tau)
function draw_number(angle, number) {
  if (number === 0) {
    number = 12;
  }

  const r = radius - 25;
  const x = center.x + r * Math.sin(angle * tau);
  const y = center.y - r * Math.cos(angle * tau);
  ctx.font = "20px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(number.toString(), x, y);
}

function angle_map(angle) {
  const angleNormalized = (angle + 1) % 1;
  const f12 = angleNormalized * 12;
  const fraction = f12 %...