• Updated 11 Nov, 12:43 UTC
  • Next run 12 Nov, 05:17 UTCNext 12 Nov 05:17
  • Last 7 days: 10 new models · 61 runs7 d: 10 models · 61 runs
Wristwatch that shows the current time

Nex-N2.6Nex AGI

Network offOpen alone (new tab)

Run details

Model
nex-agi/nex-n2.6
Route
OpenRouter API, one user message
Served by
Nex AGI
Effort
high, OpenRouter's default for this model
Limits
60 min · 235,929 output tokens (the model's limit)
Date
10 Nov 2026
Time
6 min 53 s
Size
27 kB
Tokens
87 in, 44,664 out (34,864 of them thinking)
List price
$0.018 at today's price ($0.12 in / $0.40 out per M)
Paid
$0.018

Raw files: output · meta.json

Exact prompt

Draw a mechanical wristwatch that shows the current local time, with a sweeping seconds hand and a date window. Make it look expensive.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

Source

27 kB 493 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="color-scheme" content="dark"/>
<title>AURELINE — Calibre A-47</title>
<style>
  :root{
    --serif:"Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
    --sans:"Avenir Next","Avenir","Gill Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
    --gold:#c9ab63;
    --text:#e6dcc2;
    --dim:#9a8f78;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:#070605 radial-gradient(130vmax 90vmax at 50% 28%, #221e17 0%, #12100b 46%, #070605 100%);
    color:var(--text);
    font-family:var(--serif);
    overflow:hidden;
  }
  ::selection{background:rgba(201,171,99,.35);color:#fff}

  .grain{position:fixed;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.55;z-index:30}

  .scene{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center}
  .stage{position:relative}
  .shadow{
    position:absolute;left:50%;bottom:-7vh;z-index:0;
    width:72vmin;max-width:620px;height:14vmin;
    transform:translateX(-50%) scale(1);
    background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.7), rgba(0,0,0,0) 70%);
    filter:blur(8px);
    animation:shpulse 7.5s ease-in-out infinite;
  }
  @keyframes shpulse{
    0%,100%{transform:translateX(-50%) scale(1);opacity:.9}
    50%{transform:translateX(-50%) scale(1.06);opacity:.55}
  }
  .bob{animation:bob 7.5s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4vh)}}
  .tilt{position:relative;z-index:1;perspective:1600px}
  .watch{
    position:relative;height:min(80vh,124vw);aspect-ratio:2/3;
    transform-style:preserve-3d;will-change:transform;
    filter:drop-shadow(0 34px 44px rgba(0,0,0,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.4));
  }
  .watch svg{display:block;width:100%;height:100%}
  .glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}

  .corner{position:fixed;top:26px;left:30px;z-index:40;display:flex;flex-direction:column;gap:6px}
  .c-brand{font-family:var(--serif);letter-spacing:.42em;font-size:14px;color:var(--text)}
  .c-sub{font-family:var(--sans);font-size:9.5px;letter-spacing:.34em;color:var(--dim)}

  .sound{
    position:fixed;top:24px;right:28px;z-index:40;
    display:flex;align-items:center;gap:9px;padding:9px 14px;
    background:rgba(18,15,11,.55);border:1px solid rgba(201,171,99,.28);border-radius:999px;
    color:var(--dim);font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;cursor:pointer;
    backdrop-filter:blur(6px);transition:border-color .25s,color .25s;
  }
  .sound:hover{border-color:rgba(212,184,120,.6);color:var(--text)}
  .sound:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
  .sound.is-on{color:var(--gold);border-color:rgba(212,184,120,.55)}
  .sound svg{display:block}
  .sound .w{display:none}
  .sound.is-on .w{display:initial}
  .sound.is-on .x{display:none}

  .caption{
    position:fixed;left:50%;bottom:3.2vh;transform:translateX(-50%);z-index:40;
    display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:max-content;max-width:92vw;
  }
  .hair{width:52px;height:1px;background:rgba(201,171,99,.45)}
  .spec{font-family:var(--sans);font-size:9.5px;letter-spacing:.32em;color:var(--dim)}
  .time{font-family:var(--serif);font-size:15px;letter-spacing:.18em;color:var(--text);font-variant-numeric:tabular-nums}

  @media (max-width:640px){
    .corner{left:18px;top:20px}
    .c-brand{font-size:12px}
    .c-sub{font-size:8px}
    .sound{right:14px;top:18px;padding:8px 11px}
    .sound span{display:none}
    .spec{font-size:8px;letter-spacing:.22em}
    .time{font-size:12.5px;letter-spacing:.12em}
  }
  @media (prefers-reduced-motion:reduce){
    .bob,.shadow{animation:none}
  }
</style>
</head>
<body>
  <div class="grain" id="grain"></div>

  <header class="corner">
    <span class="c-brand">AURELINE</span>
    <span class="c-sub">HAUTE HORLOGERIE &middot; EST. 1928</span>
  </header>

  <button id="tickBtn" class="sound" aria-pressed="false" aria-label="Toggle movement sound">
    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M11 5 6 9H3v6h3l5 4z" fill="currentColor" stroke="none"/>
      <path class="w" d="M15.5 8.5a5 5 0 0 1 0 7"/>
      <path class="w" d="M18 6a8.5 8.5 0 0 1 0 12"/>
      <line class="x" x1="15" y1="9" x2="21" y2="15"/>
      <line class="x" x1="21" y1="9" x2="15" y2="15"/>
    </svg>
    <span>MOVEMENT</span>
  </button>

  <div class="scene">
    <div class="stage">
      <div class="shadow"></div>
      <div class="tilt">
        <div class="bob">
          <div class="watch" id="watch">
            <svg id="watchSvg" viewBox="0 0 1000 1500" role="img"
                 aria-label="Aureline Calibre A-47 mechanical wristwatch showing the current local time">
              <defs>
                <radialGradient id="gCase" cx="0.36" cy="0.28" r="1">
                  <stop offset="0" stop-color="#f9ecc4"/><stop offset="0.4" stop-color="#dabb6d"/>
                  <stop offset="0.75" stop-color="#a17c36"/><stop offset="1" stop-color="#5f471c"/>
                </radialGradient>
                <radialGradient id="gDial" cx="0.5" cy="0.4" r="0.75">
                  <stop offset="0" stop-color="#1a5f41"/><stop offset="0.5" stop-color="#0e4630"/>
                  <stop offset="0.8" stop-color="#08301f"/><stop offset="1" stop-color="#03170e"/>
                </radialGradient>
                <radialGradient id="gShade" cx="0.5" cy="0.42" r="0.65">
                  <stop offset="0" stop-color="#ffffff" stop-opacity="0.13"/>
                  <stop offset="0.45" stop-color="#ffffff" stop-opacity="0"/>
                  <stop offset="0.8" stop-color="#000000" stop-opacity="0.12"/>
                  <stop offset="1" stop-color="#000000" stop-opacity="0.5"/>
                </radialGradient>
                <linearGradient id="gSheen" x1="0" y1="0" x2="0.85" y2="1">
                  <stop offset="0" stop-color="#ffffff" stop-opacity="0.10"/>
                  <stop offset="0.35" stop-color="#ffffff" stop-opacity="0"/>
                  <stop offset="0.7" stop-color="#000000" stop-opacity="0"/>
                  <stop offset="1" stop-color="#000000" stop-opacity="0.24"/>
                </linearGradient>
                <linearGradient id="gIdx" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stop-color="#fff4d2"/><stop offset="0.35" stop-color="#e9ca7a"/>
                  <stop offset="0.7" stop-color="#b48c40"/><stop offset="1" stop-color="#7c5e24"/>
                </linearGradient>
                <linearGradient id="gHandL" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stop-color="#fff6da"/><stop offset="0.5" stop-color="#edcf80"/><stop offset="1" stop-color="#b98f3e"/>
                </linearGradient>
                <linearGradient id="gHandR" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stop-color="#e2c176"/><stop offset="0.5" stop-color="#a8843c"/><stop offset="1" stop-color="#6e521e"/>
                </linearGradient>
                <linearGradient id="gSec" gradientUnits="userSpaceOnUse" x1="500" y1="482" x2="500" y2="806">
                  <stop offset="0" stop-color="#aed0f2"/><stop offset="0.5" stop-color="#4f7fbd"/><stop offset="1" stop-color="#1c3c6e"/>
                </linearGradient>
                <radialGradient id="gDate" cx="0.5" cy="0.35" r="0.9">
                  <stop offset="0" stop-color="#fdfaf0"/><stop offset="0.7" stop-color="#eae0c7"/><stop offset="1" stop-color="#cfc2a0"/>
                </radialGradient>
                <linearGradient id="gApShadow" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stop-color="#000000" stop-opacity="0.38"/><stop offset="1" stop-color="#000000" stop-opacity="0"/>
                </linearGradient>
                <radialGradient id="gCrystal" cx="0.5" cy="0.45" r="0.6">
                  <stop offset="0" stop-color="#ffffff" stop-opacity="0.10"/>
                  <stop offset="0.4" stop-color="#ffffff" stop-opacity="0.03"/>
                  <stop offset="0.78" stop-color="#ffffff" stop-opacity="0"/>
                  <stop offset="1" stop-color="#ffffff" stop-opacity="0.08"/>
                </radialGradient>
                <linearGradient id="gStrap" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stop-color="#2b2118"/><stop offset="0.6" stop-color="#1a130c"/><stop offset="1" stop-color="#0f0a05"/>
                </linearGradient>
                <linearGradient id="gStrapSheen" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0" stop-color="#ffffff" stop-opacity="0.07"/>
                  <stop offset="0.3" stop-color="#ffffff" stop-opacity="0"/>
                  <stop offset="0.72" stop-color="#000000" stop-opacity="0"/>
                  <stop offset="1" stop-color="#000000" stop-opacity="0.3"/>
                </linearGradient>
                <linearGradient id="gKeeper" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stop-color="#3a2d1e"/><stop offset="1" stop-color="#1c140c"/>
                </linearGradient>
                <linearGradient id="gCrown" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stop-color="#f3e0ac"/><stop offset="0.5" stop-color="#c9a45c"/><stop offset="1" stop-color="#7a5c24"/>
                </linearGradient>
                <pattern id="patLeather" width="22" height="22" patternUnits="userSpaceOnUse">
                  <path d="M0 11 Q5.5 3 11 11 T22 11" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1.4"/>
                  <path d="M0 0 Q5.5 8 11 0 T22 0" fill="none" stroke="rgba(0,0,0,0.5)" stroke-width="1.4"/>
                </pattern>
                <linearGradient id="gFade" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stop-color="#ffffff" stop-opacity="0"/>
                  <stop offset="0.14" stop-color="#ffffff" stop-opacity="1"/>
                  <stop offset="0.86" stop-color="#ffffff" stop-opacity="1"/>
                  <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
                </linearGradient>
                <mask id="mFade"><rect x="0" y="0" width="1000" height="1500" fill="url(#gFade)"/></mask>
                <filter id="f4" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="4"/></filter>
                <filter id="f12" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="12"/></filter>
              </defs>

              <!-- Leather straps (fade out toward the edges, product-shot style) -->
              <g mask="url(#mFade)">
                <path d="M380 440 L620 440 L610 60 Q609 26 575 26 L425 26 Q391 26 390 60 Z" fill="url(#gStrap)"/>
                <path d="M380 440 L620 440 L610 60 Q609 26 575 26 L425 26 Q391 26 390 60 Z" fill="url(#patLeather)"/>
                <path d="M380 440 L620 440 L610 60 Q609 26 575 26 L425 26 Q391 26 390 60 Z" fill="url(#gStrapSheen)"/>
                <path d="M380 440 L620 440 L610 60 Q609 26 575 26 L425 26 Q391 26 390 60 Z" fill="none" stroke="rgba(0,0,0,0.55)" stroke-width="2"/>
                <path d="M398 434 L408 46" stroke="#b98f4a" stroke-width="2.4" stroke-dasharray="8 7" stroke-linecap="round" fill="none" opacity="0.7"/>
                <path d="M602 434 L592 46" stroke="#b98f4a" stroke-width="2.4" stroke-dasharray="8 7" stroke-linecap="round" fill="none" opacity="0.7"/>

                <path d="M380 1050 L620 1050 L616 1458 Q616 1478 596 1478 L404 1478 Q384 1478 384 1458 Z" fill="url(#gStrap)"/>
                <path d="M380 1050 L620 1050 L616 1458 Q616 1478 596 1478 L404 1478 Q384 1478 384 1458 Z" fill="url(#patLeather)"/>
                <path d="M380 1050 L620 1050 L616 1458 Q616 1478 596 1478 L404 1478 Q384 1478 384 1458 Z" fill="url(#gStrapSheen)"/>
                <path d="M380 1050 L620 1050 L616 1458 Q616 1478 596 1478 L404 1478 Q384 1478 384 1458 Z" fill="none" stroke="rgba(0,0,0,0.55)" stroke-width="2"/>
                <path d="M398 1086 L402 1462" stroke="#b98f4a" stroke-width="2.4" stroke-dasharray="8 7" stroke-linecap="round" fill="none" opacity="0.7"/>
                <path d="M602 1086 L598 1462" stroke="#b98f4a" stroke-width="2.4" stroke-dasharray="8 7" stroke-linecap="round" fill="none" opacity="0.7"/>
                <rect x="384" y="1176" width="232" height="36" rx="7" fill="url(#gKeeper)" stroke="rgba(0,0,0,0.5)" stroke-width="1.5"/>
                <circle cx="500" cy="1258" r="8" fill="#0b0805" stroke="rgba(201,163,90,0.4)" stroke-width="1.5"/>
                <circle cx="500" cy="1302" r="8" fill="#0b0805" stroke="rgba(201,163,90,0.4)" stroke-width="1.5"/>
                <circle cx="500" cy="1346" r="8" fill="#0b0805" stroke="rgba(201,163,90,0.4)" stroke-width="1.5"/>
              </g>

              <!-- Lugs -->
              <g fill="url(#gIdx)" stroke="rgba(56,40,12,0.9)" stroke-width="1.5">
                <rect x="328" y="358" width="50" height="112" rx="17"/>
                <rect x="622" y="358" width="50" height="112" rx="17"/>
                <rect x="328" y="1030" width="50" height="112" rx="17"/>
                <rect x="622" y="1030" width="50" height="112" rx="17"/>
              </g>

              <!-- Case, crown, fluted bezel -->
              <circle cx="500" cy="750" r="340" fill="url(#gCase)" stroke="#241a08" stroke-width="2.5"/>
              <g id="gCrown">
                <rect x="824" y="736" width="24" height="28" fill="#7a5c24"/>
                <rect x="840" y="712" width="44" height="76" rx="9" fill="url(#gCrown)" stroke="rgba(50,36,12,0.8)" stroke-width="1.5"/>
                <g id="gKnurl"></g>
                <ellipse cx="884" cy="750" rx="7" ry="37" fill="url(#gIdx)" stroke="rgba(50,36,12,0.7)" stroke-width="1"/>
              </g>
              <g id="gFlutes"></g>
              <circle cx="500" cy="750" r="339" fill="url(#gSheen)"/>
              <circle cx="500" cy="750" r="335.5" fill="none" stroke="rgba(255,243,210,0.3)" stroke-width="1.5"/>
              <circle cx="500" cy="750" r="331.5" fill="none" stroke="rgba(0,0,0,0.45)" stroke-width="2.5"/>

              <!-- Dial -->
              <circle cx="500" cy="750" r="296" fill="url(#gDial)"/>
              <g id="gRays"></g>
              <circle cx="500" cy="750" r="296" fill="url(#gShade)"/>
              <circle cx="500" cy="750" r="296" fill="url(#gSheen)"/>
              <circle cx="500" cy="750" r="297.5" fill="none" stroke="#3c2d10" stroke-width="2.5"/>
              <circle cx="500" cy="750" r="293" fill="none" stroke="rgba(0,0,0,0.35)" stroke-width="3"/>
              <g id="gGuillo"></g>

              <!-- Minute track -->
              <circle cx="500" cy="750" r="278" fill="none" stroke="rgba(236,222,182,0.35)" stroke-width="1.2"/>
              <circle cx="500" cy="750" r="258" fill="none" stroke="rgba(236,222,182,0.2)" stroke-width="1"/>
              <g id="gTicks"></g>
              <g id="gIndices"></g>

              <!-- Dial printing -->
              <text x="506" y="614" text-anchor="middle" font-family="Didot, 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif"
                    font-size="34" letter-spacing="12" fill="#ecdcae" opacity="0.95">AURELINE</text>
              <text x="503.5" y="644" text-anchor="middle" font-family="Didot, 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif"
                    font-size="13" letter-spacing="7" fill="#b9ad8e" opacity="0.8">GEN&#200;VE</text>
              <text x="503" y="886" text-anchor="middle" font-family="Didot, 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif"
                    font-size="14" letter-spacing="6" fill="#c7ba98" opacity="0.85">AUTOMATIC</text>
              <text x="501.5" y="908" text-anchor="middle" font-family="Didot, 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif"
                    font-size="11" letter-spacing="3" fill="#a2977c" opacity="0.6">CAL. A-47</text>

              <!-- Date window at 3 o'clock -->
              <g>
                <rect x="682" y="719" width="86" height="62" rx="7" fill="url(#gIdx)" stroke="rgba(50,36,12,0.8)" stroke-width="1.5"/>
                <rect x="689" y="726" width="72" height="48" rx="4" fill="#4e3a16"/>
                <rect x="693" y="729" width="64" height="42" rx="2.5" fill="url(#gDate)"/>
                <text id="dateNum" x="725" y="761" text-anchor="middle"
                      font-family="Didot, 'Bodoni MT', Georgia, 'Times New Roman', serif" font-size="32" fill="#221d12">14</text>
                <rect x="693" y="729" width="64" height="10" fill="url(#gApShadow)"/>
              </g>

              <!-- Hands -->
              <g id="hH">
                <path d="M500 550 L486 612 L500 792 Z" fill="url(#gHandL)"/>
                <path d="M500 550 L514 612 L500 792 Z" fill="url(#gHandR)"/>
                <path d="M500 550 L514 612 L500 792 L486 612 Z" fill="none" stroke="rgba(56,40,12,0.55)" stroke-width="1"/>
                <line x1="500" y1="556" x2="500" y2="786" stroke="rgba(255,248,220,0.55)" stroke-width="1"/>
              </g>
              <g id="hM">
                <path d="M500 488 L490 640 L500 800 Z" fill="url(#gHandL)"/>
                <path d="M500 488 L510 640 L500 800 Z" fill="url(#gHandR)"/>
                <path d="M500 488 L510 640 L500 800 L490 640 Z" fill="none" stroke="rgba(56,40,12,0.55)" stroke-width="1"/>
                <line x1="500" y1="492" x2="500" y2="796" stroke="rgba(255,248,220,0.5)" stroke-width="1"/>
              </g>
              <g id="hS">
                <line x1="500" y1="482" x2="500" y2="806" stroke="url(#gSec)" stroke-width="3.4" stroke-linecap="round"/>
                <circle cx="500" cy="786" r="12.5" fill="url(#gSec)" stroke="rgba(10,20,40,0.5)" stroke-width="1"/>
                <circle cx="500" cy="750" r="7.5" fill="#1d3f74"/>
              </g>
              <circle cx="500" cy="750" r="15" fill="url(#gIdx)" stroke="#3c2d10" stroke-width="1.5"/>
              <circle cx="500" cy="750" r="6" fill="#20180a"/>
              <circle cx="497.5" cy="747.5" r="2" fill="rgba(255,255,255,0.35)"/>

              <!-- Crystal: reflections, cyclops over the date, edge highlight -->
              <g>
                <circle cx="500" cy="750" r="250" fill="none" stroke="#ffffff" stroke-width="30" stroke-dasharray="170 1401"
                        transform="rotate(-118 500 750)" opacity="0.10" filter="url(#f12)"/>
                <circle cx="500" cy="750" r="268" fill="none" stroke="#ffffff" stroke-width="10" stroke-dasharray="110 1573"
                        transform="rotate(-128 500 750)" opacity="0.22" filter="url(#f4)"/>
                <circle cx="500" cy="750" r="255" fill="none" stroke="#ffffff" stroke-width="22" stroke-dasharray="140 1462"
                        transform="rotate(48 500 750)" opacity="0.05" filter="url(#f12)"/>
                <ellipse cx="725" cy="748" rx="46" ry="40" fill="rgba(255,255,255,0.05)"/>
                <ellipse cx="725" cy="748" rx="46" ry="40" fill="none" stroke="rgba(255,255,255,0.09)" stroke-width="1.5"/>
                <circle cx="500" cy="750" r="299" fill="url(#gCrystal)"/>
                <circle cx="500" cy="750" r="297.5" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="2"/>
              </g>
            </svg>
            <div class="glare" id="glare"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer class="caption">
    <div class="hair"></div>
    <p class="spec">CALIBRE A-47 &middot; AUTOMATIC &middot; 28 800 A/H &middot; 18-KARAT GOLD</p>
    <p class="time" id="readout">&mdash;</p>
  </footer>

<script>
(function(){
  "use strict";
  var NS = "http://www.w3.org/2000/svg";
  var CX = 500, CY = 750;
  var $ = function(id){ return document.getElementById(id); };
  var rad = function(d){ return d * Math.PI / 180; };
  var polar = function(r, a){ return [CX + r * Math.sin(rad(a)), CY - r * Math.cos(rad(a))]; };
  function add(parent, name, attrs){
    var e = document.createElementNS(NS, name);
    for (var k in attrs) e.setAttribute(k, attrs[k]);
    parent.appendChild(e);
    return e;
  }

  /* ---- Sunburst dial: fine radial brush lines, brightest toward the upper-left light ---- */
  var gRays = $("gRays");
  for (var i = 0; i < 240; i++){
    var a = i * 1.5;
    var c = Math.cos(rad(a + 50));
    var t = Math.pow(Math.max(0, c), 10) * 0.12 + Math.pow(Math.max(0, -c), 16) * 0.05 + 0.015;
    var p1 = polar(26, a), p2 = polar(293, a);
    add(gRays, "line", {x1:p1[0], y1:p1[1], x2:p2[0], y2:p2[1],
        stroke:"rgba(215,255,233," + t.toFixed(3) + ")", "stroke-width":1.1});
  }

  /* ---- Subtle engine-turned concentric rings in the centre ---- */
  var gG = $("gGuillo");
  for (var r = 18; r <= 104; r += 7){
    add(gG, "circle", {cx:CX, cy:CY, r:r, fill:"none", stroke:"rgba(255,255,255,0.04)", "stroke-width":1});
    add(gG, "circle", {cx:CX, cy:CY, r:r + 3.5, fill:"none", stroke:"rgba(0,0,0,0.10)", "stroke-width":1});
  }

  /* ---- Minute track (skips the ticks hidden under the date aperture) ---- */
  var gT = $("gTicks");
  for (var m = 0; m < 60; m++){
    if (m >= 14 && m <= 16) continue;
    var long = (m % 5 === 0);
    var q1 = polar(long ? 250 : 262, m * 6), q2 = polar(276, m * 6);
    add(gT, "line", {x1:q1[0], y1:q1[1], x2:q2[0], y2:q2[1],
        stroke: long ? "#e8daa9" : "rgba(232,218,169,0.7)",
        "stroke-width": long ? 3 : 1.5, "stroke-linecap":"round"});
  }

  /* ---- Applied gold indices (double baton at 12, date window replaces 3) ---- */
  var gI = $("gIndices");
  function baton(dx, ang){
    add(gI, "rect", {x:CX + dx - 7.5, y:CY - 254, width:15, height:54, rx:3.5,
        fill:"url(#gIdx)", stroke:"rgba(56,40,12,0.85)", "stroke-width":1,
        transform:"rotate(" + ang + " " + CX + " " + CY + ")"});
  }
  for (var h = 0; h < 12; h++){
    if (h === 3) continue;
    if (h === 0){ baton(-12, 0); baton(12, 0); } else { baton(0, h * 30); }
  }

  /* ---- Fluted bezel: 72 facets shaded by their angle to the light ---- */
  var gF = $("gFlutes");
  var cA = [84, 64, 26], cB = [248, 232, 186];
  for (var f = 0; f < 72; f++){
    var fa = f * 5 + 2.5;
    var tt = Math.pow((Math.cos(rad(fa + 52)) + 1) / 2, 2.6);
    var col = cA.map(function(v, k){ return Math.round(v + (cB[k] - v) * tt); });
    var f1 = polar(297, fa - 2.6), f2 = polar(297, fa + 2.6),
        f3 = polar(331, fa + 1.2), f4 = polar(331, fa - 1.2);
    add(gF, "path", {d:"M" + f1 + " L" + f2 + " L" + f3 + " L" + f4 + " Z",
        fill:"rgb(" + col + ")"});
  }

  /* ---- Crown knurling ---- */
  var gK = $("gKnurl");
  for (var k = 0; k < 6; k++){
    add(gK, "line", {x1:847 + k * 6, y1:717, x2:847 + k * 6, y2:783,
        stroke:"rgba(0,0,0,0.35)", "stroke-width":2.2});
  }

  /* ---- Today's date in the window ---- */
  $("dateNum").textContent = String(new Date().getDate());

  /* ---- Film grain tile, generated locally on a canvas (no assets) ---- */
  (function(){
    var c = document.createElement("canvas"); c.width = c.height = 160;
    var x = c.getContext("2d"), d = x.createImageData(160, 160);
    for (var i = 0; i < d.data.length; i += 4){
      var v = (Math.random() * 255) | 0;
      d.data[i] = d.data[i+1] = d.data[i+2] = v; d.data[i+3] = 18;
    }
    x.putImageData(d, 0, 0);
    $("grain").style.backgroundImage = "url(" + c.toDataURL() + ")";
  })();

  /* ---- Live time: hands sweep continuously via requestAnimationFrame ---- */
  var hH = $("hH"), hM = $("hM"), hS = $("hS"), readout = $("readout");
  var watch = $("watch"), glare = $("glare");
  var DAYS = ["SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"];
  var MONTHS = ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
  var p2 = function(n){ return String(n).padStart(2, "0"); };
  var RM = window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
  var last = "";

  /* ---- Cursor parallax: the watch tilts, the glare slides across the crystal ---- */
  var tx = 0, ty = 0, gx = 0, gy = 0;
  addEventListener("pointermove", function(e){
    tx = (e.clientX / innerWidth - 0.5) * 2;
    ty = (e.clientY / innerHeight - 0.5) * 2;
  });
  document.addEventListener("mouseleave", function(){ tx = 0; ty = 0; });

  function frame(){
    var now = new Date();
    var s = now.getSeconds() + now.getMilliseconds() / 1000;
    var mi = now.getMinutes() + s / 60;
    var h = now.getHours() % 12 + mi / 60;
    hH.setAttribute("transform", "rotate(" + (h * 30) + " " + CX + " " + CY + ")");
    hM.setAttribute("transform", "rotate(" + (mi * 6) + " " + CX + " " + CY + ")");
    hS.setAttribute("transform", "rotate(" + (s * 6) + " " + CX + " " + CY + ")");

    var key = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
    if (key !== last){
      last = key;
      readout.textContent = DAYS[now.getDay()] + ", " + MONTHS[now.getMonth()] + " " +
        now.getDate() + " \u2014 " + p2(now.getHours()) + ":" + p2(now.getMinutes()) + ":" + p2(now.getSeconds());
    }

    if (!RM){
      gx += (tx - gx) * 0.07;
      gy += (ty - gy) * 0.07;
      watch.style.transform = "rotateX(" + (-gy * 7).toFixed(2) + "deg) rotateY(" + (gx * 9).toFixed(2) + "deg)";
      glare.style.background = "radial-gradient(circle at " + (50 + gx * 38).toFixed(1) + "% " +
        (42 + gy * 30).toFixed(1) + "%, rgba(255,255,255,0.14), rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 58%)";
    }
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);

  /* ---- Optional mechanical tick: 8 beats per second, like a 28,800 vph movement ---- */
  var btn = $("tickBtn"), actx = null, timer = null, beat = 0, on = false;
  function tick(){
    if (document.hidden || !actx) return;
    var t = actx.currentTime;
    beat ^= 1;
    var o = actx.createOscillator(), g = actx.createGain();
    o.type = "square";
    o.frequency.value = (beat ? 2450 : 2900) + Math.random() * 160;
    g.gain.setValueAtTime(0.0001, t);
    g.gain.exponentialRampToValueAtTime(0.05, t + 0.004);
    g.gain.exponentialRampToValueAtTime(0.0001, t + 0.03);
    o.connect(g).connect(actx.destination); o.start(t); o.stop(t + 0.04);
    var o2 = actx.createOscillator(), g2 = actx.createGain();
    o2.type = "sine"; o2.frequency.value = 170;
    g2.gain.setValueAtTime(0.0001, t);
    g2.gain.exponentialRampToValueAtTime(0.035, t + 0.006);
    g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.05);
    o2.connect(g2).connect(actx.destination); o2.start(t); o2.stop(t + 0.06);
  }
  btn.addEventListener("click", function(){
    on = !on;
    btn.setAttribute("aria-pressed", String(on));
    btn.classList.toggle("is-on", on);
    if (on){
      if (!actx) actx = new (window.AudioContext || window.webkitAudioContext)();
      if (actx.resume) actx.resume();
      if (!timer) timer = setInterval(tick, 125);
    } else {
      clearInterval(timer); timer = null;
    }
  });
})();
</script>
</body>
</html>

Compare with

Nex-N2.6: other attempts