• Updated 1 Nov, 11:50 UTC
  • Next run 2 Nov, 05:17 UTCNext 2 Nov 05:17
  • Last 7 days: 4 new models · 99 runs7 d: 4 models · 99 runs
Wristwatch that shows the current time

Qwen3.8 Max PrimeAlibaba

Network offOpen alone (new tab)

Run details

Model
qwen/qwen3.8-max-prime
Route
OpenRouter API, one user message
Served by
Alibaba
Effort
xhigh, OpenRouter's default for this model
Limits
60 min · 131,072 output tokens (the model's limit)
Date
1 Nov 2026
Time
6 min 44 s
Size
24 kB
Tokens
137 in, 31,099 out (21,412 of them thinking)
List price
$0.37 at today's price ($4.00 in / $12.00 out per M)
Paid
$0.37

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

24 kB 499 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumière — Calibre L-888</title>
<style>
  :root{
    --disp: "Didot","Bodoni MT","Bodoni 72","Playfair Display","Times New Roman",serif;
    --body: "Optima","Candara","Gill Sans","Gill Sans MT","Segoe UI","Trebuchet MS",sans-serif;
    --champ:#e9d3a4;
    --champ-dim:rgba(233,211,164,.55);
    --gold:#c99b57;
    --line:rgba(233,211,164,.16);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--body);
    color:#d9cba9;
    background:
      radial-gradient(1100px 720px at 38% 28%, #261a0e 0%, #130d08 46%, #070605 100%);
    overflow-x:hidden;
    min-height:100svh;
    display:flex;align-items:center;justify-content:center;
  }
  ::selection{background:#c99b57;color:#120d08}

  /* ---------- ambient layers ---------- */
  .vignette{position:fixed;inset:0;pointer-events:none;z-index:4;
    background:radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.62) 100%);}
  .grain{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:.06}
  .dust{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  .dust span{
    position:absolute;left:var(--l);top:var(--t);
    width:var(--s);height:var(--s);border-radius:50%;
    background:radial-gradient(circle,rgba(246,216,158,.95),rgba(246,216,158,0) 70%);
    filter:blur(1px);opacity:0;
    animation:mote var(--dur) linear infinite;animation-delay:var(--del);
  }
  @keyframes mote{
    0%{transform:translate3d(0,24px,0);opacity:0}
    12%{opacity:var(--o)}
    82%{opacity:var(--o)}
    100%{transform:translate3d(var(--dx),-150px,0);opacity:0}
  }

  /* ---------- frame bars ---------- */
  .bar{position:fixed;left:0;right:0;z-index:6;pointer-events:none;
    display:flex;justify-content:space-between;gap:1rem;
    padding:1.05rem clamp(1rem,3vw,2.4rem);
    font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
    color:var(--champ-dim);}
  .bar.top{top:0}
  .bar.bottom{bottom:0}

  /* ---------- stage ---------- */
  .stage{
    display:flex;align-items:center;justify-content:center;
    gap:clamp(2.2rem,6vw,7rem);
    padding:5.5rem clamp(1rem,4vw,3rem) 5rem;
    width:100%;
  }
  .watchstage{perspective:1300px;position:relative}
  .halo{
    position:absolute;left:50%;top:50%;width:135%;aspect-ratio:1;
    transform:translate(-50%,-52%);z-index:0;pointer-events:none;
    background:radial-gradient(closest-side,rgba(242,204,142,.17),rgba(242,204,142,.05) 45%,transparent 70%);
    filter:blur(24px);
    animation:breathe 7.5s ease-in-out infinite;
  }
  @keyframes breathe{50%{transform:translate(-50%,-52%) scale(1.06);opacity:.85}}
  #tilt{position:relative;z-index:2;transform-style:preserve-3d;will-change:transform}
  .float{animation:bob 9s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(-7px)}}
  .watchstage svg{
    display:block;
    height:min(86svh,900px);width:auto;aspect-ratio:640/980;max-width:88vw;
    filter:drop-shadow(0 34px 44px rgba(0,0,0,.6)) drop-shadow(0 8px 14px rgba(0,0,0,.5));
  }

  /* ---------- the movement's heartbeat ---------- */
  .balance{animation:beat .16s cubic-bezier(.45,0,.55,1) infinite alternate}
  @keyframes beat{from{transform:rotate(-138deg)}to{transform:rotate(138deg)}}
  .sweepband{animation:sweep 9s ease-in-out infinite}
  @keyframes sweep{
    0%{transform:translateX(-300px);opacity:0}
    8%{opacity:1}
    46%{transform:translateX(300px);opacity:1}
    52%{opacity:0}
    100%{transform:translateX(300px);opacity:0}
  }

  /* ---------- plaque ---------- */
  .plate{max-width:400px}
  .over{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--champ-dim)}
  .plate h1{
    font-family:var(--disp);font-weight:400;
    font-size:clamp(3rem,6vw,4.7rem);line-height:1.02;
    color:#f0dfb6;letter-spacing:.02em;margin:.32em 0 .12em;
    text-shadow:0 0 34px rgba(233,200,140,.18);
  }
  .sub{font-family:var(--disp);font-style:italic;color:#c9b586;font-size:1.06rem;letter-spacing:.04em}
  .rule{height:1px;margin:1.7rem 0 1.5rem;
    background:linear-gradient(90deg,var(--gold),rgba(201,155,87,.05) 72%);}
  .lede{font-size:.98rem;line-height:1.68;color:#b9ab8b;max-width:36ch}
  .specs{display:grid;margin-top:1.35rem}
  .specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    padding:.58rem 0;border-bottom:1px solid var(--line)}
  .specs dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champ-dim)}
  .specs dd{font-family:var(--disp);font-size:1rem;color:#e6d6ae;letter-spacing:.02em}
  .live{margin-top:1.9rem;display:flex;flex-direction:column;gap:.32rem}
  .live-label{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--champ-dim)}
  .clock{
    font-family:var(--disp);font-variant-numeric:tabular-nums;
    font-size:clamp(2rem,3.4vw,2.9rem);color:#f3e3ba;letter-spacing:.06em;
    text-shadow:0 0 26px rgba(240,205,140,.2);
  }
  .dateline{color:#b9ab8b;font-size:.9rem;letter-spacing:.08em}
  .calnote{margin-top:.7rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(185,171,139,.55)}

  @media (max-width:980px){
    .stage{flex-direction:column;gap:2.6rem;padding-top:5rem}
    .watchstage svg{height:min(70svh,680px)}
    .plate{text-align:left}
  }
  @media (prefers-reduced-motion:reduce){
    .balance,.sweepband,.halo,.float,.dust span{animation:none}
  }
</style>
</head>
<body>

  <div class="dust" aria-hidden="true">
    <span style="--l:16%;--t:64%;--s:3px;--dur:17s;--del:-2s;--o:.5;--dx:34px"></span>
    <span style="--l:24%;--t:30%;--s:2px;--dur:21s;--del:-9s;--o:.4;--dx:-26px"></span>
    <span style="--l:38%;--t:78%;--s:2.5px;--dur:15s;--del:-5s;--o:.55;--dx:18px"></span>
    <span style="--l:47%;--t:18%;--s:2px;--dur:23s;--del:-13s;--o:.35;--dx:40px"></span>
    <span style="--l:55%;--t:70%;--s:3px;--dur:19s;--del:-1s;--o:.45;--dx:-30px"></span>
    <span style="--l:66%;--t:36%;--s:2px;--dur:26s;--del:-17s;--o:.4;--dx:22px"></span>
    <span style="--l:74%;--t:60%;--s:2.6px;--dur:18s;--del:-7s;--o:.5;--dx:-16px"></span>
    <span style="--l:83%;--t:26%;--s:2px;--dur:22s;--del:-11s;--o:.35;--dx:28px"></span>
  </div>

  <header class="bar top" aria-hidden="true">
    <span>Maison Lumière — Genève</span><span>Pièce n° 088 / 888</span>
  </header>

  <main class="stage">
    <div class="watchstage">
      <div class="halo" aria-hidden="true"></div>
      <div id="tilt">
        <div class="float">
          <svg id="watch" viewBox="0 0 640 980" role="img" aria-label="Mechanical wristwatch showing the current local time">
            <defs>
              <linearGradient id="rgCase" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="#fbeccd"/><stop offset=".3" stop-color="#e3b57f"/>
                <stop offset=".55" stop-color="#a5713f"/><stop offset=".78" stop-color="#6b4526"/>
                <stop offset="1" stop-color="#d9a86b"/>
              </linearGradient>
              <linearGradient id="rgBezel" x1="1" y1="1" x2="0" y2="0">
                <stop offset="0" stop-color="#f9e9c6"/><stop offset=".42" stop-color="#caa06a"/>
                <stop offset=".72" stop-color="#7c5430"/><stop offset="1" stop-color="#b98a52"/>
              </linearGradient>
              <radialGradient id="rgDial" cx=".42" cy=".36" r=".8">
                <stop offset="0" stop-color="#2f5480"/><stop offset=".45" stop-color="#1a3155"/>
                <stop offset=".78" stop-color="#0c1830"/><stop offset="1" stop-color="#070e1c"/>
              </radialGradient>
              <linearGradient id="rgMarker" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#f8e6bd"/><stop offset=".5" stop-color="#d3a668"/>
                <stop offset="1" stop-color="#9a6a38"/>
              </linearGradient>
              <linearGradient id="rgGoldText" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#f3dcab"/><stop offset=".55" stop-color="#c99b57"/>
                <stop offset="1" stop-color="#efd7a0"/>
              </linearGradient>
              <linearGradient id="rgStrap" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="#57371e"/><stop offset=".22" stop-color="#2e1a0d"/>
                <stop offset=".5" stop-color="#190d06"/><stop offset=".78" stop-color="#2e1a0d"/>
                <stop offset="1" stop-color="#57371e"/>
              </linearGradient>
              <radialGradient id="rgCrystal" cx=".5" cy=".5" r=".5">
                <stop offset="0" stop-color="rgba(255,255,255,.32)"/>
                <stop offset=".6" stop-color="rgba(255,255,255,.06)"/>
                <stop offset="1" stop-color="rgba(255,255,255,0)"/>
              </radialGradient>
              <linearGradient id="rgBand" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="rgba(255,255,255,0)"/>
                <stop offset=".5" stop-color="rgba(255,255,255,.5)"/>
                <stop offset="1" stop-color="rgba(255,255,255,0)"/>
              </linearGradient>
              <linearGradient id="rgHandL" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#fff6dd"/><stop offset=".6" stop-color="#e6c88c"/>
                <stop offset="1" stop-color="#caa05f"/>
              </linearGradient>
              <linearGradient id="rgHandR" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#b8894c"/><stop offset="1" stop-color="#7a4f28"/>
              </linearGradient>
              <linearGradient id="rgSec" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#f6cd8a"/><stop offset="1" stop-color="#c58f4a"/>
              </linearGradient>
              <radialGradient id="rgJewel" cx=".35" cy=".3" r=".8">
                <stop offset="0" stop-color="#ff7284"/><stop offset=".55" stop-color="#c22339"/>
                <stop offset="1" stop-color="#7c0f20"/>
              </radialGradient>
              <linearGradient id="rgDate" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#fbf7ea"/><stop offset="1" stop-color="#e6dcbd"/>
              </linearGradient>
              <filter id="fHand" x="-60%" y="-60%" width="220%" height="220%">
                <feDropShadow dx="0" dy="7" stdDeviation="6" flood-color="#000" flood-opacity="0.45"/>
              </filter>
              <filter id="fSoft" x="-40%" y="-40%" width="180%" height="180%">
                <feDropShadow dx="0" dy="2.5" stdDeviation="2" flood-color="#000" flood-opacity="0.5"/>
              </filter>
              <clipPath id="cpDial"><circle cx="320" cy="470" r="176"/></clipPath>
              <clipPath id="cpAp"><circle cx="0" cy="0" r="41"/></clipPath>
              <path id="arcB" d="M184 565 A166 166 0 0 0 456 565" fill="none"/>
            </defs>

            <!-- straps -->
            <g>
              <rect x="261" y="-40" width="118" height="320" fill="url(#rgStrap)" stroke="rgba(0,0,0,.55)" stroke-width="1.5"/>
              <rect x="261" y="650" width="118" height="340" fill="url(#rgStrap)" stroke="rgba(0,0,0,.55)" stroke-width="1.5"/>
              <g stroke="#d8b57f" stroke-width="2" stroke-dasharray="7 6" opacity=".75" fill="none">
                <path d="M272 -20 V268"/><path d="M368 -20 V268"/>
                <path d="M272 690 V975"/><path d="M368 690 V975"/>
              </g>
              <rect x="257" y="118" width="126" height="17" rx="4" fill="#20120a" stroke="rgba(216,181,127,.28)"/>
              <rect x="257" y="756" width="126" height="17" rx="4" fill="#20120a" stroke="rgba(216,181,127,.28)"/>
              <g fill="#0c0603" stroke="rgba(216,181,127,.35)">
                <circle cx="320" cy="806" r="3.2"/><circle cx="320" cy="836" r="3.2"/>
                <circle cx="320" cy="866" r="3.2"/><circle cx="320" cy="896" r="3.2"/>
              </g>
            </g>

            <!-- lugs -->
            <g fill="url(#rgCase)" stroke="rgba(70,45,22,.6)" stroke-width="1">
              <path d="M258 330 C252 294 256 260 268 240 L296 248 C285 272 282 300 286 330 Z"/>
              <path d="M382 330 C388 294 384 260 372 240 L344 248 C355 272 358 300 354 330 Z"/>
              <path d="M258 610 C252 646 256 680 268 700 L296 692 C285 668 282 640 286 610 Z"/>
              <path d="M382 610 C388 646 384 680 372 700 L344 692 C355 668 358 640 354 610 Z"/>
            </g>

            <!-- crown -->
            <g filter="url(#fSoft)">
              <rect x="550" y="458" width="16" height="24" rx="3" fill="url(#rgCase)" stroke="rgba(70,45,22,.7)"/>
              <rect x="564" y="446" width="30" height="48" rx="10" fill="url(#rgCase)" stroke="rgba(70,45,22,.7)"/>
              <g stroke="rgba(60,35,15,.55)" stroke-width="2">
                <line x1="570" y1="450" x2="570" y2="490"/><line x1="574.5" y1="448" x2="574.5" y2="492"/>
                <line x1="579" y1="447" x2="579" y2="493"/><line x1="583.5" y1="447" x2="583.5" y2="493"/>
                <line x1="588" y1="448" x2="588" y2="492"/>
              </g>
              <circle cx="597" cy="470" r="5" fill="url(#rgJewel)" stroke="#8a5c2e"/>
            </g>

            <!-- case + bezel -->
            <circle cx="320" cy="470" r="236" fill="#14100a"/>
            <circle cx="320" cy="470" r="232" fill="url(#rgCase)" stroke="rgba(60,38,18,.8)"/>
            <circle cx="320" cy="470" r="214" fill="url(#rgBezel)"/>
            <circle cx="320" cy="470" r="214" fill="none" stroke="rgba(255,244,214,.35)" stroke-width="1"/>
            <circle cx="320" cy="470" r="199" fill="#0a0e16"/>
            <circle cx="320" cy="470" r="196" fill="none" stroke="rgba(244,226,190,.18)" stroke-width="1"/>

            <!-- dial -->
            <circle cx="320" cy="470" r="176" fill="url(#rgDial)"/>
            <g id="rays" clip-path="url(#cpDial)"></g>
            <circle cx="320" cy="470" r="175" fill="none" stroke="rgba(0,0,0,.5)" stroke-width="7"/>

            <g id="ticks"></g>
            <g id="markers" filter="url(#fSoft)"></g>

            <!-- dial printing -->
            <text x="320" y="388" dx="4" text-anchor="middle" font-family="Didot,'Bodoni MT','Bodoni 72',Georgia,serif"
                  font-size="30" letter-spacing="8" fill="url(#rgGoldText)">LUMIÈRE</text>
            <text x="320" y="410" dx="2.5" text-anchor="middle" font-family="Optima,Candara,'Gill Sans',sans-serif"
                  font-size="10.5" letter-spacing="5" fill="#cbb88f" opacity=".85">GENÈVE</text>
            <text x="320" y="506" dx="2" text-anchor="middle" font-family="Optima,Candara,'Gill Sans',sans-serif"
                  font-size="9.5" letter-spacing="4" fill="#cbb88f" opacity=".7">AUTOMATIQUE</text>
            <text font-family="Optima,Candara,'Gill Sans',sans-serif" font-size="9.5" letter-spacing="2.6" fill="#b7a274" opacity=".8">
              <textPath href="#arcB" startOffset="50%" text-anchor="middle">MAISON LUMIÈRE · GENÈVE · 1888</textPath>
            </text>

            <!-- open-heart balance at six -->
            <g transform="translate(320 562)" filter="url(#fSoft)">
              <circle r="46" fill="url(#rgMarker)"/>
              <circle r="41" fill="#060a12"/>
              <g clip-path="url(#cpAp)">
                <g transform="rotate(32)" opacity=".95">
                  <rect x="-44" y="-5" width="88" height="10" rx="5" fill="url(#rgCase)"/>
                  <circle cx="31" cy="0" r="4.2" fill="url(#rgJewel)" stroke="#8a5c2e"/>
                  <circle cx="-34" cy="0" r="2.4" fill="#e8d3a0"/>
                </g>
                <g stroke="#caa76f" opacity=".3" stroke-width=".8" fill="none">
                  <circle r="8"/><circle r="11"/><circle r="14"/>
                </g>
                <g class="balance">
                  <circle r="26" fill="none" stroke="url(#rgMarker)" stroke-width="5"/>
                  <rect x="-26" y="-2" width="52" height="4" fill="#d9b072"/>
                  <rect x="-2" y="-26" width="4" height="52" fill="#c8a05f"/>
                  <g fill="#f6e2b4" stroke="#7a5426" stroke-width=".6">
                    <circle cx="18.4" cy="18.4" r="2.2"/><circle cx="-18.4" cy="18.4" r="2.2"/>
                    <circle cx="-18.4" cy="-18.4" r="2.2"/><circle cx="18.4" cy="-18.4" r="2.2"/>
                  </g>
                  <circle r="4" fill="#e8c07c" stroke="#7a5426" stroke-width=".6"/>
                  <circle cx="0" cy="-9" r="1.7" fill="#c0303f"/>
                </g>
              </g>
              <circle r="41" fill="none" stroke="rgba(0,0,0,.7)" stroke-width="3.5"/>
              <circle r="46" fill="none" stroke="rgba(60,35,15,.6)"/>
            </g>

            <!-- date window at three -->
            <g filter="url(#fSoft)">
              <rect x="429" y="452" width="46" height="36" rx="4" fill="url(#rgMarker)" stroke="rgba(60,35,15,.6)"/>
              <rect x="433" y="456" width="38" height="28" rx="2" fill="url(#rgDate)"/>
              <rect x="433" y="456" width="38" height="7" fill="rgba(0,0,0,.28)"/>
            </g>
            <text id="dateText" x="452" y="477" text-anchor="middle"
                  font-family="Didot,'Bodoni MT',Georgia,serif" font-size="20" fill="#241a0d">1</text>
            <ellipse cx="446" cy="461" rx="15" ry="5" fill="rgba(255,255,255,.16)" transform="rotate(-18 446 461)"/>

            <!-- hands -->
            <g id="hourHand" filter="url(#fHand)">
              <polygon points="0,-118 -9,16 0,16" fill="url(#rgHandL)" stroke="rgba(50,30,12,.5)" stroke-width=".5"/>
              <polygon points="0,-118 9,16 0,16" fill="url(#rgHandR)" stroke="rgba(50,30,12,.5)" stroke-width=".5"/>
            </g>
            <g id="minHand" filter="url(#fHand)">
              <polygon points="0,-172 -7,16 0,16" fill="url(#rgHandL)" stroke="rgba(50,30,12,.5)" stroke-width=".5"/>
              <polygon points="0,-172 7,16 0,16" fill="url(#rgHandR)" stroke="rgba(50,30,12,.5)" stroke-width=".5"/>
            </g>
            <g id="secHand" filter="url(#fSoft)">
              <rect x="-1" y="-180" width="2" height="242" fill="url(#rgSec)"/>
              <circle cx="0" cy="48" r="8" fill="none" stroke="url(#rgSec)" stroke-width="3"/>
            </g>
            <circle cx="320" cy="470" r="7.5" fill="url(#rgCase)" stroke="#5a3a1d"/>
            <circle cx="320" cy="470" r="3.2" fill="url(#rgJewel)"/>
            <circle cx="319" cy="469" r="1" fill="#ffd9dd" opacity=".9"/>

            <!-- crystal -->
            <g clip-path="url(#cpDial)">
              <g id="glare">
                <ellipse cx="262" cy="372" rx="132" ry="84" fill="url(#rgCrystal)" opacity=".5" transform="rotate(-24 262 372)"/>
                <path d="M174.5 386 A168 168 0 0 1 465.5 386" fill="none" stroke="rgba(255,255,255,.14)" stroke-width="3" stroke-linecap="round"/>
              </g>
              <g class="sweepband">
                <rect x="255" y="240" width="110" height="470" fill="url(#rgBand)" opacity=".55" transform="rotate(26 320 470)"/>
              </g>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <aside class="plate">
      <p class="over">Manufacture d'Horlogerie · Est. 1888</p>
      <h1>Lumière</h1>
      <p class="sub">Grand Classique — or rose, cadran midnight</p>
      <div class="rule"></div>
      <p class="lede">Twenty-one jewels beneath a box sapphire. The balance breathes at six o'clock,
        and the centre seconds glides in a true sweep — it never ticks.</p>
      <dl class="specs">
        <div><dt>Calibre</dt><dd>L-888 · automatic</dd></div>
        <div><dt>Frequency</dt><dd>28 800 vph</dd></div>
        <div><dt>Power reserve</dt><dd>72 hours</dd></div>
        <div><dt>Case</dt><dd>18 ct rose gold · 39 mm</dd></div>
      </dl>
      <div class="live">
        <span class="live-label">Local time</span>
        <span class="clock" id="clock">00:00:00</span>
        <span class="dateline" id="dateline">—</span>
        <span class="calnote">Set by the movement · date at three</span>
      </div>
    </aside>
  </main>

  <footer class="bar bottom" aria-hidden="true">
    <span>Cal. L-888 · 21 jewels</span><span>Or rose 18 ct · cuir de veau</span>
  </footer>

  <div class="vignette" aria-hidden="true"></div>
  <svg class="grain" aria-hidden="true">
    <filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix type="saturate" values="0"/></filter>
    <rect width="100%" height="100%" filter="url(#n)"/>
  </svg>

<script>
(function(){
  "use strict";
  var SVGNS = "http://www.w3.org/2000/svg";
  var CX = 320, CY = 470;
  var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  function el(name, attrs){
    var e = document.createElementNS(SVGNS, name);
    for (var k in attrs) e.setAttribute(k, attrs[k]);
    return e;
  }

  /* --- sunburst brushing on the dial --- */
  var rays = document.getElementById("rays");
  for (var a = 0, i = 0; a < 360; a += 1.2, i++){
    var rad = a * Math.PI / 180;
    var x2 = CX + 176 * Math.cos(rad), y2 = CY + 176 * Math.sin(rad);
    var light = (i % 2 === 0);
    rays.appendChild(el("line", {
      x1: CX, y1: CY, x2: x2, y2: y2,
      stroke: light ? "rgba(255,255,255," + (0.02 + 0.045 * Math.abs(Math.sin(i * 0.7))).toFixed(3) + ")"
                    : "rgba(2,6,18,"   + (0.05 + 0.06  * Math.abs(Math.cos(i * 0.5))).toFixed(3) + ")",
      "stroke-width": 1.4
    }));
  }

  /* --- minute track on the chapter ring --- */
  var ticks = document.getElementById("ticks");
  for (var t = 0; t < 60; t++){
    var ta = t * 6 * Math.PI / 180;
    var long = (t % 5 === 0);
    var r1 = long ? 180 : 185, r2 = 191;
    ticks.appendChild(el("line", {
      x1: CX + r1 * Math.cos(ta), y1: CY + r1 * Math.sin(ta),
      x2: CX + r2 * Math.cos(ta), y2: CY + r2 * Math.sin(ta),
      stroke: long ? "#dcc391" : "rgba(220,195,145,.45)",
      "stroke-width": long ? 2.6 : 1.3,
      "stroke-linecap": "round"
    }));
  }

  /* --- applied hour markers (double baton at 12, date takes 3) --- */
  var markers = document.getElementById("markers");
  for (var h = 0; h < 12; h++){
    if (h === 3) continue;
    var g = el("g", { transform: "rotate(" + (h * 30) + " " + CX + " " + CY + ")" });
    var xs = (h === 0) ? [CX - 11.5, CX + 2.5] : [CX - 4.5];
    xs.forEach(function(x){
      g.appendChild(el("rect", {
        x: x, y: CY - 170, width: 9, height: 36, rx: 2,
        fill: "url(#rgMarker)", stroke: "rgba(60,35,15,.55)", "stroke-width": .7
      }));
    });
    markers.appendChild(g);
  }

  /* --- references --- */
  var hourHand = document.getElementById("hourHand");
  var minHand  = document.getElementById("minHand");
  var secHand  = document.getElementById("secHand");
  var dateText = document.getElementById("dateText");
  var clockEl  = document.getElementById("clock");
  var dateEl   = document.getElementById("dateline");
  var glare    = document.getElementById("glare");
  var tiltEl   = document.getElementById("tilt");

  function pad(n){ return (n < 10 ? "0" : "") + n; }

  var lastDay = -1;
  function tick(){
    var d = new Date();
    var ms = d.getMilliseconds();
    var s = d.getSeconds() + ms / 1000;      /* true mechanical sweep */
    var m = d.getMinutes() + s / 60;
    var hr = (d.getHours() % 12) + m / 60;

    secHand.setAttribute("transform",  "rotate(" + (s * 6)  + " " + CX + " " + CY + ")");
    minHand.setAttribute("transform",  "rotate(" + (m * 6)  + " " + CX + " " + CY + ")");
    hourHand.setAttribute("transform", "rotate(" + (hr * 30) + " " + CX + " " + CY + ")");

    if (d.getDate() !== lastDay){
      lastDay = d.getDate();
      dateText.textContent = String(d.getDate());
      dateEl.textContent = d.toLocaleDateString(undefined,
        { weekday: "long", day: "numeric", month: "long", year: "numeric" });
    }
    clockEl.textContent = pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds());
  }

  /* --- gentle parallax tilt + travelling glare --- */
  var tx = 0, ty = 0, cx = 0, cy = 0;
  if (!reduceMotion){
    window.addEventListener("pointermove", function(e){
      tx = ((e.clientX / window.innerWidth)  - 0.5) * 10;
      ty = -((e.clientY / window.innerHeight) - 0.5) * 8;
    }, { passive: true });
  }

  function frame(){
    tick();
    if (!reduceMotion){
      cx += (tx - cx) * 0.06;
      cy += (ty - cy) * 0.06;
      tiltEl.style.transform = "rotateX(" + cy.toFixed(3) + "deg) rotateY(" + cx.toFixed(3) + "deg)";
      glare.setAttribute("transform", "translate(" + (cx * 2.4).toFixed(2) + " " + (-cy * 2.4).toFixed(2) + ")");
    }
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
})();
</script>
</body>
</html>

Compare with

Qwen3.8 Max Prime: other attempts