Embed

<div style="max-width:900px;margin:0 auto;padding:14px 10px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial">
  <canvas id="peWatch" width="1000" height="1000"
    style="width:100%;height:auto;border-radius:18px;display:block;background:#05060a;box-shadow:0 18px 60px rgba(0,0,0,.25)"></canvas>

  <div style="margin-top:10px;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center">
    <button id="peBtn" style="border:0;padding:10px 14px;border-radius:12px;background:#111827;color:#fff;font-weight:700;cursor:pointer">Pause</button>

    <label style="display:flex;align-items:center;gap:8px;background:#fff;padding:8px 10px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.08);font-size:14px">
      Mode
      <select id="peMode">
        <option value="demo" selected>Demo (24h in 60s)</option>
        <option value="live">Live</option>
      </select>
    </label>

    <label style="display:flex;align-items:center;gap:8px;background:#fff;padding:8px 10px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.08);font-size:14px">
      Speed
      <input id="peSpeed" type="range" min="0.5" max="60" step="0.5" value="10">
      <span id="peSpeedTxt">10×</span>
    </label>
  </div>

  <p style="margin:10px 2px 0;font-size:13px;color:#374151">
    Astronomical Horology: orbit rotates (12h), Sun arc by day, Moon arc by night, Earth fixed, hands run.
  </p>
</div>

<script>
(() => {
  const c = document.getElementById("peWatch");
  const ctx = c.getContext("2d");

  const btn = document.getElementById("peBtn");
  const modeEl = document.getElementById("peMode");
  const speedEl = document.getElementById("peSpeed");
  const speedTxt = document.getElementById("peSpeedTxt");

  let running = true;
  let demoT = 0;
  let last = performance.now();

  const ARC_START = deg(210);
  const ARC_END   = deg(330);

  function deg(d){ return d*Math.PI/180; }
  function clamp(v,a,b){ return Math.max(a, Math.min(b, v)); }
  function lerp(a,b,t){ return a+(b-a)*t; }

  function dayHours(d){
    return d.getHours() + d.getMinutes()/60 + d.getSeconds()/3600;
  }
  // fixed for demo; can be made user controls later
  const SUNRISE = 6;
  const SUNSET  = 18;

  function demoDayHours(dt){
    demoT += dt;
    const loop = 60; // sec per full day
    return ((demoT % loop)/loop)*24;
  }

  function inDay(h){ return (h >= SUNRISE && h < SUNSET); }

  function resize(){
    const rect = c.getBoundingClientRect();
    const dpr = Math.min(2, window.devicePixelRatio || 1);
    c.width = Math.round(rect.width * dpr);
    c.height = Math.round(rect.width * dpr); // square
    ctx.setTransform(1,0,0,1,0,0);
    ctx.scale(dpr,dpr);
  }

  function clear(){
    ctx.clearRect(0,0,c.width,c.height);
  }

  // ---- Drawing helpers (3D-ish look) ----
  function circle(x,y,r,fill){
    ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2);
    ctx.fillStyle = fill; ctx.fill();
  }

  function strokeCircle(x,y,r,w,col){
    ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2);
    ctx.strokeStyle = col; ctx.lineWidth = w; ctx.stroke();
  }

  function metalRing(x,y,r,th){
    // faux metal via layered strokes
    strokeCircle(x,y,r,th, "rgba(255,205,140,0.18)");
    strokeCircle(x,y,r,th*0.55, "rgba(255,225,175,0.10)");
    strokeCircle(x,y,r,2, "rgba(0,0,0,0.25)");
  }

  function drawCrystal(x,y,r){
    // glass shine
    ctx.save();
    ctx.globalAlpha = 0.9;
    const g = ctx.createRadialGradient(x-r*0.2,y-r*0.4, r*0.2, x,y,r);
    g.addColorStop(0, "rgba(255,255,255,0.12)");
    g.addColorStop(0.35, "rgba(255,255,255,0.04)");
    g.addColorStop(1, "rgba(255,255,255,0)");
    circle(x,y,r,g);
    // diagonal highlight
    ctx.globalAlpha = 0.22;
    ctx.beginPath();
    ctx.ellipse(x-r*0.25, y-r*0.35, r*0.55, r*0.18, -0.5, 0, Math.PI*2);
    ctx.fillStyle = "rgba(255,255,255,0.35)";
    ctx.fill();
    ctx.restore();
  }

  function drawStarfield(x,y,r){
    // deep gradient
    const g = ctx.createRadialGradient(x,y-r*0.25, r*0.08, x,y,r*1.1);
    g.addColorStop(0, "rgba(18,45,110,0.90)");
    g.addColorStop(0.55,"rgba(8,10,18,0.98)");
    g.addColorStop(1, "rgba(5,6,10,1)");
    circle(x,y,r,g);

    // stars + gold flecks (lapis feel)
    for(let i=0;i<500;i++){
      const a = Math.random()*Math.PI*2;
      const rr = Math.random()*r*0.98;
      const px = x + Math.cos(a)*rr;
      const py = y + Math.sin(a)*rr;
      const s = Math.random()<0.95 ? 1 : 2;
      ctx.fillStyle = `rgba(255,255,255,${Math.random()*0.25})`;
      ctx.fillRect(px,py,s,s);
    }
    for(let i=0;i<140;i++){
      const a = Math.random()*Math.PI*2;
      const rr = Math.random()*r*0.98;
      const px = x + Math.cos(a)*rr;
      const py = y + Math.sin(a)*rr;
      const s = Math.random()<0.9 ? 1 : 2;
      ctx.fillStyle = `rgba(255,210,120,${0.10+Math.random()*0.20})`;
      ctx.fillRect(px,py,s,s);
    }
  }

  function glowDisc(x,y,r,fill,glow){
    circle(x,y,r*2.0,glow);
    circle(x,y,r,fill);
    circle(x-r*0.25,y-r*0.25,r*0.35,"rgba(255,255,255,0.22)");
  }

  function drawHands(cx,cy,h){
    const hour12 = h%12;
    const minutes = (h - Math.floor(h))*60;
    const seconds = (minutes - Math.floor(minutes))*60;

    const hourA = (Math.PI*2)*(hour12/12) + (Math.PI*2)*(minutes/60)/12 - Math.PI/2;
    const minA  = (Math.PI*2)*(minutes/60) + (Math.PI*2)*(seconds/60)/60 - Math.PI/2;

    hand(cx,cy,140,hourA,10,"rgba(235,245,255,0.95)");
    hand(cx,cy,200,minA,7,"rgba(235,245,255,0.90)");
    circle(cx,cy,10,"rgba(255,215,160,0.95)");
  }

  function hand(cx,cy,len,ang,w,col){
    ctx.save();
    ctx.translate(cx,cy);
    ctx.rotate(ang);
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(len,0);
    ctx.strokeStyle = col;
    ctx.lineWidth = w;
    ctx.lineCap = "round";
    ctx.stroke();
    // inner depth
    ctx.beginPath();
    ctx.moveTo(10,0);
    ctx.lineTo(len-10,0);
    ctx.strokeStyle = "rgba(15,25,40,0.28)";
    ctx.lineWidth = Math.max(2,w-4);
    ctx.stroke();
    ctx.restore();
  }

  function drawOrbit(cx,cy,r,theta){
    // glow track
    strokeCircle(cx,cy,r,14,"rgba(255,190,120,0.10)");
    // ring
    strokeCircle(cx,cy,r,6,"rgba(255,215,150,0.45)");

    // 12 star markers (gear dots)
    for(let i=0;i<12;i++){
      const a = (Math.PI*2)*(i/12) - Math.PI/2 + theta;
      const x = cx + Math.cos(a)*r;
      const y = cy + Math.sin(a)*r;
      circle(x,y,4,"rgba(255,215,140,0.55)");
    }

    // moving highlight tick
    ctx.save();
    ctx.translate(cx,cy);
    ctx.rotate(theta - Math.PI/2);
    ctx.beginPath();
    ctx.moveTo(r-6,0);
    ctx.lineTo(r+18,0);
    ctx.strokeStyle = "rgba(255,240,210,0.75)";
    ctx.lineWidth = 4;
    ctx.lineCap = "round";
    ctx.stroke();
    ctx.restore();
  }

  function drawSunMoon(cx,cy,r,h){
    const isDaytime = inDay(h);
    let t = 0;
    if (isDaytime){
      t = (h - SUNRISE)/(SUNSET - SUNRISE);
    } else {
      const nightLen = (24 - SUNSET) + SUNRISE;
      const fromSS = (h >= SUNSET) ? (h - SUNSET) : (h + (24 - SUNSET));
      t = fromSS / nightLen;
    }
    t = clamp(t,0,1);

    const ang = lerp(ARC_START, ARC_END, t);
    const x = cx + Math.cos(ang)*r;
    const y = cy + Math.sin(ang)*r;

    // arc track
    ctx.beginPath();
    ctx.arc(cx,cy,r, ARC_START, ARC_END);
    ctx.strokeStyle = "rgba(255,255,255,0.10)";
    ctx.lineWidth = 3;
    ctx.stroke();

    if (isDaytime){
      glowDisc(x,y,16,"rgba(255,205,120,0.95)","rgba(255,170,70,0.28)");
    } else {
      glowDisc(x,y,14,"rgba(235,245,255,0.90)","rgba(170,200,255,0.20)");
      // crescent cut
      circle(x+6,y-2,13,"rgba(8,10,16,0.70)");
    }
  }

  function drawEarth(cx,cy){
    const r = 46;

    // cradle ring (mechanical)
    metalRing(cx,cy,r*1.35,18);

    // earth
    glowDisc(cx,cy,r,"rgba(90,180,255,0.95)","rgba(0,120,255,0.22)");
    ctx.globalAlpha = 0.6;
    ctx.fillStyle = "rgba(210,245,210,0.55)";
    ctx.beginPath(); ctx.ellipse(cx-10,cy-6, 20, 12, 0.4, 0, Math.PI*2); ctx.fill();
    ctx.beginPath(); ctx.ellipse(cx+14,cy+8, 16, 9, -0.3, 0, Math.PI*2); ctx.fill();
    ctx.globalAlpha = 1;
  }

  function draw(now){
    const dt = (now-last)/1000;
    last = now;

    const speed = parseFloat(speedEl.value||"1");
    speedTxt.textContent = `${speed}×`;

    let h = 0;
    if (modeEl.value === "live"){
      h = dayHours(new Date());
    } else {
      h = demoDayHours(dt*speed);
    }

    const rectW = c.getBoundingClientRect().width;
    const size = rectW;
    const cx = size*0.50;
    const cy = size*0.52;

    const dialR = size*0.42;
    const orbitR = size*0.34;
    const arcR = orbitR - size*0.06;

    const theta = (Math.PI*2)*((h%12)/12);

    clear();

    // case + bezel depth
    metalRing(cx,cy,size*0.48,size*0.045);
    metalRing(cx,cy,size*0.44,size*0.030);

    // dial plate
    drawStarfield(cx,cy,dialR);

    // orbit system
    drawOrbit(cx,cy,orbitR,theta);

    // sun/moon cycle
    drawSunMoon(cx,cy,arcR,h);

    // earth fixed at bottom
    drawEarth(cx, cy + size*0.22);

    // hands
    drawHands(cx,cy,h);

    // crystal highlight
    drawCrystal(cx,cy,size*0.43);

    requestAnimationFrame(draw);
  }

  btn.addEventListener("click", () => {
    running = !running;
    btn.textContent = running ? "Pause" : "Play";
    if (running){
      last = performance.now();
      requestAnimationFrame(draw);
    }
  });

  window.addEventListener("resize", resize);
  resize();
  requestAnimationFrame(draw);
})();
</script>

Keshav Chopra